Originally developed/designed by Andrew Valums.
Currently maintained by Ray Nicholus.
If you have found Fine Uploader useful, please consider donating to support continued maintenance and evolution of this library.
### Announcements ### _September 26, 2012_ - Work on Fine Uploader 3.0 has started. Check out the [3.0 branch](https://github.com/valums/file-uploader/tree/3.0) from time to time if you are interested in the progress. Also, feel free to add ideas for 3.0 using the [issue tracker](https://github.com/valums/file-uploader/issues).
###Table of Contents### - [Summary](#summary) - [Releases/Downloads](#releasesdownloads) - [Upgrading from Fine Uploader 2.0](#upgrading-from-fine-uploader-20) - [Features](#features) - [License](#license) - [Getting started](#getting-started) - [qq.FileUploader - Setting up full upload widget](#qqfileuploader---setting-up-full-upload-widget) - [Options of both FileUploader & FileUploaderBasic](#options-of-both-fileuploader--fileuploaderbasic) - [Options of FileUploader](#options-of-fileuploader) - [Styling FileUploader](#styling-fileuploader) - [Callbacks (FileUploader & FileUploaderBasic)](#callbacks-fileuploader--fileuploaderbasic) - [Changing alert/messages to something more user friendly](#changing-alertmessages-to-something-more-user-friendly) - [Instance methods](#instance-methods) - [Internet Explorer limitations](#internet-explorer-limitations) - [Troubleshooting](#troubleshooting) - [Issue Tracker](#issue-tracker) - [Contributors](#contributors)
### Summary ###
Welcome! This project attempts to achieve a user-friendly file-uploading experience over the web. It's built as a Javascript plugin for developers looking to incorporate file-uploading into their website.
This plugin uses an XMLHttpRequest (AJAX) for uploading multiple files with a progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden-iframe-based upload in other browsers (namely IE), providing good user experience everywhere.
It does not use Flash, jQuery, or any external libraries.
Take a look at the new evolving Demo page.
Questions? Comments? Problems? Post in the forums.
Looking for the comment thread from the valums.com website? It is still available, but please use the forum instead.
### Releases/Downloads ### **You can [download released versions](https://github.com/valums/file-uploader/wiki/Releases), or, if you are more daring, use the snapshot version on the master branch.**
### Upgrading from Fine Uploader 2.0 ### You can see all bugs and features tackled in the 2.1 release [here](https://github.com/valums/file-uploader/issues?milestone=2&page=1&state=closed). If you are only interested in a summary, here are some of the more notable changes:
###### Features/Enhancements ###### * Added option to allow all valid files to upload, skipping only invalid files * Added gradually filling progress bar (for browsers that support XHR upload/file API) * The `onError` callback is now called whenever _any_ error occurs, either with the upload or file submission * An `error` JSON property in the response is used to determine the specific failure reason, `reason` property no longer supported * Ability to force all requests to use multipart encoding is now a bit more straightforward. Added a `forceMultipart` option. * Added ability to determine if dropzones are hidden or not via the `hideDropzones` options * Added ability to hide default dropzone via the `disableDefaultDropzone` option * Option to display dynamic custom error text next to each failed upload. See the `failedUploadTextDisplay` option documentation for more details.
Please see the list of issues here.
### Features ### * Multiple file select, progress-bar in FF, Chrome, Safari * Drag-and-drop file select in FF, Chrome * Uploads are cancelable * No external dependencies * Doesn't use Flash * Fully working with HTTPS * Keyboard support in FF, Chrome, Safari * Tested in IE7+ (not IE10 yet), Firefox, Safari (OS X), and Chrome. Safari for Windows is not supported, nor is IE6 or earlier. * Ability to upload files as soon as they are selected, or "queue" them for uploading at user's request later * Display specific error messages from server on upload failure (hover over failed upload item)
### License ### This plugin is open sourced under MIT license, GNU GPL 2 or later and GNU LGPL 2 or later. Please see the license.txt file for details.
### Getting started ### The `fileuploader.js` contains two classes that are meant to be used directly. If you need a complete upload widget (from demo) to quickly drop into your current design, use `qq.FileUploader`.
If you want to customize uploader, by using a different looking file list
or change the behaviour or functionality use qq.FileUploaderBasic.
The difference between them is that qq.FileUploader provides a list of files,
drag-and-drop, but qq.FileUploaderBasic only creates button and handles validation.
Basic uploader is easier extendable, and doesn't limit possible customization.
qq.FileUploader extends qq.FileUploaderBasic, so that all the options present
in the basic uploader also exist in the full widget.
### qq.FileUploader - Setting up full upload widget ### Include `fileuploader.js` and `fileuploader.css` into your page. Create container element.
<div id="file-uploader">
<noscript>
<p>Please enable JavaScript to use file uploader.</p>
<!-- or put a simple form for upload here -->
</noscript>
</div>Initialize uploader when the DOM is ready. Change the action option. For example ../server/php.php for the default folder structure. In the server folder you will find examples for different platforms. If you can't find the one you need, check the readme.txt in the same folder.
var uploader = new qq.FileUploader({
// pass the dom node (ex. $(selector)[0] for jQuery users)
element: document.getElementById('file-uploader'),
// path to server-side upload script
action: '/server/upload'
});### Options of both FileUploader & FileUploaderBasic ###
| Name | Type | Default | Note |
|---|---|---|---|
| debug | boolean | false | If enabled, this will result in log messages (such as server response) being written to the javascript console. If your browser does not support the [window.console object](https://developer.mozilla.org/en-US/docs/DOM/console.log), the value of this option is irrelevant. |
| action | string (path) | /server/upload | The is the endpoint used by both the form and ajax uploader. In the case of the form uploader, it is part of the form's action attribute value along with all parameters. In the case of the ajax uplaoder, it is makes up part of the URL of the XHR request (again, along with the parameters). |
| params | object | {} | These parameters are sent with the request to the endpoint specified in the action option. |
| customHeaders | object | {} | Additional headers sent along with the XHR POST request. Note that is option is only relevant to the ajax/XHR uploader. |
| button | element | null | Specify an element to use as the "select files" button. Note that this may NOT be a <button>, otherwise it will not work in Internet Explorer. Please see issue #33 for details. |
| multiple | boolean | true | Set to false puts the uploader into what is best described as 'single-file upload mode'. See the [demo](http://fineuploader.com) for an example. |
| maxConnections | integer | 3 | Maximum allowable concurrent uploads. |
| disableCancelForFormUploads | boolean | false | If true, the cancel link does not appear next to files when the form uploader is used. This may be desired since it may not be possible to interrupt a form-based upload in some cases. |
| autoUpload | boolean | true | Set to false if you want to be able to begin uploading selected/queued files later, by calling uploadStoredFiles(). |
| allowedExtensions | array of strings | [] | This may be helpful if you want to restrict uploaded files to specific file types. Note that this validation option is only enforced by examining the extension of uploaded file names. For a more complete verification of the file type, you should use, for example, magic byte file identification on the server side and return {"success": false} in the response if the file type is not on your whitelist. |
| acceptFiles | comma-separated strings | null | This option is used solely by the file selection dialog. If you'd like to restict valid file types that appear in the selection dialog, you can do this here by listing valid content type specifiers. See the [documentation on the accept attribute of the input element](https://developer.mozilla.org/en-US/docs/HTML/Element/Input) for more information. |
| sizeLimit | integer | 0 (no limit) | Maximum allowable size, in bytes, for a file. |
| minSizeLimit | integer | 0 (no limit) | Minimum allowable size, in bytes, for a file. |
| stopOnFirstInvalidFile | boolean | true | If true, when submitting multiple files, once a file is determined to be invalid, the upload process
will terminate. If false, all valid files will be uploaded. Note: One downside to a false value can be
seen if the default showMessage implementation is not overriden. In this case, an alert
dialog will appear for each invalid file in the batch, and the upload process will not continue until
the dialog is dismissed. If this is bothersome, simply override showMessage with a
desirable implementation. 3.0 will likely have a showMessage default implementation that
does not use the alert function. |
| inputName | string | qqfile | This usually only useful with the ajax uploader, which sends the name of the file as a parameter, using a key name equal to the value of this options. In the case of the form uploader, this is simply the value of the name attribute of the file's associated input element. |
| forceMultipart | boolean | false | While form-based uploads will always be multipart requests, this forces XHR uploads to send files using multipart requests as well. |
### Options of FileUploader ###
| Name | Type | Default | Note |
|---|---|---|---|
| element | element | null | Container for the default drop zone (if supported by browser) and files list. Required |
| listElement | element | null | Container for the file list. If null, the list defined in the template will be used. |
| uploadButtonText | string | Upload a file | Label for the file selector button |
| cancelButtonText | string | cancel | The cancel button text (which is more of a link than a button). |
| failUploadText | string | Upload failed | Text that appears next to a failed file item |
| extraDropzones | array of elements | [] | Useful if you'd like to to designate additional dropozones for file input. Of course, this is not relevant if the form uploader is used. |
| hideDropzones | boolean | true | Useful if you do not want all dropzone elements to be hidden. It is expected that some CSS would accompany setting this option to false. You may set this to false if you want to wrap some visible elements, such as the listElement, in a drop zone. |
| disableDefaultDropzone | boolean | false | Set this to true if you are contributing your own drop zone(s) and do not want to use the default one. |
| failedUploadTextDisplay | object | {mode: 'default',maxChars: 50,responseProperty: 'error',enableTooltip: true} |
This object contains various properties used to control the display of error responses from the server for each file.
The styling of the error text is controlled by the fail class. |
### Styling FileUploader ### The `template` option contains default elements with default classes that make up the uploader as a whole in the DOM. For example, the first default element in `template` is a `div` with a class of `qq-uploader`. This is the parent element of the uploader. The default drop area, button, and file list elements are also, by default, contained in this option. You can use this option to add additional elements, modify default template elements, etc.
There is also a fileTemplate option which contains default elements that make up one file item in the file list.
Finally, a classes option allows you to change the default class names for these elements. Be sure the values in classes
match the class names used in the corresponding template elements (where appropriate).
### Callbacks (FileUploader & FileUploaderBasic) ### * `onSubmit(String id, String fileName)` - called when the file is submitted to the uploader portion of the code. Note that this does not mean the file upload will begin at this point. Return `false` to prevent submission to the uploader. * `onComplete(String id, String fileName, Object responseJSON)` - called when the file upload has finished. * `onCancel(String id, String fileName)` - called when the file upload has been cancelled. * `onUpload(String id, String fileName)` - called just before the file upload begins * `onProgress(String id, String fileName, int uploadedBytes, int totalBytes)` - called during the upload, as it progresses. Only used by the XHR/ajax uploader. * `onError(String id, String fileName, String errorReason)` - called whenever an exceptional condition occurs (during an upload, file selection, etc).
### Changing alert/messages to something more user friendly ### You may want to change the default alert implementation and messages as you see fit. This is possible by overriding the `showMessage` function option, as well as the `messages` properties in FileUploaderBasic and the `extraMessages` properties in FileUploader. The default `showMessage` function simply invokes `alert` with the message text. One instance in which t his is used is when the user attempts to select an invalid file for upload. There are general message types with default text that can be overriden as well.
### Instance methods ### * `setParams(Object newParams)` - Set the parameters sent along with the request after initializing the uploader. It can be nicely used in `onSubmit` callback. * `uploadStoredFiles()` - If `!autoUpload`, this will begin uploading all queued files. * `clearStoredFiles()` - Clears the internal list of stored files. Only applicable when `autoUpload` is set to false. * `getInProgress()` - Returns the number of files that are either currently uploading or files waiting in line for upload.
### Internet Explorer Limitations ### IE continues to lag _far_ behind all other browsers in terms of features. IE10 is supposed to, finally, start to compete with existing modern browsers. For those of you with customers suffering with IE9 and older, here are some of the limitations you may want to be aware of when using Fine Uploader:
| Limitation | Why? | *Supported/Fixed in IE10? |
|---|---|---|
| Can't parse JSON response if response code is not 200 | If the response code is not 200, and the size of the response is less than 512, or, apparently, sometimes, less than 256 bytes, IE replaces the response with a "friendly" error message. If you insist on returning responses with a status code other than 200, you can work around this by instructing IE users to uncheck the "show friendly HTTP error messages" setting. | No |
| No progress indicator | Lack of blob/File API support | Yes |
| Content-Size header field value does not match the actual file size | This isn't technically an IE issue, but I'm going to call it one since we are forced to use multipart request in IE. The content-size for multipart data requests does not refer only to the file. Rather, it refers to the the total size of all sections in the request. | N/A |
| Size restriction options are not enforced | This is due to the lack of support for the File API. Without it, we have no way to determine the size of each selected file. | Yes |
| Can't drag & drop files | Lack of File API support | Yes |
| Can't select multiple files in the file selection dialog | The <input> element does not support the multiple attribute |
Early versions still lacked this support, but I've read that the final version does support this attribute |
| Only mulipart form request may be used to send files, via form submission | Lack of File API support | Yes |
| No logging | IE8 and older only: console.log is not implemented | Yes |
| Cancelling an upload has no effect | Not really an IE problem, but since we are forced to upload files via form submission, I thought I'd
include it. There may be a way to make this work, but I haven't spent time playing around with the
available options yet. In the meantime, you should probably set the disableCancelForFormUploads
option to true. If I can't find a way to properly allow cancel to work when using the form uploader, I'll
probably remove the cancel link when the form uploader is in use. |
Yes |
Can't use a <button> as the element when setting the button option. |
The button receives the click event, instead of the child <input> element that ultimately triggers the file dialog | Not sure |
| Any response content-type other than "text/plain" causes issues when trying to parse the JSON response | IE does strange things with the response when the content-type is, for example, "application/json" or "text/html". The latter is only a problem if you return HTML in your JSON response. | Not sure |
| Can't determine response code | Not really an IE problem, but since we are forced to upload files via form submission, I thought I'd include it. This is really a side-effect of using a form submission to upload files. | Yes |
| Can't trigger the file selection dialog via javascript | IE strictly forbids this. It will allow you to launch the dialog, but will throw a security exception once the form is also submitted via javascript. | Not sure |
### Troubleshooting ### If you can't get the uploader to work, please try the following steps before asking for help.
If the upload doesn't complete, saying "failed":
- Set the
debugoption of the FileUploader to true. - Open the page where you have a FileUploader.
- Open developer console in your browser.
- Try to upload the file. You should see a server response.
It should be {"success":true} for completed requests. If it's not,
then you have a problem with your server-side script.
### Issue Tracker ### Have a bug or feature request? Please [create an issue here on GitHub](https://github.com/valums/file-uploader/issues) that conforms with [necolas's guidelines](https://github.com/necolas/issue-guidelines).
### Contributors ### We would love developers to contribute any improvements and bugfixes they produce. See [How do I contribute to other's code in GitHub?](http://stackoverflow.com/questions/4384776/how-do-i-contribute-to-others-code-in-github).
Also, please see issues tagged as "pull request needed". I could use some help on those issues, in particular.
Thanks to everybody who contributed, either by sending bug reports or donating. The project wouldn't be possible without all this generous help. Thank you!
If you have found Fine Uploader useful, please consider donating to support continued maintenance and evolution of this library.