html5 chunk and webworker does not upload anything

Question

I was working with html5 slice and webworker but when it goes to uploadFile function, nothing happened. nothing being upload

<html>
    <head>
        <title>Upload Files using XMLHttpRequest</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>     
    </head>

    <body>
        <form id="fileuploader" enctype="multipart/form-data" method="post" action="upload.php">
            <label for="fileToUpload">Select Files to Upload</label><br />

            <input type="file" name="fileToUpload[]" multiple="" id="fileToUpload" onchange="fileList();"/><br />

            <input type="button" onclick="sendRequest();" value="Upload" />

            <!-- a place for File Listing -->
            <div id="fileList">              
            </div>           
        </form>
    </body>
</html>

<script type="text/javascript">

    function sendRequest() {
    var worker = new Worker("fileupload.js");

    worker.onmessage = function(e) {
        alert(e.data);
    }

    var file = document.getElementById('fileToUpload');

    for(var i = 0; i < file.files.length; i++) { 
        worker.postMessage(file.files[i]);  
    }
}

and for the fileupload.js

var file;
var p = true;

function uploadFile(blobFile, fileName, filePart, totalChunks) {         
    var xhr = new XMLHttpRequest();                
    xhr.open("POST", "upload.php"+"?"+"file="+fileName + filePart, true);

    xhr.onload = function(e) {
    };


    xhr.send(blobFile);
}   

function process() {
    var blob = file;
    var originalFileName = blob.name;
    var filePart = 0

    const BYTES_PER_CHUNK = 100 * 1024 * 1024; // 100MB chunk sizes.
    var realFileSize = blob.size;

    var start = 0;
    var end = BYTES_PER_CHUNK;

    totalChunks = Math.ceil(realFileSize / BYTES_PER_CHUNK);

    while( start < realFileSize ) {
        //self.postMessage(start);
        //self.postMessage("test");

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

        uploadFile(chunk, originalFileName, filePart, totalChunks);

        filePart++;
        start = end;
        end = start + BYTES_PER_CHUNK;
    }
}


self.onmessage = function(e) {
    file = e.data;
    /*for (var j = 0; j < e.data.length; j++) {
        files.push(e.data[j]);
    }*/

    if (p) {
        process();
    }
}

@Bergi I thought it's different for firefox or chrome? that's why we use webkitslice or mozslice. but, I just tried it, it still does not upload anything.. — Harts, Dec 13 '12 at 23:28
Could you be more precise on the exception you get, and in which browser (version) you test? — Bergi, Dec 13 '12 at 23:42

score 1 · Accepted Answer · answered Dec 13 '12 at 23:41

To summarize your code:

 if (!blob.webkitSlice && !blob.mozSlice) {
     var chunk = blob.mozSlice(start, end);
     // or: var chunk = blob.webkitSlice(start, end);
 }

This is the line where you get that error from, and it should be obvious that you need to get an exception there.

Sure, for older versions of those browsers you probably should check for the prefixed functions. But if the "feature" detection has not matched, you will need to use the plain function - may it be because those vendors have dropped the prefixes, or the code is executed in some other browser (Opera, IE). See also Browser compatibility: Notes on the slice() implementations at MDN.

So, use this:

var slice = blob.webkitSlice || blob.mozSlice || blob.slice;
var chunk = slice.call(blob, start, end);

I think the slice is working now, after I use your code above, but it still does not upload the file. I think it's because in upload.php, $tmp_name = $_FILES['fileToUpload']['tmp_name']; $_FILES seems have nothing. any idea? — Harts, Dec 13 '12 at 23:51
Uh, I'm no expert for the server side. However, you don't seem to upload a `multipart/form-data` piece on the `fileToUpload` paramater, but just some blob in the request body - I don't know how to access these. — Bergi, Dec 13 '12 at 23:56

score 1 · Answer 2 · edited Feb 15 '13 at 10:43

Here is a complete working code.

var file = [], p = true;
function upload(blobOrFile) {
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/server', false);
 xhr.onload = function(e) {
 };
 xhr.send(blobOrFile);
}

function process() {
 for (var j = 0; j <file.length; j++) {
  var blob = file[j];

  const BYTES_PER_CHUNK = 1024 * 1024;
  // 1MB chunk sizes.
  const SIZE = blob.size;

  var start = 0;
  var end = BYTES_PER_CHUNK;

  while (start < SIZE) {

   if ('mozSlice' in blob) {
    var chunk = blob.mozSlice(start, end);
   } else {
    var chunk = blob.webkitSlice(start, end);
   }

   upload(chunk);

   start = end;
   end = start + BYTES_PER_CHUNK;
  }
  p = ( j = file.length - 1) ? true : false;
  self.postMessage(blob.name + " Uploaded Succesfully");
 }
}


self.onmessage = function(e) {

for (var j = 0; j < e.data.length; j++)
  files.push(e.data[j]);

 if (p) {
  process()
 }

}

The OP already has code that he wants fixed; he did not want a complete replacement. You've also failed to indicate you are linking to a blog you are apparently linked to. — Andrew Barber, Feb 15 '13 at 10:43

html5 chunk and webworker does not upload anything

2 Answers2

Linked