Simulated file drop and upload in dropzone.js

Question

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:

Creating a file-like object in javascript, then
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!

Scott Weldon · Accepted Answer · 2015-08-13 17:11:49Z

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/

Collectives™ on Stack Overflow

Simulated file drop and upload in dropzone.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related