PHP multiple image upload with thumbnails and drag and drop

Question

I would like to implement multiple image upload with drag and drop functionality, but can't find anything online to help with my specific case.

The thing is I would like to resize images on upload to 16:9 ratio, and show thumbnails as they get uploaded. Also I am using a label that I wrote some css to style it as a nice upload button and I trigger a hidden file upload input with that label.

<label for="image">Upload image</label>
<input type="file" name="images[]" id="image">

I figured I need to use jquery ajax on each "Upload image" button click to send image(s) to an upload script where I resize the image(s), upload (them) to server and return image(s) path to jquery as a response so I can show a thumbnail of the resized image(s). Same thing goes for drag and drop functionality, I listen for a 'drop' and send the dropped images to upload script.

Everything up until now I can get working without a problem, but the thing is I don't want to actually upload images to the server until user clicks a button to submit form once he's done with all the inputs. So my question is can I manipulate images in this way and instead of uploading to a server store them somewhere local until that final submit button is clicked?

I thought of a solution where I upload images to a "temp" folder on my server using ajax and then on form submit move them to "images" folder, and then set up cron to empty that folder once a day, but I would like to avoid that because a user can start filling out the form, upload some images, and then just before he clicks form submit cron steps in and deletes all of the images in "temp" folder and his images are lost.

Answer 1

I ended up creating a new file input via jquery each time a file is selected (on file input change), removing id from all previous file inputs and setting id="image" for that new one I create in order for it to still work when the label is clicked that attaches to it.

To show the preview thumbnail I use FileReader and set the uploaded image as a background to thumbnail div that I set up to be responsive 16:9 scale (padding-bottom: 56.25%). Actual image cropping will then happen on server once form is submitted.