Dropzone.js : Upload file without Browse dialog in php-webdriver integration tests

Question

i am using dropzone.js in my project , what i want to do is add file manually to queue without opening the file browser dialogue, the dropzone is already initia

Answer 1

Done,

The problem was with the format of FileList object that was provided to the myZone.addFile().If you open dropzone.js file and go to Dropzone.prototype.init function in there you will see a check

if (this.clickableElements.length) {

inside this check dropzone creates & configures the hidden file input and then attaches that input element to the body document.body.appendChild(_this.hiddenFileInput); and right after this line dropzone adds the change eventlistener to file type input that was created which fires as soon as we provide the file via browse file window.

return _this.hiddenFileInput.addEventListener("change", function() {

When we provide the file it fires and creates the FileList object see

files = _this.hiddenFileInput.files;

if you try to log it in console console.log(files) you will see a FileList that is created FileList { 0=File, length=1, item=item(), more...} on clicking this object inside firebug you will see detail below

0          File { size=21789, type="image/png", name="1-7-2013 6-19-44 PM.png", more...}
length      1
__proto__   FileListPrototype { item=item(), @@iterator=@@iterator()}

now the way i was creating the filelist object the result was following

_removeLink -----  a.dz-remove javascrip...defined; 
accept      -----  "image/jpg,image/gif,image/png,image/jpeg"   
accepted    -----  true 
mozFullPath -----  "http://mysite/img/imageUploadTestJPG.jpg"   
name        -----  "imageUploadTestJPG.jpg" 
path        -----  "http://mysite/img/imageUploadTestJPG.jpg"   
previewElement --   div.dz-preview  
previewTemplate --- div.dz-preview  
processing    ----- true    
size                30170   
status        ----- "uploading"
type                "image/jpeg"    
upload        -----  Object { progress=0, total=30170, bytesSent=0}
xhr            XMLHttpRequest { readyState=1, timeout=0, withCredentials=false, more...}
length             0
__proto__          FileListPrototype { item=item(), @@iterator=@@iterator()}

Notice the index 0 on the first detail which contains the detail of the file whereas the second one which is the result of my custom built FileList object has all the details of the file on the main rather than inside the index 0.

So to create similar object i had to first

• Obtain the blob via sending the xmlHttpRequest request to the image
• Specifying the response type of arraybuffer
• Obtain a blob URL for the image data.
• Assign that response to the file object and assign that to the input.file
• Calling the Dropzone.addFile().

the complete description for the process is below and you can upload file without opening the file browse window and use dropzone.js with selenium

// Simulate a call to  service that can
// return an image as an ArrayBuffer.
var xhr = new XMLHttpRequest();

// Use JSFiddle logo as a sample image to avoid complicating
// this example with cross-domain issues.
xhr.open( "GET", "http://localhost/path/to/my/image.jpg", true );

// Ask for the result as an ArrayBuffer.
xhr.responseType = "arraybuffer";

xhr.onload = function( e ) {
    // Obtain a blob: URL for the image data.
    var arrayBufferView = new Uint8Array( this.response );
    var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( blob );

    var parts = [blob, new ArrayBuffer()];

    file = new File(parts, "imageUploadTestFile", {
        lastModified: new Date(0), // optional - default = now
        type: "image/jpeg" 
    });

    $("input[accept=\'image/jpg,image/gif,image/png,image/jpeg\']").files = [file];
    myzone = Dropzone.forElement(".imageDropzone");
    myzone.addFile(file);
};
xhr.send();