-
-
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.
You probably have a server-side setting preventing you to upload larger files.
Try adding the following to a .htaccess file in the php directory:
php_value upload_max_filesize 99999M
php_value post_max_size 99999M
If this doesn't work, try creating a php.ini file in the php directory and add the following two lines:
upload_max_filesize = 99999
post_max_size = 99999
If this also doesn't work, contact your hosting provider.
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.
Remove the "preview" class from the upload template to avoid rendering the preview images, which have the potential to block the main JS thread.
Invoking a click event on the file input field programmatically is not supported across browsers - see Style Guide.
However, another file input button can be used to trigger the file selection and passed as parameter to the fileupload add or send API:
$('#some-file-input-field').bind('change', function (e) {
$('#fileupload').fileupload('add', {
files: e.target.files || [{name: this.value}],
fileInput: $(this)
});
});
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.
The current browser APIs only supports drag&drop of (multiple) files, not of folders.
See also issue #573.
However, it is possible to allow selecting a folder (instead of files) via the file input element by adding browser-vendor specific "directory" attributes:
<input type="file" name="files[]" multiple directory webkitdirectory mozdirectory>
Note that this currently only works in the latest versions of Google Chrome and Firefox.
The example in the download package comes with code that retrieves and displays a list of existing files.
Remove the $.getJSON call from application.js if you don't need that functionality.
This is called a protocol relative url and a perfectly valid way to define a resource, relative to the current URL protocol.
This ensures that the referenced scripts are loaded via the same protocol as the current page, which avoids security notifications when loading resources via unencrypted HTTP on a page loaded via HTTPS.
However, it also requires that the current protocol is either "http:" or "https:" and will not work on a "file:" url.
See also issue #514 as well as pull requests #722 and #833.
The template will be rendered for each add call.
As long as the option singleFileUploads is set to true (which is the default), multiple selects/drops get split up into single add calls, so the index will always be 0.
Please see the comments for Issue #893.
See Firefox Bug #642463.
If desired, you can workaround this bug by manually setting the progress bar to 100% when the load event (done event) fires.