Dropzone.js：在php-webdriver集成测试中上传没有浏览对话框的文件

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.js,我想要做的是手动添加文件到队列而不打开文件浏览器对话框,dropzone已经在页面上的.imageDropzone类的元素上初始化,我试图运行以下脚本添加文件,

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,

1.我正在使用php-webdriver,我需要测试上传功能,

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.

2.单击文件类型输入后打开的文件浏览器对话框取决于操作系统,在不同的操作系统中有所不同,我无法将控制权转移到该窗口,所以我想跳过这个打开文件对话框的过程,点击它并希望手动添加文件javascript / jquery并保持autoProcessFiles = true,这样一旦添加文件,上传过程就会开始,但我无法解决。

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

当我尝试调用Dropzone.addFile()时,我收到以下内容

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

TypeError:FormData.append的参数2未实现接口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.

1.将文件路径添加到初始化dropzone的文件输入,因为dropzone将更改eventlistener绑定到使用dropzone初始化的所有文件输入,并且一旦提供了文件路径,更改事件侦听器就会触发并开始上载文件,但尝试使用dropzone初始化引发的安全性异常修改文件输入的值。

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.

2.此外,在初始化时由dropzone.js脚本隐藏,并且php-webdriver不允许与隐藏元素交互,所以我坚持这一点,任何帮助或指导将不胜感激。

1 个解决方案

#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

问题在于提供给myZone.addFile()的FileList对象的格式。如果打开dropzone.js文件并转到那里的Dropzone.prototype.init函数,你会看到一个检查

if (this.clickableElements.length) {

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.

在此检查中,dropzone创建并配置隐藏文件输入,然后将该输入元素附加到body document.body.appendChild(_this.hiddenFileInput);在此行之后,dropzone将更改eventlistener添加到创建的文件类型输入,该文件类型输入在我们通过浏览文件窗口提供文件时立即触发。

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

return _this.hiddenFileInput.addEventListener(“change”,function(){

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

当我们提供它触发的文件并创建FileList对象时

files = _this.hiddenFileInput.files;

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

如果您尝试在控制台console.log(文件)中记录它,您将看到一个FileList,在firebug中单击此对象时创建了FileList {0 = File,length = 1,item = item(),more ...}将在下面看到详细信息

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.

注意第一个细节上的索引0包含文件的细节,而第二个是我自定义构建的FileList对象的结果,它包含主文件而不是索引0内的文件的所有细节。

So to create an object same like that i had to first obtain the blob via sending the xmlHttpRequest request to the image and specifying the response type of arraybuffer and then Obtain a blob URL for the image data and then assign that response to the file object and assign that to the input.file and 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

因此,创建一个类似于我必须首先获取blob的对象,通过向图像发送xmlHttpRequest请求并指定arraybuffer的响应类型,然后获取图像数据的blob URL,然后将该响应分配给文件对象和将其分配给input.file并调用Dropzone.addFile()。该过程的完整描述如下,您可以在不打开文件浏览窗口的情况下上传文件,并使用dropzone.js和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();

#1