title: Dropzone add existing files
body: <p>I am using dropzone with knockout. I want to add existing files to dropzone. My dropzone custom binding code is (Only see the code to add existing files as adding new files is working fine):</p>
  
  <pre><code>ko.bindingHandlers.dropzone = {
              init: function (element, valueAccessor) {
                  var value = ko.unwrap(valueAccessor());
  
                  var options = {
                      maxFileSize: 15,
                      uploadMultiple: true,
                      parallelUploads: 100,
                      maxFiles: 30,
                      addRemoveLinks: true,
                      acceptedFiles: ".jpeg,.jpg,.png,.gif",
                      init: function () {
                          var myDropzone = this;
                          this.on("success", function (file, serverFileName) {
                              fileList = [];
                              i = 1;
                              var abc = $.map(serverFileName, function (item) { return (item); });
                              $.each(abc, function (index, value) {
                                  fileList[i] = { "fileName": value, "fileId": i++ };
                              })
                          });
                          if (images) {
                              for (i = 0; i &lt; images.length; i++) { //data in images array is shown in figure
                                  myDropzone.emit("addedfile", images[i]);
                                  myDropzone.emit("thumbnail", images[i], "/Images/Ads/");
                                  myDropzone.emit("complete", images[i]);
                              }
                          }
                      }
                  };
  
                  $.extend(options, value);
  
                  $(element).addClass('dropzone');
                  new Dropzone(element, options); 
              }
          };
  </code></pre>
  
  <p>The data in <code>images</code> array is :</p>
  
  <p><a href="https://i.stack.imgur.com/pKt29.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pKt29.png" alt="data in images array"></a></p>
  
  <p>And my HTML code is :</p>
  
  <pre><code>&lt;form id="my-awesome-dropzone" data-bind="dropzone: { url: '/Electronics/FileUploadHandler' }"method="post" enctype="multipart/form-data"&gt;
     &lt;h2&gt;Add Images&lt;/h2&gt;
     &lt;div id="dropzonePreview" class="dz-default dz-message"&gt; &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Now the added existing images are shown in figure.
  <a href="https://i.stack.imgur.com/hftj5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hftj5.png" alt="enter image description here"></a></p>
  
  <p>Why the thumbnail of images are not displayed? And when i hover over "Remove file" the link that appears on browser's bottom left side is <code>javascript:undefined;</code>. And when I click "Remove file" the file is removed but "Drop images to upload" is shown which should only be visible when there are no images in dropzone. What i am doing wrong?</p>