uploading a file in chunks using html5

by

I tried to solve this problem and found the following things, which hopefully will be of use to you:

1) The JS function you are using for slicing the file is deprecated. I am running Chrome v14 and the console didn’t recognize it. I had to change it to this before I could do anything:

var chunk = blob.webkitSlice(start, end);

2) I experimented with much smaller files (about 10MB), but had similar problems – my video was always corrupted after upload. When I compared the original and the ‘copy’ I noticed one thing peculiar: it seemed like the parts of the file were just mixed up – it was all there but in the wrong order.

I suspect one problem your current program suffers from is not taking measures to make sure that the files are assembled in the correct order. I believe what is happening is that your JS is running uploadFile several times, without waiting for the previous uploads to finish, and the server tries to assemble the files in the order it is received, but that is not the same order the files are sent.

I was able to prove this by getting your code to work (somewhat modified, hacked together just as a proof of concept), by assigning each file a sequence number as it was received, and then after all parts were received assembling them in order. After doing that, I was able to play my video file, after having uploaded it.

I think you are going to have to take a similar measure. Receive all the file chunks, and then assemble them, or at least make sure you’re taking the necessary measures to assemble them in order. I’m not sure why your files would grow in size (I did observe this phenomenon, early on), so I suspect it is simply some bizarre side effect from otherwise not synchronizing the file chunks.

One difficulty you are immediately going to have is that the Blob object in Javasacript does not support changing or setting the file name, so you cannot on the client-side give the file a unique identifier that way. What I did, as a simple work around was the following:

            var i = 1;
            while( start < SIZE ) {
                var chunk = blob.webkitSlice(start, end);
                uploadFile(chunk, i);
                i++;

                start = end;
                end = start + BYTES_PER_CHUNK;
            }


function uploadFile(blobFile, part) {
     ....
     xhr.open("POST", "test.php?num=" + part);
     ....
}

As you can probably guess on the server side, I just then, use that GET variable to assign an identifier, and use that as a the basis for any other processing that needs to be done on the server.

Anyways, this doesn’t directly address the issue of the file size growing, so I can only hope this will help you; I’m curious to see what else you find out!

More Related Contents:

  1. PHP Upload fails for Video but not Image [closed]
  2. How do I add PHP code/file to HTML(.html) files?
  3. How can I select and upload multiple files with HTML and PHP, using HTTP POST?
  4. Save current page as HTML to server
  5. PHP Upload, extract and progressbar
  6. How to test if a user has SELECTED a file to upload?
  7. PHP see only 20 uploading files at a time
  8. overriding upload_max_filesize
  9. File not uploading PHP
  10. How can I view/open a word document in my browser using with PHP or HTML
  11. POST a file string using cURL in PHP?
  12. Max file number can php upload at same time
  13. PHP Undefined index error $_FILES?
  14. $_FILE upload large file gives error 1 even though upload_max_size is bigger than the file size
  15. Using php to output an mp4 video
  16. php script to delete files older than 24 hrs, deletes all files
  17. Parsing multipart form data
  18. How to execute and get content of a .php file in a variable?
  19. What’s the best way to create a single-file upload form using PHP?
  20. Simple form not sending data via _POST [duplicate]
  21. How to convert multiple tag to a single tag in php
  22. How to protect html form from spammers?
  23. How do I display PHP code in HTML?
  24. Pretty URLs without mod_rewrite, without .htaccess
  25. jQuery Multiple Forms Submit
  26. Wrap DOM element in another DOM element in PHP
  27. Error 403 on form submit
  28. How to write html code inside block? [closed]
  29. PHP/regex: How to get the string value of HTML tag?
  30. MySQL PHP – SELECT WHERE id = array()? [duplicate]

Leave a Comment