4 months ago

Handling image uploads for a model that has not been created yet

Posted 4 months ago by brentxscholl

In my project I want my users to be able to post Events.

Events have a title, description, price, date, start time, end time, images, etc.

When a user is creating an event, I want them to be able to upload images as well.

This image upload form is on the same page as the event creation form.

I'm using an ajax image uploader so that the user can see image thumbnails in real time and drag and drop the image order. (user selects an image from device, it automatically uploads using ajax, and the image thumbnail sections updates on successful ajax call showing the newly added image(s). this ajax form is outside the events form, but on the same page)

The problem is that when I upload the images using ajax to show on the page, the Event has not yet been created by the user so an event_id can not be attached to the Image model.

It works if I'm editing an Event because there is an event_id for the image model.

How do I handle adding images using an ajax image uploader to an event that has not yet been created? Is there a way to store them in the session and if the user does not create the event (navigates away from/ refreshes the page) the images are removed/not saved.

Note: This would be a heck of a lot easier if i just used a multifile input in my form, but for the sake of User Experience, it is required that the user instantly see thumbnails of the images they plan on attaching to the event and be able to drag drop, and delete them on the fly, while in the process of creating events.

Please sign in or create an account to participate in this conversation.