Комбинация dropzone с простой формой

Question

Я хочу вставить загрузчик файлов с DropzoneJS в мою HTML-форму. Я набрал следующий код на основе tutorial.

Вот моя форма:

<form id="createProject" class="dropzone" action="/new_project" method="post" enctype="multipart/form-data"> 
    <input type="hidden" name="new_project" value="1"> 
    <div class="panel-body"> 
     <div class="row egal"> 
      <div action="#" class="col-md-4 col-xs-12 picture dropzone-previews"> 
       <div class="egal-center"> 
        <h5> 
         Add Picture 
        </h5> 
        <div class="upload-box btn"> 
         <i class="glyphicon glyphicon-plus"></i> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-8 col-xs-12"> 
       <input type="text" name="title" class="form-control" placeholder="Add a new title"/> 
       <input type="text" name="web_page" class="form-control" placeholder="Type in your project's website"/> 
       <textarea name="description" cols="40" rows="5" class="form-control" placeholder="Say something about your project "></textarea> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="input-group"> 
       <input name="video[]" class="form-control" type="text" placeholder="Video"/> 
       <div class="input-group-btn"> 
        <button type="button" class="btn btn-login addNewField"> 
         <i class="fa fa-plus"></i> 
        </button> 
       </div> 
      </div> 
      <div class="input-group"> 
       <input name="prezi[]" class="form-control" type="text" placeholder="Prezi"/> 
       <div class="input-group-btn"> 
        <button type="button" class="btn btn-login addNewField"> 
         <i class="fa fa-plus"></i> 
        </button> 
       </div> 
      </div> 
     </div> 
     <button type="submit" class="btn btn-login btn-block"> 
      Create project 
     </button> 
    </div> 
</form> 

Как вы видите, у меня есть некоторые поля ввода и окно, которое я делаю в DropZone с JavaScript. Я установил такие вещи, как это было описано в учебнике, но следующий JavaScript не работает. Он успешно добавляет слушателей событий, только метод processQueue() не работает. Я установил максимальную загрузку файлов в 1, потому что разрешено только одно изображение.

Dropzone.options.createProject={ 
    autoProcessQueue: false, 
    uploadMultiple: true, 
    parallelUploads: 1, 
    maxFiles: 1, 
    clickable: ".dropzone-previews", 
    previewsContainer: ".dropzone-previews", 
    paramName:"picture", 
    init: function() { 
     var myDropzone=this; 
     this.element.querySelector("button[type=submit]").addEventListener("click", function(e){ 
      e.preventDefault(); 
      e.stopPropagation(); 
      myDropzone.processQueue(); 
      $(this).closest('form').ajaxFormSend(function(data){ 
       $('.projects-panel').prepend(Mustache.to_html(window.templates.panelProjects, data.data)); 
      }); 
     }); 
     this.on("sendingmultiple", function(){ 
     }); 
     this.on("successmultiple", function(files, response){ 
     }); 
     this.on("errormultiple", function(files, response){ 
     }); 
     this.on("maxfilesexceeded", function(file){ 
      myDropzone.removeFile(file); 
      noty({ 
       type:'error', 
       text:'No more files plesase!' 
      }); 
     }); 
    } 
} 

Лучшее решение было бы, если Dropzone только установить значение скрытого ввода файла с определенным именем в форме и отправить файлы обычно с другими данными, когда форма отправки.

Примечание: ajaxFormSend - метод jQuery, который я поручил отправить файлы и другие данные в одном соединении. Я просто оставил его в коде, потому что я хочу отправить эту форму с AJAX с помощью этого метода, поэтому мне просто нужно добавить скрытое поле ввода, а Dropzone - установить значение этого одного поля ввода.

Answer 1

Вы должны быть в состоянии отправить форму с dropzone без проблем, но я не думаю, что вы можете передать файл из dropzone в обычное поле ввода, я считаю его по соображениям безопасности.

Чтобы отправить форму с помощью Dropzone использовать конфигурацию, как это:

Dropzone.options.createProject = { 
    autoProcessQueue: false, 
    parallelUploads: 1, 
    maxFiles: 1, 
    previewsContainer: ".dropzone-previews", 
    dictDefaultMessage: '', 
    clickable: '.upload-box', 
    paramName:"picture", 
    init: function() { 
     var myDropzone=this; 
     this.element.querySelector("button[type=submit]").addEventListener("click", function(e){ 
      e.preventDefault(); 
      e.stopPropagation(); 
      myDropzone.processQueue(); 

     }); 
     this.on('addedfile', function(file){ 
      $('.upload-box').hide(); 
     }); 
     this.on('success', function(file){ 
      console.log(file.xhr.response); 
     }); 
    } 
} 

Если вы хотите, чтобы один образ не нужен вариант uploadMultiple, и когда загрузка будет сделано, вы можете поместить код, который вы хотите выполнить в событии success. В примере просто печатает на консоли ответ с сервера.

Также обратите внимание на опции dictDefaultMessage, чтобы удалить сообщение по умолчанию из dropzone, а параметр clickable использовать другой элемент из контейнера dropzone.