rexmagi / jquery-html5-upload Goto Github PK

Hi (again ;-),

I use your plugin with php (5.2.6) and It complains about missing 
"boundary".
After some search, I managed getting it working.
Here is the code I changed (this site helped: 
http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload)

Thanks again for your work !

So juste replace:
        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.send(file);

with:

        var boundary = '------multipartformboundary' + (new 
Date).getTime();
        var dashdash = '--';
        var crlf     = '\r\n';

        /* Build RFC2388 string. */
        var builder = '';

        builder += dashdash;
        builder += boundary;
        builder += crlf;

        builder += 'Content-Disposition: form-data; name="user_file[]"';
        builder += '; filename="' + file.fileName + '"';
        builder += crlf;

        builder += 'Content-Type: application/octet-stream';
        builder += crlf;
        builder += crlf;

        /* Append binary data. */
        builder += file.getAsBinary();
        builder += crlf;

        /* Write boundary. */
        builder += dashdash;
        builder += boundary;
        builder += crlf;

        builder += dashdash;
        builder += boundary;
        builder += dashdash;
        builder += crlf;

        xhr.setRequestHeader('content-type', 'multipart/form-data; 
boundary=' + boundary);
        xhr.sendAsBinary(builder);

1. How would I call this.  The onStart function could just return false?
Thanks

I've changed the fieldName to default to $(this).attr('name'). I think in most 
cases that's exactly what people would supply.

If you'd dropped that in, I think we would eliminate an extra param to be 
passsed (in most cases, again).

If the boundary is not on, it will not make a difference anyway.

Thoughts, anyone?

I noticed that the ajax request to do file upload is formatted differently. 
It would be interesting to be formatted so that the server side languages 
recognize or show examples of how to handle this request on the server in any 
server side language.

It will be cool to be able to upload files using drag and drop from file 
manager. But is it possible without any additional plugins?..

What steps will reproduce the problem?
1. host html & script in a S3 bucket with global write
2. pick file(s) & proceed to upload

What is the expected output? What do you see instead?
Observed: Error XML return
Desired: the file(s) would upload to the bucket.

Changes required:
xhr.open: need option for method (put rather than post) and pass the number 
variable to options.url (I don't you HAVE to have the full url here, you could 
probably use the bucket name alone, but it looks better when auditing code to 
have the full path available)
xhr.setRequestHeader: need to be able to pass the path/filename as "key". I'm 
using: xhr.setRequestHeader("key", options.url(number));
Content-Disposition: form-data; name="file"  <-- S3 demands the file be 
uploaded with this name

I could submit a patch that moves the setRequestHeader set and the method into 
options, or put an S3 flag into options and modify the behavior that way.

Please let me know if you'd like me to submit,
Paul

Hi,
Great plugin !!

It would be useful to be able include external parameters.
By example, near the upload zone, I have a tree/browser that represents 
server directories. I would like to use that tree to inform the server 
where to upload files.

How can we do that ?
I tryed changer the "url" parameter in the onStart() function, but I think 
I use a bad way...

Thanks !

jm

What steps will reproduce the problem?
1.
2.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.

Steps:
1. Use latest Safari version
2. Try to upload a file (with modified JS version) > 1 MB (for instance)

It should works like the original script, but it fails:
a) Sometimes doesn't even reaches the 100%
b) Sometimes when reaches 100%, it comes back to 58% (or other quantity)
c) Unfrequently it uploads successfully. It happens with small files and also 
big files, but randomly (?).

I'm using Safari 5.0.2 (6533.18.5) over Mac OS X 10.6.

I'm pretty sure is my fault but I'm unable to find a solution. I modified the 
JS to get:
a) Better CSS appareance
b) Avoid CSRF
c) Change messages or not showing them

I'm attaching the modified JS together with the embedded JS at the page.

Thank you very much for this script and the help!

Big files uploading will take a lot of time. Currently, if you are uploading 
1GB file and will have disconnect at last 10KB - you'll have to re-upload it 
entirely. This is not cool.
It will be good, if big files will split to small chunks, and if upload will 
fail, it will restart from last good chunk.
May be, it can be done using HTML5 file API.

How do i get server response?

What steps will reproduce the problem?
1. Try to upload file with name 
"клиенты_по_гарантии_ок.xlsx" in Firefox
2. You'll get a javascript error in line 169 of html5_upload.js saying that 
'String contains an invalid character" code: "5'
3. If you rename file to "klienty_po_garantii_ok.xlsx" it uploads successfully.

What version of the product are you using? On what operating system?
Windows XP SP3, Firefox 3.6.10

What steps will reproduce the problem?
1. Define onStartOne function that will create one progressbar for each file 
(instead of sharing one progressbar)
2. Add few files to upload


What is the expected output? What do you see instead?

Expected: I want to know which file's progress is being updated. As 
onProgress() accepts only "progress" parameter.

What version of the product are you using? On what operating system?

Rev 23, Mac OS X 10.6, Chrome, Safari


I have hacked this by adding 'number' to onProgress method, and supply value 
for it when calling onProgress().

What steps will reproduce the problem?
1.Add alert(event+":"+response+":"+name+":"+numberd+":"+total); into the 
onFinishOne override
2.Upload a file
3.

What is the expected output? What do you see instead?
Alert box with vars seprated by :

In FF7.01 you get lots of undefined's. In chrome it works as expected.

What version of the product are you using? On what operating system?
Tried old and latest SVN version, both do the same thing.

This is what I get when I load jQuery-1.7 instead of jQuery-1.4.4:

  Uncaught TypeError: Property 'html5_upload' of object #<HTMLInputElement> is not a function
  f.event.trigger    jquery.min.js:3
  f.fn.extend.trigger    jquery.min.js:3
  e.extend.each    jquery.min.js:2
  e.fn.e.each    jquery.min.js:2
  f.fn.extend.trigger    jquery.min.js:3
  jQuery.fn.html5_upload.xhr.upload.onprogress    jquery.html5_upload.js:91

The browser is Chrome 16.0.912.41 (Mac OS X 10.7.2)

Hi,

First I must congratulate you on a very nice piece of script. I have been using 
it for over a week now, handlers work fine, server response is OK (if we 
overlook that boundary thing).

Problems arise, though, when I switch to a HTTPS environment. There is no way 
to retrieve the server response, and the upload sometimes randomly fails with a 
generic server error.

Can XMLHttpRequest be implemented in a way to be functional with SSL?

Thanks

[deleted issue]

1. How to Creat a Button for upload Start?
2. i hop can creat a <canvas> resize my photo, how to send my thumb(canvas) & 
photo to  my web 
server use XMLHttpRequest ?

Sorry! my English not to be good, i come from taiwan

As soon as JavaScript loaded on browser we are getting following error

Line: 200
Error: Object doesn't support this property or method 

What steps will reproduce the problem?

1. Try and select more than 6 or 7 images at a time
2. Even on the demo on the project home
3.

What is the expected output? What do you see instead?

I'd expect to see the images in the queue, but nothing happens. 


What version of the product are you using? On what operating system?

Chrome4.1.2 on WinXP. Works fine on OSX though. 


Please provide any additional information below.

The attached patch makes 'sendBoundary' work in modern webkit based browsers.

The newest webkit based browsers and Firefox 4 nightly builds support
the FormData() API for sending multipart/form-data through XMLHttpRequst, see:
https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Using_FormD
ata_objects

FormData() is preferable to file.getAsBinary() + xhr.sendAsBinary()
because the latter has to read the whole file into memory.
This patch uses FormData() to implement the 'sendBoundary' option if 
available.

Browsers with FormData() support:
Chrome 5.0.375.55+ 
(http://code.google.com/p/chromium/issues/detail?id=39618)
Safari 4+
Firefox 4+ (nightly builds)

I've attached both a unified diff against trunk revision 15 and the complete 
jquery.html5_upload.js file.

What steps will reproduce the problem?
1. try a single upload with WEBrick 1.3.1 and Rack 1.1.0 on linux

What is the expected output? What do you see instead?
  I get the following exception:
  Status: 500 Internal Server Error
  bad content body
  in ~/.gem/ruby/1.8/gems/rack-1.1.0/lib/rack/utils.rb:499:in `parse_multipart'

Please provide any additional information below.

The boundary-footer has to be sent only once. Please remove lines 161-164 in 
your current reversion.

What steps will reproduce the problem?
1.open the example page
2.drag and drop a file


What is the expected output? What do you see instead?
The upload should start but instead the file is opened in the browser window

What version of the product are you using? On what operating system?
4.0.1 mac os x version

What steps will reproduce the problem?
1. Use the plugin in Firefox

What is the expected output? What do you see instead?

I expected to have the X-File-Name and X-File-Size request headers, instead 
they doesn't seem to be there.

Please provide any additional information below.

This is because the file properties in Firefox are not file.fileName and 
file.fileSize, but file.name and file.size instead. Therefore the functions 
providing these headers should be like:

function(file){ return file.fileName != undefined ? file.fileName : file.name; 
},
function(file){ return file.fileSize != undefined ? file.fileSize : file.size; 
},

What steps will reproduce the problem?
1. Define onError and on onFinishOne handlers
2. Upload a file
3. Make server to respond always with error 400

What is the expected output? What do you see instead?

Expected: onError() gets called, onFinishOne() does not get called. 
I assume onFinishOne is called for successfull upload. If not, I'd like to see 
onSuccessOne() method being added.

Actual output: onError() does not get called. onFinishOne() gets called even if 
the request has failed.

What version of the product are you using? On what operating system?

Rev 23,
Mac OS X 10.6, Safari, Chrome

Don't know whether it's a bug in a plugin or in Chrome itself.

What steps will reproduce the problem?
1. Click on upload button
2. Select all files via Ctrl+A
3. They upload successfully
4. Repeat steps 1-2
5. Nothing happens

What is the expected output? What do you see instead?
I expect files to be uploaded the second time (it is so in Firefox)

What version of the product are you using? On what operating system?
Chrome 13.0.782.215 on Windows 7

What steps will reproduce the problem?
1. Use Firefox 3.6
2. Upload file with unicode characters (example 中文檔.png)
3. Upload will fail

Encoding the filename first seems to be working:

filename = unescape( encodeURIComponent( file.fileName ) ); //encode_utf8
builder += '; filename="' + filename + '"';