Submitting data after image upload

Question

My site has a feature that allows users to create posts (like Facebook). I have a form with a "Message" input field and a button that allows users to upload images.

Right now, how I have the code set up is that when the user submits the form, my code will submit the data first, and then upload the images.

The problem with this is that if the user cancels the image upload half way through, the database record will exist (because the data was submitted before the image upload), but there will be no images uploaded.

So my solution to this is to upload the images first and submit the data after. The problem with this is that I'm not sure how I can tie the images to the data in a database record.

Should I upload all of the images to /tmp and then move the files to a permanent directory, like /var/www/html/website/public/img/uploads/<upload_id> where upload_id is the id of the database record?

What should I do if the user uploads an image, but closes the tab half way. Then there will be an image in /tmp that will stay there forever unless the directory is cleaned up. How would I clean it up?

Is this the best way to do this or are there better ways?

I'm using Laravel 5.3 and Dropzone.js.

Thanks.

Answer 1

Since you are using Dropzone.js which allows files to be uploaded via ajax, you can do this the following way :

1) Send file to the backend server using Dropzone.js (ajax).

2) Since you are using laravel, each file you receive will be an instance of UploadedFile, you can use this class to access the Original Name of the file uploaded, size, MimeType etc.

3) In the Image Model in your database (create this if not done already), create a new record for this image and store the fields mentioned above if needed, along with the path where you will be storing the image. You can use this path stored in the table row to access the image later.

4) Get the 'id' of the newly inserted row in the Image Table and pass it back to the frontend where you can receive it using the 'success' event Handler for the Dropzone plugin.

5) Append this newly inserted 'id' as a hidden input element in your form.

6) When you submit the form, you will receive the image ids related to your post and you may save it using the Database relationship of your choice.

7) Yes, you need an additional check for images that have been uploaded and entered in your Image table, but those whose posts have not been created. You may create an Artisan CLI command for the same and assign it as a Cron Job.

Answer 2

I think you should submit your form with AJAX. This solution was useful for me.

1. Make a, span or other element with event "onclick" instead of button, because button pressing will confirm the form automatically, even if the button's type isn't a "submit".

2. Write an ajax function like this:

   function newsFormSubmit(item_id){
   
         var formData = new FormData($('.news-form')[0]);
   
         formData.append("item_id", item_id);
   
         $.ajax({
            type: 'POST',
            url: config.routes[0].savenews,
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
               if (data.error)
               {
                    alert(data.error);
                    return false;
               } else if (data)
               {
                    $('#news-card-' + item_id).html(data);
               }
           }
       });
   }
   

3. Place this function on onclick event.