Dropzone внутри html-формы с другими полями формы не работает

Question

Я хочу добавить dropzone в существующую форму, но она не работает.

Когда я просматриваю консоль, я получаю ошибку throw new Error("No URL provided"). Когда я нажимаю на загрузку, я не получаю никакого предварительного просмотра - все, что я получаю, является обычным вводом файла.

<link href="../dropzone.css" rel="stylesheet"> 

<form action="/" enctype="multipart/form-data" method="POST"> 

    <input type="text" id ="Username" name ="Username" /> 

    <div class="dropzone" id="my-dropzone" name="mainFileUploader"> 
     <div class="fallback"> 
      <input name="file" type="file" /> 
     </div> 
    </div> 

    <div> 
     <button type="submit" id="submit"> upload </button> 
    </div> 

</form> 

<script src="../jquery.min.js"></script> 
<script src="../dropzone.js"></script> 

<script> 
    $("my-dropzone").dropzone({ 
    url: "/file/upload", 
    paramName: "file" 

    }); 

</script> 

Answer 1

Нет URL при условии, ошибки не потому, что $ ("mydropzone") не так вместо этого он должен быть $ ('# mydropzone')

Dropzone наряду с другой формой, да это очень возможно , вы должны опубликовать данные, используя URL-адрес, указанный в dropzone, не в действии формы. Это означает, что все ваши данные формы вместе с загруженными файлами должны быть отправлены обратно к URL-адресу, предоставленному для dropzone. Простое непроверенное решение выглядит так:

<link href="../dropzone.css" rel="stylesheet"> 

<form action="/" enctype="multipart/form-data" method="POST"> 

    <input type="text" id ="Username" name ="Username" /> 

     <div class="dropzone" id="my-dropzone" name="mainFileUploader"> 
      <div id="previewDiv></div> 
      <div class="fallback"> 
      <input name="file" type="file" /> 
      </div> 
     </div> 
     <div> 
      <button type="submit" id="submitForm"> upload </button> 
     </div> 
</form> 

<script src="../jquery.min.js"></script> 
<script src="../dropzone.js"></script> 
     <script> 

     $("#mydropzone").dropzone({ 
      url: "/<controller>/action/" , 
      autoProcessQueue: false, 
      uploadMultiple: true, //if you want more than a file to be uploaded 
      addRemoveLinks:true, 
      maxFiles: 10, 
      previewsContainer: '#previewDiv', 

      init: function() { 
       var submitButton = document.querySelector("#submitForm"); 
       var wrapperThis = this; 

       submitButton.addEventListener("click", function() { 
        wrapperThis.processQueue(); 
       }); 

       this.on("addedfile", function (file) { 

        // Create the remove button 
        var removeButton = Dropzone.createElement("<button class="yourclass"> Remove File</button>"); 

        // Listen to the click event 
        removeButton.addEventListener("click", function (e) { 
         // Make sure the button click doesn't submit the form: 
         e.preventDefault(); 
         e.stopPropagation(); 

         // Remove the file preview. 
         wrapperThis.removeFile(file); 
        }); 

        file.previewElement.appendChild(removeButton); 
       }); 

      // Also if you want to post any additional data, you can do it here 
       this.on('sending', function (data, xhr, formData) { 
        formData.append("PKId", $("#PKId").val()); 
       }); 

       this.on("maxfilesexceeded", function(file) { 
        alert('max files exceeded'); 
        // handle max+1 file. 
       }); 
      } 
     }); 
    </script> 

Сценарий, где вы инициализации Dropzone может быть внутри $ document.ready или обернуть его как функцию и вызвать, если вы хотите, чтобы инициализировать его.

Счастливое кодирование !!