How to handle an image upload before creating the entry for the account in the database?

Question

I'm building a single page application. On the client side I'm using Nuxt.js (which includes Vue.js and Vuex). To send and receive data to the server I use axios. The API was built with the Django REST framework. I have the following scenario: If a user wants to register, he starts on Page 1. Here he has the possibility to upload a profile picture. As soon as he has selected the picture it will be uploaded automatically into an S3 bucket. During or after the upload he can fill in the other fields First Name and Last Name. All these fields are temporarily saved in the Vuex store which means if the user reload the page the data is gone. If he clicks on Next Page he will be taken to another page (another URL; no page reload -> Single Page Application) where he can enter the remaining data. After clicking on the button Create Account the entry is created in the database. Now to my question... How should I handle the image upload? As already said, the picture should be uploaded directly after the selection and not only when you click on the button Create Account. At some point I have to create a relationship between the image and the account. So far I have come up with the following solution. The following ER model represents my database tables. If the user selects an image on Page 1, it's immediately uploaded into the S3 bucket and an entry in the Image table will be created. The API returns the ID of this image entry. I save this ID in the temporary Vuex Store so I can use it on Page 2 to send it to the API Endpoint which is responsible for the account creation. The problem is, the Vuex Store is not "secure", as an experienced user could easily edit the values via the console. So he could change the id of the image entry to an entry he didn't created at all. Does anyone know how to solve something like this or generally if this approach is common to handle image uploads before creating the account? (I've already seen this situation on many pages but I don't know how they solved this) JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

The best way would be adding another unique field and using something like uuid and use it instead of id, at least for registration or anywhere that accepting ids is not secure enough. Or a temporary slug or anything than can't be accessed publicly or guessed easily. Also you can filter out images that has no owner and accept these ids which is not as secure but the chance of someone getting another id that has no owner at that same exact time is pretty low. (OFC if you clear the images with no owner regularly) Also you should be concerned about the fact that users might stop at page 2 and you will have images with no owner (Extra space). If you have the relation in Image table then you can add a task to run each 24 hours and remove the images that has no owner or like X minutes passed from their creation or etc. Basically anytime you have to separate your single forms to separate steps, you'll end up adding some functions to do the cleaning.