Develop Reference

DropZone.js not working using iOS

The file upload with DROPZONE.JS just working in Desktop Browser and Android Browsers. It actually isn't working when it's using iOS. It shows like the file it's uploaded but when I refresh the page it isn't there...
This is the code...
jQuery(function () {
Dropzone.autoDiscover = false;
Dropzone.options.imageUpload = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 5, // MB
parallelUploads: 2, //limits number of files processed to reduce stress on server
addRemoveLinks: true,
accept: function(file, done) {
// TODO: Image upload validation
done();
},
sending: function(file, xhr, formData) {
// Pass token. You can use the same method to pass any other values as well such as a id to associate the image with for example.
formData.append("_token", $('meta[name="csrf-token"]').attr('content')); // Laravel expect the token post value to be named _token by default
},
init: function() {
this.on("success", function(file, response) {
// On successful upload do whatever :-)
console.log(response);
});
}
};
// Manually init dropzone on our element.
var myDropzone = new Dropzone("#image-upload", {
url: '/post-scheduling/add'
});

I had the same issue as #Chad, and the reason was the value for "acceptedFiles".
when I changed it from ".jpg,.png" to "image/jpeg,image/png" it started to work normally.

I'm not sure if this answer will solve your entire issue, but it will at least be a solid start. I have just encountered a similar issue, so I've had to troubleshoot similar conditions.
In iOS 12, I've found the following to be true in both Chrome and Safari:
I am able to upload photos of either orientation using the Take Photo option
I cannot upload a photo that is in my photo library, though I am able to see and interact with all the photos contained in this section
Using the Browse option, I do not have any images that I can test the upload with, but I am able to browse through the different apps' files
The first place I looked was the privacy permissions of Chrome. I had previously granted access to the camera, so that showed up (allowing me to upload photos via Take Photo), but the Photos privacy section did not contain Chrome (or Safari, for that matter). I believe this to be a bug, as in theory if Chrome does not have access to the Photos app, it should not be able to even browse your Photo Library. But currently, as stated above, you can in fact browse through it despite a lack of permissions in the privacy settings.
Next up, I had to verify that my server was configured to accept a larger max filesize for upload files (some phones nowadays including iPhones create some pretty large file sizes). This will be a different process depending on whether you're running apache, nginx, or another server configuration.
Lastly, make sure you have increased your maxFilesize inside your Dropzone.options. Right now, your code is set to 5 MB, and this is most assuredly too low for basically any smartphone since probably 2009 if not sooner.
Well, my issue is still unresolved after these steps, as I do not know how to fix what appears to be a bug in the permissions & handling of iOS's Photo Library upload. If anyone else can chime in, please do.

Using selenium to download a file via window.open

I'm trying to scrape a webpage where clicking a link results in a new window popping open that immediately downloads a csv. I haven't been able to figure out the format of the url since it's fairly dense javascript (and one function is called via the onClick property while another is called as part of the href property. I have not worked with Selenium before, so I was hoping to confirm before getting started that what I want to do is possible. I had read somewhere that downloading files via new popup windows is not necessarily something I can do with Selenium.
Any advice would be greatly appreciated. A this is possible would be very helpful as would as here's how you'd do it even sketched in broad detail. Thanks much!
To be clear, my difficulties primarily stem from the fact that I can't figure out how the URL to download the file is generated. Even looking at the Google chrome network calls, I am not seeing where it is, and it would probably take me many hours to track this down, so I am looking for a solution that relies on clicking specific text in the browser rather than disentangling the cumbersome machinery behind the scenes.

Here's how I download files using Firefox webdriver. It's essentially creating a browser profile so that the default download location for certain file types are set. You can then verify if the file exists at that location.
import os
from selenium import webdriver
browser_profile = webdriver.FirefoxProfile()
# add the file_formats to download
file_formats = ','.join(["text/plain",
"application/pdf",
"application/x-pdf",
"application/force-download"])
preferences = {
"browser.download.folderList": 2,
"browser.download.manager.showWhenStarting": False,
"browser.download.dir": os.getcwd(), # will download to current directory
"browser.download.alertOnEXEOpen": False,
"browser.helperApps.neverAsk.saveToDisk": file_formats,
"browser.download.manager.focusWhenStarting": False,
"browser.helperApps.alwaysAsk.force": False,
"browser.download.manager.showAlertOnComplete": False,
"browser.download.manager.useWindow": False,
"services.sync.prefs.sync.browser.download.manager.showWhenStarting": False,
"pdfjs.disabled": True
}
for pref, val in preferences.items():
browser_profile.set_preference(pref, val)
browser_binary = webdriver.firefox.firefox_binary.FirefoxBinary()
browser = webdriver.Firefox(firefox_binary=browser_binary,
firefox_profile=browser_profile)
# set the file name that will be saved as when you download is complete
file_name = 'ABC.txt'
# goto the link to download the file from it will be automatically
# downloaded to the current directory
file_url = 'http://yourfiledownloadurl.com'
browser.get(file_url)
# verify if the expected file name exists in the current directory
path = os.path.join(os.getcwd(), file_name)
assert os.path.isfile(path)

Implement cross extension message passing in chrome extension and app

I am trying to do cross extension message passing between chrome extension and chrome app according to this article. But I am not sure that how to do it correctly. I used background js to receive and send messages. But no clue whether it is working or not. Actually I want to save file from chrome extension, since it cannot be done I thought this could work. So any idea or suggestion or example is highly welcome.
I have go through many alternatives as also appears in this question. Then one of answer points this example. I found that this example is works fine. I hope that I could use this mechanism to save file using Chrome App's fileSystem API.

The Chrome messaging APIs can only transfer JSON-serializable values. If the files are small, then you could just read the file content using FileReader in the extension, send the message over the external messaging channel to the Chrome App, then save the data using the FileWriter API.
When the files are big, read the file in chunks using file.slice(start, end) then follow the same method as for small files.
Extension:
var app_id = '.... ID of app (32 lowercase a-p characters) ....';
var file = ...; // File or Blob object, e.g. from an <input type=file>
var fr = new FileReader();
fr.onload = function() {
var message = {
blob: fr.result,
filename: file.name,
filetype: file.type
};
chrome.runtime.sendMessage(app_id, message, function(result) {
if (chrome.runtime.lastError) {
// Handle error, e.g. app not installed
console.warn('Error: ' + chrome.runtime.lastError.message);
} else {
// Handle success
console.log('Reply from app: ', result);
}
});
};
fr.onerror = function() { /* handle error */ };
// file or sliced file.
fr.readAsText(file);
App:
chrome.runtime.onMessageExternal.addListener(
function(message, sender, sendResponse) {
// TODO: Validate that sender.id is allowed to invoke the app!
// Do something, e.g. convert back to Blob and do whatever you want.
var blob = new Blob([message.blob], {type: message.filetype});
console.log('TODO: Do something with ' + message.filename + ':', blob);
// Do something, e.g. reply to message
sendResponse('Processed file');
// if you want to send a reply asynchronously, uncomment the next line.
// return true;
});
EDIT: Although the following method using sounded nice in theory, it does not work in practice because a separate SharedWorker process is created for the app / extension.
If you want to send huge files (e.g. Files), then you could implement the following:
Extension: Create proxy.html (content = <script src=proxy.js></script>). (feel free to pick any other name).
Extension: Put proxy.html in web_accessible_resources.
App: Bind a window.onmessage event listener. This event listener will receive messages from the frame you're going to load in the next step.
App: Load chrome-extension://[EXTENSIONID]/proxy.html in a frame within your app. This extension ID can either be hard-coded (see Obtaining Chrome Extension ID for development) or exchanged via the external extension message passing API (make sure that you validate the source - hardcoding the ID would be the best way).
Extension: When proxy.html is loaded, check whether location.ancestorOrigins[0] == 'chrome-extension://[APPID]' to avoid a security leak. Terminate all steps if this condition fails.
Extension: When you want to pass a File or Blob to the app, use parent.postMessage(blob, 'chrome-extension://[APPID]');
App: When it receives the blob from the extension frame, save it to the FileSystem that you obtained through the chrome.fileSystem API.
The last task to solve is getting a file from the extension to the extension frame (proxy.html) that is embedded in the app. This can be done via a SharedWorker, see this answer for an example (you can skip the part that creates a new frame because the extension frame is already created in one of the previous steps).
Note that at the moment (Chrome 35), Files can only be sent with a work-around due to a bug.

Saving Files Locally

I'm trying to create a page where there are links to online pdf's.
When you click these links, it will save the file locally, and add a name / path to local storage.
I then iterate over the local storage keys, to display links to each saved file.
I'm having issues with saving files locally. I tried using chrome filesystem api:
function saveFile() {
chrome.fileSystem.chooseEntry({
type: "saveFile",
suggestedName: "file.txt"
},
function (savedFile) {
localStorage[s] = saveFile.fullPath;
});
}
but I get Uncaught TypeError: Cannot read property 'chooseEntry' of undefined.
Essentially, I need to save a file to the system, and get that path. It is preferable if there is no prompt to select name/location.

If the app is a Chrome extension then I think it is likely that the fileSystem API has not been enabled. For a chrome app you need to enable it via the manifest.json file for that application, you may also be able to ask for user permission.
If it is for a web application then you can request the file system using window.webkitRequestFileSystem although this will only be possible in Chrome (and maybe still Opera).
For cross browser file storage and download support you could use something like Dexie for browser IndexedDB storage and the FileSaver and Blob libraries although you will not have the same storage capacity and flexibility than with the native chrome APIs. Here is an example for FileSaver & Blob:
var blob = new Blob([data.text], {
type: "text/csv;charset=utf-8"
});
saveAs(blob, data.label + ".csv");

Is this a Google Chrome Application?
If so, you must have the following entry in your manifest file:
"permissions" : [
{
"fileSystem" : ["write", "directory"]
}
]
(Be careful with the spelling. I encountered the error because I wrote permission instead of permissions)

Save a file without the save dialog box in Chrome Apps

In my chrome app, I am writing some data to a file.
I used the following code available in the official website under Storage APIs
chrome.fileSystem.chooseEntry({type: 'saveFile'}, function(writableFileEntry) {
writableFileEntry.createWriter(function(writer) {
writer.onerror = errorHandler;
writer.onwriteend = function(e) {
console.log('write complete');
};
writer.write(new Blob(['1234567890'], {type: 'text/plain'}));
}, errorHandler);
});
Now I need to avoid popping up the save dialog box, and save this file in a predefined location.
Is this possible to do?

If you want persistent data but don't want to bother the user with the location of the data on the local machine, you have several options:
Local storage
IndexedDB
HTML5 file API
chrome.storage
chrome.storage.sync
chrome.syncFileSystem
None of these will give you real files that the user can access. If the user (in addition to your own app) needs to be able to access the file that you've written, then the user needs to be asked where to put the file. As Cerbrus said in the comment to your question, silently putting a file somewhere on the user's machine would be a security issue.
A new feature in Chrome 31 is chrome.fileSystem.retainEntry. Using this API, your app will keep the ability to retain a number of fileEntries, including directories, across app restarts, so that you won't have to keep bugging the user to choose the file location. It's my understanding that there are restrictions in which locations the user is allowed to pick, so that a malicious app can't direct the user to instruct Chrome to overwrite system files.