I notice a strange behaviour in isSameDomain, I check in my php app if $_SERVER[HTTP_X_REQUESTED_WITH'] is correctly set to 'XMLHttpRequest', but in source code, at line 148 of jquery.fileupload.js I see:
url.length === pathIndex || $.inArray(url.charAt(pathIndex), [ '/', '?', '#']))) {
but if "url.charAt(pathIndex)" is equal to "/", the return value of $.inArray is 0, as specified in jquery website [1].

It should be something like:
($.inArray(url.charAt(pathIndex), [ '/', '?', '#'] >= 0 )

in order to catch the first element of array and return "true".. or am I wrong? :)

1: http://api.jquery.com/jQuery.inArray/

Hi,
I have implemented the File Upload and noticed that in IE 8, I see that the progress bar on the bottom of IE (status bar) is increasing indefinitely, even after uploading is completed. This happens in my code as well as your Demo site.
What would be the cause? Do you have a solution?
Thanks for your help!
-Won

I know that may be a stupid question but I can't find it at all. I have the script implemented on a domain but when i upload files I can't find them. Adding on to it, where could I change the path they are being stored to as well?

Thanks

Very good script ! Big Thanks.
Problem no have function:
onSubmit,
onComplete.
Maybe you help how to add this functions ?

I can't get the demo on http://aquantum-demo.appspot.com/file-upload working in IE 8. Chrome and Firefox on Mac are ok.

Windows 7, IE 8, Swedish

I click the "Upload Files" button, select a png-file and click "Open". After some uploading (probably when returning response), I get a script error saying:

Line: 19
Error: Expected identifier

in the application.min.js file

I find that beforeSend is not being called only once per file added. Rather, it is being called N times per file, where N is the number of top level html elements returned in buildUploadRow.

The example html returned by buildUploadRow is a table row, and thus is all contained within a single "tr" tag. I found that when I moved from table structure to just div's, my beforeSend function would be called once for each outer element in the html returned in buildUploadRow. So I had three top level elements: 1 for the file name, 1 for the progress bar, and 1 for the cancel button. The beforeSend was then called three times. Whereas before, with just the tr element being the only top level element, beforeSend was only called once (per file). When I then wrapped my three div's with a single div, then beforeSend would be called once per file.

I would expect beforeSend to be invoked once per file, regardless of the format of the content returned by buildUploadRow.

Also, it is an error if buildUploadRow returns the html as a string rather than via jQuery.

what could be wrong when clicking the upload button does not work, but drag&drop works just fine?

My basic setup is as follows:
$('.upload').fileUploadUI({
url: 'upload.php',
method: 'POST',
uploadTable: $('.upload_files'),
downloadTable: $('.download_files'),
buildUploadRow: function (files, index) {
var file = files[index];
return $(
'' +
'' + file.name + '</td>' +
'

We need to be able to invoke some custom code after the file upload process has completed and the buildDownloadRow or the error code has completed.

This is because we need to reposition some UI elements after the file upload plugin is done with any DOM modifications.

I don't see any out-of-the-box support for this.

This plugin is fantastic. We are very impressed after working on our own HTML 5 version for a few days before finding yours. We have a java backend where we resize the images. Where did you go to school?

Can you help me get the progress bar to work as it does in the demo? I have the pbar-ani.gif image and have looked at the options documentation but am stuck. Can you post the method used in the demo with a few notes?

Thanks.

We have a server side file upload check that detects the size of the file and forwards the user to a "file too big" error page.

When we use this with this plugin, I see that the plugin doesn't invoke the buildDownloadRow call. I'm guessing that is because the html response was not valid JSON. It appears that the solution is to change the server side code to return valid JSON with the appropriate error message when it detects the error.

It would be nice if instead the plugin provide an error handler that we can hook into and that has full access to the response HTML. That way we can decide what to do with the error on the client side. And we wouldn't have to have the server respond with errors in JSON format.

I just downloaded and everything works fine except it doesn't show like what is in your demo, for example after upload an image it shows the pic and we actually able to delete it via the delete icon. How can I do so?

Hi Blueimp,
I solved my problem with your progressive upload code.
I notice that this code don't work with single file, so I change your core removing "else" statement and now works with single and multiple file.
here my code

uploadSequence.push(callBack);
if (index === 0) {
uploadSequence.splice(0, uploadSequence.length - 1);
}
if (index + 1 === files.length) {
uploadSequence.start(0);
}

Now I'm trying to limit file upload by size and extension but, as I wrote, I'm new in jQuery and I have some problem understanding code implementation.

I try to add a limit for size like this

if (files[index].size > 1000000) {
handler.uploadRow.find('.file_upload_progress').html('FILE TOO BIG!');
setTimeout(function () {
handler.removeNode(handler.uploadRow);
}, 5000);
}
uploadSequence.push(callBack);
if (index === 0) {
uploadSequence.splice(0, uploadSequence.length - 1);
}
if (index + 1 === files.length) {
uploadSequence.start(0);
}

this only works if the file is the last or second last on the file list.
for example: 4 file, the biggest is n. 2; file 1 OK file 2 REMOVED, file 3 OK, file 4 NON LOAD
This also happens checking file extension.

Can you post an example to solve my problem?
Thanks

Hi,
I find your plug-in extremely interesting.
I wanted to ask if there is a configuration to force the plug-in Download
file sequentially and not randomly as is the case.
I usually work with RAD Upload that sends an array of files to the php script so it is easy to serialize the file list.

Great plugin. Maybe I'm missing it, but is there an event for when all uploads have completed? onComplete fires after each upload.

Hi Blueimp,

I'd just like to point out a minor issue I noted as I'm trying to implement this plugin. If you apply fileUpload to a form within a jQuery UI dialog element that is has the modal option enabled, the upload file button is not clickable. The obvious workaround is to not use a modal dialogue, but it would be ideal in some circumstances to be able to use that dialog feature in combination with this plugin. Below is a sample that should reproduce the problem with the latest jQuery/jQuery UI libraries. It seems that this is due to the presence of 'z-index: 2' for the '.file_upload input' class in the css file. Is that necessary (e.g., for browser compatibility)? I took it out, and it seems fine so far as I can tell.

Regards

var d = $('<div><form class="upload" action="upload.php" method="POST" enctype="multipart/form-data"><input type="file" name="file" multiple><button>Upload</button><div>Upload files</div></form><table class="upload_files"></table><table class="download_files"></table> </div>');
d.dialog({title:"Test File Upload",modal:true,
            buttons:{
                "Close":function()
                {
                    t.dialog.dialog("close");
                }
            }
        });

    $('.upload').fileUploadUI({
        uploadTable: $('.upload_files'),
        downloadTable: $('.download_files'),
        buildUploadRow: function (files, index) {
            var file = files[index];
            return $(
                '<tr>' +
                '<td>' + file.name + '<\/td>' +
                '<td class="file_upload_progress"><div><\/div><\/td>' +
                '<td class="file_upload_cancel">' +
                '<div class="ui-state-default ui-corner-all ui-state-hover" title="Cancel">' +
                '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
                '<\/div>' +
                '<\/td>' +
                '<\/tr>'
            );
        },
        buildDownloadRow: function (file) {
            return $(
                '<tr><td>' + file.name + '<\/td><\/tr>'
            );
        }
    });

Great script. However, point me in the right direction to work around "[IE] will only register a load event if the Content-type of the response is set to text/plain or text/html, not if it is set to application/json."

I'm using a C# generic handler server-side for the ajax call, but never get there. Content-type of the container page is text/html. Where do I set the content type so that IE registers the load event?

Sorry if this is a bone-head question, rather new at this.

Tested on Mozilla/5.0 (Windows; U; Windows NT 6.1; es-ES; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13

When I drag files over "drag and drop zone" it grows, but if I don´t drop the files the size of the "drag and drop zone" stills big.

This is related to issue 13. Thanks for the quick turnaround. I tried implementing it, but the onComplete is being invoked before the progress bar is removed.

It seems file size is not calculated correctly. I tried one 1MB file (1024x1024 Bytes). And it reports the file as 1.05 MB

In testing Safari, the "legacy" functions handle the uploads via iframes. The load handlers were not being fired, and what I could find was that the response is expected to have Content-Type 'text/plain' rather than the JSON header value 'application/json', which is what I was using.

Once I changed my server response to be text/plain rather than application/json the load handlers started firing correctly.

jQuery plugins often implement a way to provide defaults for a plugin, and i think that would be a good addition too.

For example, I always want to do the same when a JSON parsing error happens, and i don't want to write the function all the time.

Is there already a way to do this?

missing ) in parenthetical
[Break on this error] settings.streaming ||В... undef || typeof FileReader !== undef\n
jquery...load.js (строка 41)
$(this).fileUpload is not a function
[Break on this error] $(this).fileUpload(new UploadHandler($(this), options));
jquery...d-ui.js (строка 170)
$(this).fileUpload is not a function
[Break on this error] $(this).fileUpload(new UploadHandler($(this), options));

In demo work fine, but in download archive have error.

I have my server upload handler set up to return errors. Is there a specific JSON format that the library will parse in order to display errors sent out by my controller?

Hello, I´m testing on Safari 5.0.3 and drag a drop does not work

If this is the intended behavior I think that makes those methods pretty useless. In my use case I need to prepare data about ALL the files before uploading the files, and I therefore need to know when the user is ready to upload...

If you agree I will try to make a patch...

On line 394, in the onInputClick() method, there is this line :

 e.target.form.reset();

I was wondering, is this really necessary? I use the file upload inside another, quite big, form. So basically, each time i clicked the file upload button, all my form got wiped. I'm using a combination of jquery-validate, jquery-ajaxForm and jquery-fileUpload... took me quite a while to find the guilty one!

I assume there is a purpose for this, but i can't see to find it. I commented it out in my version. Just wanted to know if i was breaking something by doing this hehe

Thanks again. I've successfully included your plugin in my form and it works like a charm!

I'd like to be able to upload files to another domain. Upload does not start if I set form action to "http://some.other.domain/upload.php".

It seems that I simply don't get how it should work and being new to all of this doesn't help. What I think:

The form's action should point to the upload handler, the one responsible for putting it into the db.

The url for the beforeSend should map to a generate-url handler, which uses create_upload_url with the url to the upload handler.

I must be missing something, please help!

Hi, I´m trying to implement your plugIn but I can´t make progressbar work properly with multiple files, I use the following code:

buildUploadRow: function (files, index) {
var file = files[index];
return $(
'' +
'' + file.name + ' - '+ Math.round(file.size/1024) +'kb - </td>' +
'

If the user select 20 files, they all appear to be hitting the server at the same time. Is there a setting to upload 1 file at a time before continuing to the next file?

This somehow causes the plugin to submit the file to the server twice:
buildUploadRow: function (files, index) {
var file = files[index];
return $('

The problem seems to exist with Opera 11.

Opera supports multiple files selection from last version using standard syntax (not "min" and "max" options as before). But there are not implemented XHR2 and FileAPI as well yet.

So I suppose plugin should process multiple upload as scope of iframe uploads. If it's not possible, then multiple option for Opera should be just disabled with plugin initialization.

[Resolved] I wasn't using jquery ui progressbar

In my php script I want to restrict Image size to 100x100 pixels. I have implemented the code as:

$error=0;
$error_mesg="";

$filesize= getimagesize($HTTP_POST_FILES['pic']['tmp_name']);

if ($filesize[0]!= 100){
$error_mesg = "Width must be 100px";
$error=1;
exit;
}elseif ($filesize[1]!=100){
$error_mesg = "HEIGHT must be 100px" ;
$error=1;
exit;
}

if ($error==0 ){// No error then copy

copy($HTTP_POST_FILES['pic']['tmp_name'],$directorio.$filename

echo '{"name":"'.$pic_name.'","type":"'.$filetype.'","size":"'.$filesize[0].'"}';

}else{

echo $error_mesg;

}

But my question is how can show the error message and abort the upload?

Thanks

Hi,

When I use the Demo, I am not able to select multiple files using Ctrl or Shift key, is this a bug or has the Demo been locked down to single file selection.

Thanks

I like it, simple and fast.

Thing I don't like, is integration with jquery UI, that's difficult to customize from my point of view, should've use your own CSS and interface JS, from there users will have an easier time to find their way around. Because not everyone's familiar with the Jquery UI.

Documentation is badly needed :), please add soon. And rooms for callback functions :).

If you need a php server please let me know I can help with that, for a period of time.

Every things works nice but there is one problem.

In Internet Explorer when I add extra input field to the upload form, value from this element is not sending.
In Firefox Opera and Chrome I can recive POST but Internet Explorer have some problems.

Tested on Internet Explorer 7.0.6001.18000

Not really an issue

But I've been trying to get this to work with direct upload to S3

My understanding was that XMLHttpRequests was the main requirement for that

Do you know if this plugin is compatible?

Hi, is it possible to launch upload when user presses an upload button instead of starting upload automatically ?

Thank you for your help

This is more a feature request than an issue. I'd like to be able to limit what files are allowed or disallowed to be uploaded. So either an exclusion filter or inclusion filter parameter would be a useful feature.

This client side check would provide a simple way to limit the uploaded file types. But we will still do server side checks which is outside the scope of this plugin.

According to the example here:
https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data

<form class="upload" action="upload.php" method="POST" enctype="multipart/form-data">
<input type="text" name="example_text">
<input type="checkbox" name="example_option">
<div id="file_upload_container">
<input type="file" name="file" multiple>
<button>Upload</button>
<div>Upload files</div>
</div>
</form>

even I specify dropzone like this: dropZone: $('#file_upload_container')

the whole form still got 'upload_file' class added to it.

I suspect that it might be the problem of these lines:

container
.data(settings.namespace, fileUpload)
.addClass(settings.cssClass);

Seem the lib add class again to the container which it fact just dropzone is enough.
Am I right?
Please confirm.
Thanks

PS. I use version 3.4 and a new user to git sorry for the messy post

I hooked up jQuery templates and am getting weird behavior for adding table rows. It's adding a display:block on the <tr> in firefox 3.6.13. It doesn't in chrome.

Here's the function:

buildDownloadRow: function (file) {
    return $("#documentTemplate").tmpl(file);
}

The Template:

<script id="documentTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>${name}</td>
        <td>${size}</td>
    </tr>
</script>

Results in this in FF:

<tr style="display: block;">
    <td>name</td>
    <td>2508</td>
 </tr>

Anybody seeing this? With the raw markup as done in the example, the display:block isn't added, so must be something in jQuery templates. But, I thought I'd start here anyway before posting in the templates project issue tracker.

Nice work.

I'm trying to create a plugin in Symfony for upload files using your script.

But i have some problems including the script to an existing form .

The first example won't work because it contains anidated forms.

<form name="myForm" action="process.php">
  Email: <input type="text" name="email">
  OtherField: <input type="text" name="otherfield">
  ..
  Upload File:
   <form class="upload" action="upload" method="POST" enctype="multipart/form-data">
     <input type="file" name="file" multiple>
        <button style="display: none">Upload</button>
        <div>Upload files</div>
    </form>
    <table class="upload_files"></table>
    <table class="download_files"></table>
    </div>
   </form>

   <input type="submit" name="submit" />
</form>

The next one doesn't work alhought i don't know exactly why.

<form class="upload" action="upload" method="POST" enctype="multipart/form-data">
        Email: <input type="text" name="email">
        OtherField: <input type="text" name="otherfield">

        <input type="file" name="file" multiple>
        <button style="display: none">Upload</button>
        <div>Upload files</div>
        <table class="upload_files"></table>
        <table class="download_files"></table>

        <input type="submit" name="submit" />
</form>

Is there some way to do this?

Thanks.

In the example given:

$('.upload').fileUploadUI({
namespace: 'file_upload_1',
url: '/path/to/upload/handler.json'
/* ... */
});

.upload is the form element. Does the fileUploadUI have to be associated with a form? We have a form with several fields and a field to upload a file. Associating the fileUploadUI with the form causes all the fields to be submitted (each as a multiplart) every time we upload a file and also messes with the form styling because the plugin adds file_upload css class to the form.

I tried to associate the plugin with just a div but the plugin doesn't appear to work when you do that.

I'm looking at this and I'm wondering what the difference is between doing it programmatically and simply adding the fields in with html. I want it so that my uploads don't start until I press a button, so that I can have the time to choose a category for each upload. So for each file, there should be a drop down selector to let me choose the category for the file.

I can figure this out myself, my confusion lies in which approach to take. If I take what I believe to be the clearer and simpler approach of simply adding in the html fields, these fields aren't replicated for each file, are they? So instead they would be fields pertaining to a batch/collection of uploads, not for individual uploads.

So if I want fields/options for individual uploads, I have to take the programmatic approach?

If not, that'd be a great option.

FF4 (on mac) nightly and latest beta seem to have problems with the 'Upload files' button.

Parts of the button get the css pointer (hand), but other parts of the button get the crosshairs. Also, seems like parts of the button are not registering the click.

Specifically, an area of the size of the left 2/3rds and the top 2/3rds of the button are showing the crosshairs. These areas are registering the click. The bottom 1/3rd to the right is showing the pointer/hand, but portions of that area are not registering the click.

Everything is working fine in Safari and Chrome.

Anyone else seeing this?

Hi,
i'm trying to add other fields like this:

and i have only the upload button, the other fields are hidden...

We have a use case where the user is required to upload files in 4 different sections on the same page. So when I have more than one instance of this upload widget, I get the following javascript error:

Error: uncaught exception: FileUpload with namespace "file_upload" already assigned to this element

Does the plugin support multiple instances on the same page or is there a way to tweak it to support this?