CODEWITHSUNDEEP
node.jshtmlformsserver-side
Khalid Amin
Khalid Amin

Reputation: 902

Upload files while user is filling form

I am creating a form where users can post an ad including photos. Its not necessary for a user to login/register before accessing this form. I need to upload photos asynchronously while user is filling the form. (for example, gumtree.com.au lets you upload photos while you are creating a new ad)

I know we can start uploading files as soon the user selects the files. However, on server side how would it be possible to identify those files later when the user submits form? How to handle the uploaded files if the user abandons unfilled form?

What is a typical design pattern to achieve this properly?

Upvotes: 4

Views: 156

Answers (1)

Tasos
Tasos

Reputation: 5361

this is one approach

Part 1

when a user visits your site it contacts the server and sends a random generated 10 alphanumeric characters e.g (Xf4ht5Y4u9). This is the users identifier code

can be easyly achieved with a bit of javascript and ajax on the client side

on the server side you can use PHP to create a temporary directory named with the users identifier code

Part 2

user uploads files and sends them asynchronously to this temporary folder

Part 3

user fills in the form = true --- perform actions e.g process form and images, move them from the temp folder. the temp folder is now empty. it can be used for the next batch of uploads if you want that functionally. you can wait for the upload success callback just in case files are still uploading

user fills in the form = false --- the uploaded files stay in the temp folder because they haven't been processed.

Part 4

server side house keeping. check temp folders once a day if older than x amount of days from current date and delete them to save space. can be done with a shell script on any platform

If you are worried how long unprocessed files are kept hanging around on the server then change the logic of the above. e.g run house keeping every hour and check if temp folder age is > than 6 hours or whatever

In the unlikely event a user uploads files now and in 6 hours fills in the form then on the server side you can report back to the client to say that the files have been deleted and they need to upload them again. but this all depends if space is an issue.

you could auto open a popup window after 5 hours to say that the uploaded files will be deleted soon as they haven't filled in the form yet.

Upvotes: 2

Related Questions