CODEWITHSUNDEEP
javascriptfile-uploaddropzone.js
tohster
tohster

Reputation: 7103

Simulated file drop and upload in dropzone.js

I'm writing a test harness for a web page containing a dropzone.js element, let's call it myDropzone, represented by the $('#my-dropzone') element.

Question:

Can I use javascript to simulate dropping an uploadable file onto the dropzone?

I think (but I'm not sure) this might entail something like:

  1. Creating a file-like object in javascript, then
  2. Triggering a drop event on myDropzone.

Step #2 is easy, but step #1 involves creating a file-like object (containing real datastream?) that can actually be uploaded once it is dropped.

I've tried creating dummy files such as this and then using myDropzone.addFile(...), but that doesn't result in an uploadable file because there is no data payload.

thanks!

Upvotes: 3

Views: 2039

Answers (1)

Miguel
Miguel

Reputation: 20633

What I was able to do was create a Blob file from a base64 encoded file (image in this case) and pass that to addFile(), so it essentially is simulating dropping a file.

dropZone.addFile(base64toBlob(base64FileData, 'image/png'));

Where base64toBlob is:

function base64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

Full Demo http://jsfiddle.net/P2dTF/52/

Upvotes: 6

Related Questions