How to upload multiple images with DropzoneJS

Take a look at this serie, and mostly this video: https://laracasts.com/series/build-project-flyer-with-me/episodes/11

I had a similar problem. I needed a way to allow for multiple attached images to a post without the post being created yet. Once created I'd "unpend" the images (pending until the post was confirmed created) and associate them to the post.

Here's the steps that worked for me:

1. I have a post _images table that stores info about an image (path, size, type, etc) and it also more importantly stores the post_id to which it is associated / attached to.
2. I have a pending_images table that stores the same info, minus the post_id. It has what I call an image_id which ive made just a timestamp for when the image was uploaded into drop zone, to ensure a unique id for each image.
3. When the image is dropped into the drop zone , I have a small piece of JavaScript code that appends the image_id to a hidden input form element containing an array of the timestamp image_ids, essentially adding them to the form for the current post.
4. Also, when the images are dropped into the drop zone, the Ajax script that I run stores them in the pending images table. Storing everything except the unknown post id.
5. When the form is posted (to create the post), i just iterated through the hidden input array of pending image ids, grabbed them by id from the pending images table where the Ajax stored them via drop zone, and moved / copied them to the post images table (now that the post id is a known variable).

Thank you @bobbybouwmann and @jona777than . I finally got it. Now I have one more question. After I save the post and have all the images added I want the user to be able to later edit the post and make changes to the stored images. Right now I feel that I have to add a separate container for the stored images and use the dropzone to add new images. Is it possible to retrieve the already stored images and give the user option to add or delete existing images solely by using the DropzoneJS previews container? The adding part of new images I understand but the retrieval and in some cases the removal of images using just on container (already provided by dropzone) I don't.

@cristian9509, looks like drop zone has no built in functionality to handle this, so you'll have to get creative. I found this after a quick look at the GitHub wiki for dropzoneJS. It may be a good place to start:

How to show files already stored on server

Although there's no builtin functionality to do that, you can use Dropzone's default event handlers to your advantage.

The concept is, to create a mock file, and call the event handlers addedfile and thumbnail to draw the preview.

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");
// Or if the file on your server is not yet in the right
// size, you can let Dropzone download and resize it
// callback and crossOrigin are optional.
myDropzone.createThumbnailFromUrl(file, imageUrl, callback, crossOrigin);

// Make sure that there is no progress bar, etc...
myDropzone.emit("complete", mockFile);

// If you use the maxFiles option, make sure you adjust it to the
// correct amount:
var existingFileCount = 1; // The number of files already uploaded
myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;

@jona777than Thanks. I have found that too but the documentation is so slim that it took me quite a time to understand what is going on there. I think I have an idea on how to do it and would post some code once I have something working maybe someone would find it easier at a later time. I surely would love to find some more documented examples.