Question

I have a HTML upload button to send (multiple) files to a server which responds with JSON. Based on that response, my application flow continues.

Now, to test the rest of my code (dependent on the server response), I would like to simulate the file upload so that I do not have to manually select and upload new files on every reload.

Following is a simplified version of my upload method:

uploadToServer: function (file) {

    var self = this,
        data = new FormData(),
        xhr = new XMLHttpRequest();

    // When the request has successfully completed.
    xhr.onload = function () {
        var response = $.parseJSON(this.responseText);

        var photo = new App.Models.Photo({
            filename: response.filename,
            name: response.uuid
        });

        var photoView = new App.Views.Photo({ model: photo });

        $('.photos').append(photoView.render().el);
    };

    // Send to server, where we can then access it with $_FILES['file].
    data.append('file', file);
    xhr.open('POST', this.url);
    xhr.send(data);
}

The uploadToServer parameter file is a File-object from FileList. And as you can see, my server awaits the file inside of $_FILES['file'].

It would be awesome if a could simulate a real File-object being passed into uploadToServer, since I then do not have to worry about my existing events such as xhr.onload and xhr.onprogress being available.

If that won’t be possible, I could create a custom uploadToServer method and send a regular AJAX-request and fake-respond on my server. But how can I then use and bind the code from my events (xhr.onload, xhr.onprogress etc.) to that AJAX-request?

Answer 1

You could simulate a file upload by creating a canvas, converting it to a file and passing the result to your method.

1. Create a canvas : here, a nice red square

   var canvas = document.createElement('canvas'),
       ctx = canvas.getContext("2d");
   
   canvas.width = 100;
   canvas.height = 100;
   ctx.fillStyle = '#ff0000';
   ctx.fillRect(0, 0, 100, 100);
   
   document.body.appendChild(canvas);
   

2. Convert it to a file and pass it to your method: I used Canvas to Blob to simplify the test but you probably can extract the bare bones to fit your needs.

   canvas.toBlob( function (blob) {
       m.uploadToServer(blob);
   }, 'image/jpeg');
   

And a Fiddle http://jsfiddle.net/pvWxx/ Be sure to open a console to see the events and the request.

If you want to pass a filename with your blob, you can pass a third argument to formData.append, see How to give a Blob uploaded as FormData a file name? and an updated Fiddle http://jsfiddle.net/pvWxx/1/