How to delete or update files already uploaded on the server via Dropzone.js

Question

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.

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.

What I did so far:

• I saw how to display already uploaded files from the server via the FAQ of dropzone and I was successfully able to display them. This code worked perfectly for me:

  var mockFile = { name: "Filename", size: 12345 };
  myDropzone.emit("addedfile", mockFile);
  myDropzone.emit("thumbnail", mockFile, "/image/url");
  myDropzone.createThumbnailFromUrl(file, imageUrl);
  

  Ok, but this way I saw I am not able to enqueue them.

• Then, I had a look at the dropzone's code and I saw one very useful method addFile(file);. This method actually does all the things that the above code does - pushes the file to the dropzone.files 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:

  var mockFile = { name: "Filename", size: 12345, type: "jpg" }; // The type is required by the _enqueueThumbnail() method
  myDropzone.addFile(mockFile);
  myDropzone.createThumbnailFromUrl(file, imageUrl);
  

  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:

TypeError: Argument 2 of FormData.append does not implement interface Blob

I saw an answer on stackoverflow about this, but this seems to be a very complicated workaround to me for the simple operation I need to do.

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?

Thanks in advance!

Answer 1

I managed to do it myself. I am using PHP, so I will explain it in PHP terms.

CLIENT: Basically I check whether I am in update or create mode. If I am in update mode, I load the existing pictures and show them to the user exactly as described in the dropzone's FAQ.

I also keep an array called order with all the images. I update this array always when an action to the images is done - adding a new one, deleting, re-ordering. It doesn't matter whether I am in update or create mode. When I submit the form, I send this array as well.

The only difference is that if I have new images added, I call dropzone.processQueue() else I call $.post(). In both cases I am senging the order array along with the other form data.

SERVER: If new images are added, I get them from the $_FILES array. In any case I get the order from the order post param.

I won't delete this question with the hope it will help anyone in the future. If any questions, please ask.