fineuploader/fine-uploader

Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features.

Fine Uploader is no longer maintained and the project has been effectively shut down. For more info, see #2073.

Documentation | Examples | Support | Blog | Changelog

---

Fine Uploader is:

• Cross-browser
• Dependency-free
• 100% JavaScript
• 100% Free Open Source Software

FineUploader is also simple to use. In the simplest case, you only need to include one JavaScript file. There are absolutely no other required external dependencies. For more information, please see the documentation.

Contributing

If you'd like to help and keep this project strong and relevant, you have several options.

Help us pay the bills

Fine Uploader is currently looking for a sponsor to pay the AWS bills (which have recently lapsed). These add up to about $40/month. Please open an issue if you are interesting in becoming a sponsor. We will happily list you as sponsor on the site and README.

File a bug report

If you see something that isn't quite right, whether it be in the code, or on the docs site, or even on FineUploader.com (which is hosted on GitHub), please file a bug report. Be sure to make sure the bug hasn't already been filed by someone else. If it has, feel free to upvote the issue and/or add your comments.

Join the team

Are you interested in working on a very popular JavaScript-based file upload library with countless users? If you're strong in JavaScript, HTML, and CSS, and have a desire to help push the FOSS movement forward, let us know! The project can always use more experts.

Help spread the word

Are you using Fine Uploader in your library or project? If so, let us know and we may add a link to your project or application and your logo to FineUploader.com. If you care to write an article about Fine Uploader, we would be open to reading and publicizing it through our site, blog, or Twitter feed.

Develop an integration library

Are you using Fine Uploader inside of a larger framework (such as React, Angular2, Ember.js, etc)? If so, perhaps you've already written a library that wraps Fine Uploader and makes it simple to use Fine Uploader in this context. Let us know and it may make sense to either link to your library, or even move it into the FineUploader GitHub organization (with your approval, of course). We'd also love to see libraries that make it simple to pair Fine Uploader with other useful libraries, such as image editors and rich text editors.

Contribute code

The best way to contribute code is to open up a pull request that addresses one of the open feature requests or bugs. In order to get started developing Fine Uploader, read this entire section to get the project up and running on your local development machine. This section describes how you can build and test Fine Uploader locally. You may use these instructions to build a copy for yourself, or to contribute changes back to the library.

Setup

You must have Node.js instaled locally (any version should be fine), and you must have Unix-like environment to work with. Linux, FreeBSD/OS X, Cygwin, and Windows 10 bash all should be acceptable environments. Please open up a new issue if you have trouble building. The build process is centered around a single Makefile, so GNU Make is required as well (though most if not all Unix-like OSes should already have this installed). Finally, you will need a git client.

To pull down the project & build dependencies:

1. Download the project repository: git clone https://github.com/FineUploader/fine-uploader.git.
2. Install all project development dependencies: npm install.

Generating build artifacts

• To build all build artifacts for all endpoint types: make build. You can speed this process up a bit by using the parallel recipes feature of Make: make build -j. If you would like to build only a specific endpoint type, see the Makefile for the appropriate recipe. The build output will be created in the _build directory.
• To build zip files for all endpoint types: make zip. To build a zip for only a specific endpoint type, see the Makefile for the appropriate recipe. The zip files will be included alongside the build output in the _build directory.
• To rev the version number: make rev-version target=NEW_VERSION, where NEW_VERSION is the semver-compatible target version identifier.

Running tests

To build, run the tests & linter: npm test (you'll need Firefox installed locally).

Commiting new code and changes

• Follow the Angular.js commit guidelines.
• Follow the Git Flow branching strategy.

fine-uploader's Issues

sending additional form fieds together with file

Would be possible to integrate file-uploader with a form so that some additional data would be sent together with file (like some additional comment or custom file name)?

Your plugin offers already the "params" option were the additional data could be attached but I would need to intercept the upload event, do some validation and then send the uploaded file together with form field inputs only if everything is OK

Could it be done maybe with onSubmit() event - I could gather validate all the data and process the upload if everything is OK?

Thanks in advance for the answer!

Return content-type must be "application/json" and not "text/html"

In /server/readme.txt said that response must be a "text/html" but content must be json.
So, response content type must be "application/json" instead of "text/html". Am I right?

FF 3.6.8 Drag&Drop infinite loop

Hi there,

got the problem that FF (3.6.8) runs into a infinite loop when using drag&drop for an upload. Firebug loops over the error message "e.dataTransfer is null - Line 417".

OS is Fedora 13 / 64 Bit

Greetz puredoze

IE8 css button

Hello,

Your upload button isn't display correct in IE8. Do you have any css fixes for that?

For example here it's not shown right: http://valums.com/files/2010/file-uploader/demo.htm in IE8

small typo bug in FileUploader options

in line 522:
this._listElement = this._options._listElement || this._find(this._element, 'list');
the correct version should be:
this._listElement = this._options.listElement || this._find(this._element, 'list');

Thanks for great component.

Best regards,
Dariusz

Setting file field 'name' & 'multiple' options don't work

I can't seem to set the 'name' of the file input field using the 'name' option.
Same for setting multiple: false -- its currently defaulting to:

{multiple: true, name: 'file'}

The older ajax-upload.js worked fine with the name param at least.

isUploading is not a function

From the website: http://valums.com/ajax-upload/

isUploading() Returns true if some files are being uploaded, false otherwise.

I want to check if there are other files that are to be uploaded.

I am sending an another ajax to update dbase. Is there a way to send request to server and update dbase with the file name?

Internet Explorer trying to download instead of upload?

I had this working in Internet Explorer 6 & 7, but I must have changed something, and now it's not working! After selecting a file to upload, I get this message from Internet Explorer: "Internet Explorer cannot download upload-attachment (the name of the action I am submitting to) from mywebsite.com. Internet Explorer was not able to open this internet site. The requested site is either unavailable or cannot be found. Please try again later."

What do I need to do in order to fix this problem?

optimal way to wait before upload

hi, thanks for that great work.
is there an optimal way to display the uploaded files but NOT upload them immediately, i.e. upload them/the queue by hitting another button for example?

thanks a lot,
Christoph

PHP will fail to return a filename when the file has utf8 characters in it.

If you are using a version that returns the actual file name submitted instead of a randomly generated filename, you will run into problems if a user submits a file with the name (for example) ÎOâÂ¥.jpeg as json_encode will return null instead of the expected \u00ceO\u00e2\u00c2\u00a5.jpeg.

One example for servlet 3.0

Here an example using servlet 3.0 to upload file with file-uploader:
/**
*
*/
package com.silyan.simplex.view.site.content;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebInitParam;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;

/**
 * Example of Servlet 3.0 used for valums-file-uploader.
 * 
 * Patch problem generated by use "multipart/form-data" request in same browsers and "application/x-www-form-urlencoded" in others.
 * By this problem, could not use @MultipartConfig features.
 * 
 * Other solution is use two servlets, one for "multipart/form-data" request and other one for "application/x-www-form-urlencoded" request, and
 * change url target in client (using javascript to detect browser).
 * 
 * @author Angel Cervera Claudio ([email protected])
 *
 */
@WebServlet(name="UploadResourceServlet", urlPatterns="/upload",
        initParams={
            @WebInitParam(description="Max size in bytes", name="maxLength", value="2097152") /*2Mb = 1024×1024×2*/,
            @WebInitParam(description="Path where will be stored files", name="targetPath", value="/tmp/")
        }
)
public class UploadResourceServlet extends HttpServlet {

    /**
     * 
     */
    private static final long serialVersionUID = -4887583429734715110L;

    /**
     * limit length. 
     */
    private Long maxLength;

    /**
     * Path where will be stored files
     */
    private String targetPath;

    /* (non-Javadoc)
     * @see javax.servlet.GenericServlet#init(javax.servlet.ServletConfig)
     */
    @Override
    public void init(ServletConfig servletConfig) throws ServletException {
        super.init(servletConfig);
        maxLength = new Long( getInitParameter("maxLength") );
        targetPath = getInitParameter("targetPath");
        if(targetPath.lastIndexOf(File.separatorChar) != 0) {
            targetPath = targetPath + File.separatorChar;
        }
    }

    /* (non-Javadoc)
     * @see javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String length = request.getHeader("content-length");
        if( length == null || Long.valueOf(length) > maxLength) {
            PrintWriter pw = response.getWriter();
            pw.write("{\"error\":\"Max length (" + maxLength+ "bytes) exceed or it's null\"}");
            return;
        }

        if( isMultipartContent(request) ) {
            Part part = request.getPart("qqfile");
            String fileName = getFileNameFromPart(part);
            writeUploadedResource(fileName, part.getInputStream());
        } else {
            writeUploadedResource(request.getParameter("qqfile"), request.getInputStream());
        }
    }

    /**
     * Write in target directory.
     * 
     * @param fileName
     * @param is
     * @throws FileNotFoundException
     * @throws IOException
     */
    private void writeUploadedResource(String fileName, InputStream is) throws FileNotFoundException, IOException {
        OutputStream os = new FileOutputStream(targetPath + fileName );

    byte[] buffer = new byte[4096];
    long count = 0;
    int n = 0;
    while (-1 != (n = is.read(buffer))) {
        os.write(buffer, 0, n);
        count += n;
    }

        os.flush();
        os.close();
        is.close();
    }

    /**
     * Utility method that determines whether the request contains multipart
     * content.
     * 
     * Extract from commons-fileupload source.
     *
     * @param request The servlet request to be evaluated. Must be non-null.
     *
     * @return <code>true</code> if the request is multipart;
     *         <code>false</code> otherwise.
     */
    public static final boolean isMultipartContent( HttpServletRequest request) {
    if (!"post".equals(request.getMethod().toLowerCase())) {
        return false;
    }
    String contentType = request.getContentType();
    if (contentType == null) {
        return false;
    }
    if (contentType.toLowerCase().startsWith("multipart/")) {
        return true;
    }
    return false;
    }

    /**
     * Return filename from part.
     * 
     * @param part
     * @return
     */
    public static final String getFileNameFromPart(Part part) {
    for (String cd : part.getHeader("content-disposition").split(";")) {
        if (cd.trim().startsWith("filename")) {
            return cd.substring(cd.indexOf('=') + 1).trim().replace("\"", "");
        }
    }
    return null;

    }

}

Add check for empty param option.

At the moment undefined=undefined is appended to request query, also you need to handle action urls with ? in it.

Think about easier internalization of messages, etc..

If you can update your plugin with such a ...-en.js file we would give
you our translations into French and German as a ...-fr.js and
a ...-de.js file!

Request: Simple reload list of file

After uploading I'am saving file information into session.
if ($this->file->save($uploadDirectory . $filename . '.' . $ext)){
$_SESSION['files'][$pathinfo['filename'].$ext]=$uploadDirectory . $filename . '.' . $ext;
return array('success'=>true);
}

But there is a problem after refresh of the upload site - list of files disappear even when I put the list of files into tags

how to simply reload list of uploaded files after site refresh ?

Multiple drop zones stay after drop

Hey!

Awesome piece of code you have here! I'm working on integrating it into a web app I am working on and found an issue. If there are multiple instances of your up loader on one page and the user drag and drops a file into one of them, the other "Drop files here to upload" Div's remain.

I assume this has to do with the onLeaveNotDescendants: event not getting called when the file is dropped into another up loader, however I am not versed in Javascript enough to figure out how to fix this.

Thanks!

Firefox 3.5 and lower

When I try to upload using Firefox 3.5 and lower it always says "No Files Uploaded" as if it's not even getting the input from the file browser. How can I alleviate this?

Question: When have several places on page with file-uploader, have a strange behaviour.

When have several places on page with file-uploader
When i drag one file in any place block .qq-upload-drop-area is appear, become visible. And when i finish drag, in other places block .qq-upload-drop-area is not disappear!

Can any one help me?

IE6

I've tested it as working in IE6 - not using your CSS though.

Cheers

Ben

File-uploader does not work with html "button"

Hello,

I'd like to use a standard html button. So I set up file-uploader this way :

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',

    // UI customizations
    template: '<div class="qq-uploader">' + 
        '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
        '<button type="button" class="qq-upload-button">Add files</button>' +
        '<ul class="qq-upload-list right"></ul>' +
        '</div>',
});

But now, when I click the button, nothing happens.

Thx

Selecting more than 15 files doesn't work in Chrome

Not sure if this is an limitation in Chrome, or and issue with file-uploader. There is no error message or anything, it simply wont start uploading if you select more than 15 files. Just wanted to let you know.

Tested in Chrome 6.0.472.63 on Windows 7

Thanks.

server php - delete the files that haven't been fully uploaded yet

May i sugest a little modification to the PHP upload class example :

• delete the files that haven't been fully uploaded yet
  (browser failure, file cancelled by user, etc)

class UploadFileXhr {
function save($path){

• $s = 0;
  $input = fopen("php://input", "r");
  $fp = fopen($path, "w");
  while ($data = fread($input, 1024)){
  fwrite($fp,$data);
• if (isset($data[1023])) $s += 1024;
• else $s += strlen($data);
  }
  fclose($fp);
  fclose($input);
• if ($s != $this->getSize()) unlink($path);
  }
  (...)
  }

it doesn't calculate the strlen of data every loop, only for the last piece that is most probably smaller than the buffer

it could also return false, so you can handle this correctly in your scripts if there are many other things to do on the uploaded file (resizing or other stuff)..

Not clear how to select list item to modify at onComplete()

I'm trying to modify the list item when onComplete() is called. Maybe this is easy to do, but I can't figure it out. Please provide an example in the documentation!

onComplete: function(id, filename, responseJSON) {
    if (responseJSON.success) {
        //modify the list item to add a "delete" link.
        //modify the list item to add a hidden element containing the file identifier
        var fileIdentifier = responseJSON.identifier;
        addHiddenElementForFile(fileIdentifier, filename);
    }
}

Node.js

hello,

would you please help me to make it work with Node.JS
"formidable" says:
bad content-type header, unknown content-type: application/octet-stream

thanks in advance

How to remove list entry onComplete?

This is not exactly an issue but forum or other kind of developer communication channel is not available, so...

Does anybody know how how to remove individual element from the list of uploaded files after the upload has been successful in a onComplete event?

uploader.setParams(); have a bug.

Thank you so much for a useful plugin.
I found a bug in it.
The bug is that the method 'setParams' of uploader is sometimes not working.
I have fixed the bug by the following code.

around line:881
//=======================================
upload: function(id, params){
var len = this._queue.push(id);
// too many active uploads, wait...
if (len > this._options.maxConnections) return;

    // I added a following line
    this.params = params;

    this._upload(id, params);
},

//=======================================
and around line:1156
//=======================================
_upload: function(id, params){
// I added a following line
if(!params && this.params){
params = this.params;
}

//=======================================

Sincerely yours.

Returned filename for same name

When uploading the same file it doesn't overwrite by default and suffix a random number to the filename. But the onComplete function doesn't return the correct (new) filename.

New option to limit number of uploaded file.

Hello,

In my application, users are limited to a maximum of 3 uploaded files. How can we do that withfile-uploader?

Regards.

onCancel callback would be nice!

When I start uploading a file, in my implementation I hide the "Add" button. Then if the "cancel" upload is pressed I needed to show "Add" button again.

I needed some simple callback for it. Thus I added this into your library.
It is quite simple
in line 33: onCancel: function(){},
and then I call this callback in _bindCancelEvent function as
self._options.onCancel();

If you want to add this, I can send a patch!

Drag and drop doesn't work on chrome

I'm testing with Chrome 6.0.472.51. The dragstart event for the document is not triggered for some reason...

.net server example

http://gist.github.com/576593 by Mark Fox

Request: Version number in docblock

Hey, great script! Just wondering if you can add version number to the docblock in top of your code, so it's easier to identify what version is uploaded to a server. Now I have to guess and upload the newest file just to be sure I got the newest.

Not multipart/form-data in FireFox 3.6.10

I tried demo example with following changes
<script type="text/javascript">
function createUploader(){
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader-demo1'),
action: '/cgi-bin/pmm.dll/TestUpload',
allowedExtensions: ['jpg', 'jpeg'],
sizeLimit: 4000000
});
}
<\script>

It uploads in I.E. as multipart/form-data but not in Firefox. I have not tried other browsers.

In Firefox, the Request.Content field contains the JPeg file.

Safari bug with Rails server

When file is uploaded in Safari, rails server sometimes doesn't save changes because it tries to convert file content in POST into parameters variable.

I solved this by specifying the content-type as "application/octet-stream" in fileuploader.js
as described here: http://github.com/vohtaski/fileuploader_and_rails#readme

I can't understand if it is the problem of Safari or of Rails. In FF it works like a charm.

Thanks a lot for what you are doing. The library is very cool!

allow "deeper-nested" params

To integrate file-uploader into my app i need to handle "deeper-nested" params. For example something like params:{param1:[{key1:'x',key2:'y'},{key1:'a',key2:'b'}]}.

Normaly I handle this with $.param(), but since jQuery is not shipped with file-uploader i have written a small function obj2url() which takes an Object and creates a query-string.

Here is the commit: http://github.com/guybrush/file-uploader/commit/b5dcedceca53ac41d7f1e6c6494dc563176d2235

Im happy for any comments/suggestions.

self._filesInProgres corrupted

self._filesInProgress--;

should be added in the
_bindCancelEvent: function() ...

Limit simultaneous uploads?

Hi there, first of all, really good script, congratulations.

Is there any way to limit user from loading too much files at the time? or even better a way to handle lot of files uploading by limiting it to let says 5 uploads simultaneous? This would be really useful as right now for an ajax web app, if the user is uploading too many files no more GET can be send to the server and the application is on stand still until new GET are allowed by the browser... I belive this would improve the user experience by miles.

Any thoughts?

Yves

Params are not sent with files that are being queued (related to maxConnections)

I’m testing your file-uploader at the moment. I think newest version.
It’s workin fine, but I have one problem. May be you can help me.

I’m uploading multiple files and I’m trying to send additional params with every file.
The problem is: Only in the first 3 requests the params are attached. For all others the params are null.

POST http://localhost/upload/server/php.php?dir=hans&qqfile=AIMG_0984.jpg
POST http://localhost/upload/server/php.php?dir=hans&qqfile=AIMG_0991.jpg
POST http://localhost/upload/server/php.php?dir=hans&qqfile=AIMG_1001.jpg
POST http://localhost/upload/server/php.php?qqfile=AIMG_1003.jpg
POST http://localhost/upload/server/php.php?qqfile=AIMG_1036.jpg
POST http://localhost/upload/server/php.php?qqfile=AIMG_1037.jpg
POST http://localhost/upload/server/php.php?qqfile=AIMG_1043.jpg
POST http://localhost/upload/server/php.php?qqfile=AIMG_1045.jpg
POST http://localhost/upload/server/php.php?qqfile=AIMG_1046.jpg

    function createUploader(){  
        uploader = new qq.FileUploader({
            element: document.getElementById('file-uploader-demo1'),
            action: '../server/php.php',
            params: {dir:'hans'}
        });          
    }

Any Rails Server Example ??

Thanks@!

OnSubmit return false don't work

Has a possible error in onsubmit function, when put return false should stop the upload process.
There is how implement this.

Does not work in IE8

This was not tested in IE8.

The request looks like: "http://.../Handler.ashx?"
with POST data as qqfile=filename="messages.png" Content-Type: image/x-png

In Firefox, it looks like: "http://.../Handler.ashx?qqfile=messages.png"
with POST data as the actual data stream.

File-Uploader doesn't seem to work with <input> as element

Hello,
may it be file-uploader doesn't work if the element that it is supposed to "listen" to is an input element?

For example, I have "

and file-uploader won't show any file selection window when I try to use this as element to connect f-u to.

Browser: Safari 5 on Mac OS.

Thanks for your help

Data send as query string

It would be nice to have a post params instead of querystring :) because codeigniter will not allow my site to use this.

button hover/focus classes are hard coded

Near line 487 these classes are hard coded:

hoverClass: 'qq-upload-button-hover',
focusClass: 'qq-upload-button-focus'

I should be able to specify these classes in the classes option:
classes: {
// used to get elements from templates
button: 'my-file-uploader-button',
buttonHoverClass: 'my-uploader-button-hover',
buttonFocusClass: 'my-uploader-button-focus'

Better comments for server-side code

Add some comments to your server file so people can understand why you are sometimes using php://input and sometimes using the $_FILES array.

Test in with jQuery UI dialog - possible zIndex issues

Add a check for upload_max_filesize or post_max_size in php.php

Show an error if they are lower that the option set in the uploader.

Webkit browser issue

Hi,

I'm using valum's file uploader with a WebKit browser (I'm incorporating the uploader into a jqtouch application to run on the iPhone and Android, hence the WebKit browser).

Every time I try to upload a file, I keep getting a javascript alert error "File is empty".

It works perfectly fine on Firefox.

The permissions are fine and I'm well within the PHP time limits and PHP file size limit.

I've probed the php file and the line ~123:

$size = $this->file->getSize();

does indeed return a file size of zero? ;(

I'm wondering is it something to do with the octet-stream?

Or something to do with XMLHttpRequest in Webkit?

I'm testing the uploader on Gnome Webkit Browser (2.30.2). I also use an Android simulator (2.2) which also gives the upload errors.

I'm guessing there might be an issue with some of this code (fileuploader.js):

// build query string
params = params || {};
params['qqfile'] = name;
var queryString = qq.obj2url(params, this._options.action);

    xhr.open("POST", queryString, true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader("X-File-Name", encodeURIComponent(name));
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.send(file);

??

Any comments much appreciated.

Many thanks in advance,

Update: it works in Chrome 6.0.472.62 (59676), Ubuntu 10.04.

It would be really nice to get to the bottom of all this... i.e. it would be nice to know what browser deficiency in Gnome Web Browser is causing the errors...

file uploader no callbakc in chrome 6

when I upload a file(post) in chrome 6.
1.the file upload success
2.no callback

no problem ie6/firefox 3.6.8

Does not support Firefox 3.5

Firefox 3.5 does not support using XHR.Send on DOM File objects (this was introduced in FF 3.6).

You can fix this by changing the xhr.send(file); line to xhr.sendAsBinary(file.getAsBinary());

I'm not sure if there's any way to use proper feature detection to let newer browsers use the cleaner API.

firefox 4 beta doesn't complete upload

I haven't had time to trouble shoot this, but i have this working in all the other browsers. When I use ff 4 beta, it starts the upload gets to like 80 something percent and stops. gets to the same place every time (percentage) doesn't matter file size.