Dropzone.js: загрузка файла без диалогового окна "Обзор" в интеграционных тестах php-webdriver

Question

Я использую 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);

почему я это делаю

1 Я работаю с php-webdriver и мне нужно проверить работоспособность загрузки,

2. Диалог файлового браузера, который открывается после нажатия на ввод типа файла, зависит от ОС, отличается в разных ОС, и я не могу перенести управление в это окно, поэтому я хотел пропустить этот процесс открытия диалогового окна файла, нажав на него. и хотите вручную добавить файл javascript/jquery и сохранить autoProcessFiles=true так что, как только файл добавлен, начинается процесс загрузки, но я не могу решить его.

когда я пытаюсь позвонить Dropzone.addFile() я получаю следующее

TypeError: Аргумент 2 из FormData.append не реализует интерфейс Blob

Я событие попробовал другой способ, т.е.

1 Добавьте путь к файлу ввода, для которого была инициализирована dropzone, потому что dropzone связывает change eventlistener со всеми file inputs которые инициализируются с помощью dropzone, и как только путь к файлу change event listener запускает и запускает загрузку файла, но пытается изменить значение для ввода файла с исключением безопасности повышенной безопасности, инициализированным в dropzone.

2 Кроме того <input type=file> скрыт dropzone.js Скрипт при инициализации и php-webdriver не позволяет взаимодействовать со скрытыми элементами, поэтому я застрял с этим, любая помощь или руководство будет оценено.

Answer 1

Готово,

Проблема была с форматом объекта FileList, который был предоставлен myZone.addFile(). Если вы открываете dropzone.js file and go to Dropzone.prototype.init Функция там вы увидите чек

if (this.clickableElements.length) {

внутри этой проверки dropzone создает и настраивает скрытый файл ввода, а затем присоединяет этот элемент ввода к телу document.body.appendChild(_this.hiddenFileInput); и сразу после этой строки dropzone добавляет change Eventlistener для ввода типа файла, который был создан, который запускается, как только мы предоставляем файл через окно просмотра файлов.

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

Когда мы предоставляем файл, он запускается и создает FileList объект см

files = _this.hiddenFileInput.files;

если вы попытаетесь войти в консоль console.log(files) you will see a FileList that is created FileList { 0=File, length=1, item=item(), more...} щелкнув этот объект внутри firebug, вы увидите детали ниже

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

Теперь, как я создавал объект списка файлов, результат был следующим

_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()}

Обратите внимание на индекс 0 на первой детали, которая содержит детали файла, тогда как вторая, которая является результатом моего пользовательского объекта FileList, содержит все детали файла в основном, а не в индексе 0,

Таким образом, чтобы создать такой же объект, я должен был сначала получить блоб, отправив xmlHttpRequest запрос к изображению и указание типа ответа arraybuffer and then Obtain a blob URL для данных изображения, а затем назначьте этот ответ объекту файла и назначьте его input.file и зовет Dropzone.addFile(), полное описание процесса ниже, и вы можете загрузить файл, не открывая окно просмотра файлов, и использовать dropzone.js с селеном

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