javascript - 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 initialized on the element with class .imageDropzone on the page and i am trying to run the following script to add the file ,

Dropzone.autoDiscover=false;
var myZone=Dropzone.forElement('.imageDropzone');
var fileList=$("input[accept='image/jpg,image/gif,image/png,image/jpeg']")[0].files;
fileList.name="imageUploadTestJPG.jpg";
fileList.type="image/jpeg";
fileList.size=30170,
fileList.path="http://mysite/img/imageUploadTestJPG.jpg";
fileList.mozFullPath="http://mysite/img/imageUploadTestJPG.jpg";
fileList.accept="image/jpg,image/gif,image/png,image/jpeg";

console.log(fileList);
myZone.addFile(fileList);

why am I doing this

1. I am working with php-webdriver and I need to test the upload functionality,

2. The file browser dialogue that is opened after clicking on a file type input is OS dependent, different in different OS, and I cant shift control to that window, so I wanted to skip this process of opening the file dialogue by clicking on it and want to add the file manually javascript/jquery and keeping autoProcessFiles=true so that as soon the file is added the upload process starts, but I am unable to solve it.

when i try to call Dropzone.addFile() i receive the following

TypeError: Argument 2 of FormData.append does not implement interface Blob

I event tried another way i.e

1. Add the file path to the file input on which the dropzone was initialized because dropzone binds an change eventlistener with all the file inputs which are initialized with dropzone and as soon the path to file is provided the change event listener triggers and starts uploading the file, but trying to modify the value for file input with dropzone initialized raised security exception.

2. Moreover the <input type=file> is made hidden by the dropzone.js script when initialized and php-webdriver does not allow to interact with hidden elements so i am stuck with this, any help or guidance would be appreciated.

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();