Предварительный просмотр Dropzone не отображается в зоне предварительного просмотра

Question

Я прогромно внедряю dropzone в форму с помощью руководства Matias Meno здесь: https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone.

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

HTML:

 <form id="my-awesome-dropzone" action="/uploads" class="dropzone"> 
      <fieldset name="contact-form-fieldset"> 
       <legend><h1>Request Services</h1></legend> 
       <ul> 
        <li class="contact-form-fieldset-title">Full Name</li> 
        <li><input type="text" name="name" id="contact-form-name" class="plain buffer"></li> 
        <li class="contact-form-fieldset-title"> 
        <li class="contact-form-fieldset-title">Email</li> 
        <li><input type="email" name="email" id="contact-form-email" class="plain buffer"></li> 
        <li class="contact-form-fieldset-title">Phone</li> 
        <li><input type="text" name="phone" id="contact-form-phone" class="plain buffer"></li> 
        <li class="contact-form-fieldset-title">Describe the problem with your device</li> 
        <li> 
         <textarea class="plain buffer" id="styled" name="styled-textarea"></textarea> 
        </li> 
        <li> 
          <div class="dropzone-previews"></div> <!-- this is were the previews should be shown. --> 
        </li> 
       </ul> 
       <div id="contact-form-fieldset-button"> 
       <button type="submit">Submit data and files!</button> 
       </div> 
      </fieldset> 
      <p>In a hurry? Call 632-345-674</p> 
     </form> 

 <script src="../js/dropzone.js"></script> 
    <script src="../js/uploader.js"></script> 

Файл uploader.js содержит исходный код Матиас:

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element 

// The configuration we've talked about above 
autoProcessQueue: false, 
uploadMultiple: true, 
parallelUploads: 100, 
maxFiles: 100, 

    // The setting up of the dropzone 
init: function() { 
    var myDropzone = this; 

// First change the button to actually tell Dropzone to process the queue. 
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { 
    // Make sure that the form isn't actually being sent. 
    e.preventDefault(); 
    e.stopPropagation(); 
    myDropzone.processQueue(); 
}); 

// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead 
// of the sending event because uploadMultiple is set to true. 
this.on("sendingmultiple", function() { 
    // Gets triggered when the form is actually being sent. 
    // Hide the success button or the complete form. 
}); 
this.on("successmultiple", function(files, response) { 
    // Gets triggered when the files have successfully been sent. 
    // Redirect user or notify of success. 
}); 
this.on("errormultiple", function(files, response) { 
    // Gets triggered when there was an error sending the files. 
    // Maybe show form again, and notify user of error 
}); }} 

Кто-нибудь есть какие-либо предложения?

Спасибо!

Answer 1

Попробуйте previewsContainer: ".dropzone-превью"