Context: I am building a site where a user uploads an image as part of the process of listing an item. I want to show them a preview of the image in the upload form, as it is both aesthetically pleasing, and will help the users in uploading and describing their items.
Problem: In order to show a preview of the image, I need to upload it to my server, due to the sandboxing of browsers (I cannot get the image data into JS except by submitting the file-input form). However, we store the images using identifiers based upon data that the user inputs, in order to keep them organized (in our case, we sanitize the name and use that as a file name, in a /useruploads/user_id folder).
While I can change the naming scheme of the files in order to remove the dependency of user input (i.e. sha1 the file), uploading to s3 and resizing the image is an expensive operation, and I do not want to tie up resources unnecessarily. If I upload the image without resizing and generating thumbnails, then after the form containing the information about the item is submitted, the application will have to stream the data from S3, resize and generate thumbnails, and then re-upload the image(s), which seems somewhat roundabout.
I feel this is a pretty common problem, and I wonder if anyone has any patterns or advice on how to handle image uploads, in this regard.
