title: How to delete or update files already uploaded on the server via Dropzone.js
body: <p>I have announcement object that can contain multiple images. I managed to create the form for uploading files via dropzone. Now I want to give access to the author of the announcement to edit it, which means to edit the images as well. To edit the images means to re-order them, to remove some of them (or all of them) or to add more. </p>
  
  <p>What I wanted to do is to load the announcement object and add the images to the dropzone object so that when the user clicks the submit button all images to be sent along the rest announcement's data. In other words to enqueue the images to dropzone and to submit them again. This way on server side I can see  which files are new, which are missing, what the order is etc.</p>
  
  <p>What I did so far:</p>
  
  <ul>
  <li><p>I saw how to display already uploaded files from the server via the <a href="https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server" rel="nofollow noreferrer">FAQ of dropzone</a> and I was successfully able to display them. This code worked perfectly for me:</p>
  
  <pre><code>var mockFile = { name: "Filename", size: 12345 };
  myDropzone.emit("addedfile", mockFile);
  myDropzone.emit("thumbnail", mockFile, "/image/url");
  myDropzone.createThumbnailFromUrl(file, imageUrl);
  </code></pre>
  
  <p>Ok, but this way I saw I am not able to enqueue them.</p></li>
  <li><p>Then, I had a look at the dropzone's code and I saw one very useful method <code>addFile(file);</code>. This method actually does all the things that the above code does - pushes the file to the <code>dropzone.files</code> array, emits the addedfile event, adds it to the thumbnail queue, validates the file and if everything is ok, enqueues the file. So my code now looks like this:</p>
  
  <pre><code>var mockFile = { name: "Filename", size: 12345, type: "jpg" }; // The type is required by the _enqueueThumbnail() method
  myDropzone.addFile(mockFile);
  myDropzone.createThumbnailFromUrl(file, imageUrl);
  </code></pre>
  
  <p>With this code correction, I managed to enqueue the file. The problem is, when I try to send the data to the server, I've got the following error:</p></li>
  </ul>
  
  <blockquote>
    <p>TypeError: Argument 2 of FormData.append does not implement interface Blob</p>
  </blockquote>
  
  <p>I saw an <a href="https://stackoverflow.com/questions/27785721/dropzone-js-how-to-upload-file-using-selenium-php-webdrivers">answer</a> on stackoverflow about this, but this seems to be a very complicated workaround to me for the simple operation I need to do. </p>
  
  <p><strong>Is there any other simpler solution for this purpose? How do you edit the images that you upload to the server? What would you do to re-order the images, or to add/delete images to/from the queue?</strong></p>
  
  <p>Thanks in advance!</p>