-
-
Notifications
You must be signed in to change notification settings - Fork 7.9k
Frequently Asked Questions
If you define the url (and probably paramName) Options, you can call the plugin on any element - no form or file input field required - and the drag&drop functionality will still work.
To support browsers without XHR file upload capabilities, a file input field has to be part of the widget, or defined using the fileInput option.
The file upload plugin makes use of an Iframe Transport module for browsers like Microsoft Internet Explorer and Opera, which do not yet support XHR file uploads.
Iframe based uploads require a Content-type of text/plain or text/html for the JSON response - they will show an undesired download dialog if the iframe response is set to application/json.
Please have a look at the Content-Type Negotiation section of the Setup instructions.
Your JSON response is probably not valid JSON.
You can test your JSON response for validity on jsonlint.com.
You can use the accept attribute of the file input field to limit the file type selection, though this seems to be supported only on Google Chrome and Opera.
An example limiting files to PNG images:
<input type="file" name="files[]" accept="image/png" multiple>
Note that this will not limit files added by drag&drop and is not supported across all browsers.
It is possible to upload large files (> 1 GB) with the jQuery File Upload plugin, but with some reservations.
HTTP might not be the ideal protocol for uploading large files, but the jQuery File Upload plugin doesn't put any layer on top of the HTTP upload implementation of the browser.
So any files that can be uploaded with a simple HTML form can be uploaded with the jQuery File Upload plugin as well.
Invoking the click event on a file input field is not supported on the following browsers:
- Firefox 3.6 (tested on OSX and Windows XP)
- Opera 11.01 (tested on OSX)
It works on the other major browsers including Firefox 4, so it might be a feasible solution in the future.
See also: Style Guide.
Just make use of jQuery's each method to set the this keyword to the element node:
$('#fileupload').each(function () {
$(this).fileupload({
fileInput: $(this).find('input:file')
});
});
Just remove the multiple attribute from the file input:
<input type="file" name="files[]">
Note that users can still drag&drop multiple files. To enforce a one file upload limit, you can make use of the maxNumberOfFiles option (see Options).
The File Upload plugin will properly handle HTTP response codes when the browser supports XHR file uploads. It even displays the correct error message, e.g. "Error: Service Unavailable" for the following HTTP header :
HTTP/1.0 503 Service Unavailable
However, for browsers without support for XHR file uploads - which includes Internet Explorer and Opera - the Iframe Transport is used and there is no way to retrieve the HTTP status code from an iframe load event.
It's technically possible (via the canvas element and replacing the File objects with Blobs), but currently only supported on Mozilla Firefox (via canvas.mozGetAsFile). As soon as Google Chrome and other browsers support the BlobBuilder interface, it's also possible on those browsers.