I am currently trying to set up a work ticket system that allows people to fill out a form and then that forms data is stored in an SQL database. I have a table for the ticket entries and all of their fields, and I also have a table to store any images that the user uploads to a file upload component. My desired functionality is to have all of these images uploaded after the user clicks a confirmation button that runs a script that uploads all the fields and images to their respective tables.
However, It looks as if the file upload component doesn't directly expose the files it is holding to other components on a view, so I am not about the generate my table entry for the ticket and then reference the table's primary key ID in the image entries. It seems that the only option I have is to upload the image to the database as they come into the file upload component using the "onFilesReceived" event.
This isn't exactly ideal as there isn't a great way to associate those images with a database entry that doesn't exist until after they upload the images. Also means that the images could get uploaded, the user walk away from the form and never create the table entry at all, and then there would just be images in the database with no parent entry.
Does anyone know of any way to access the files that are uploaded outside of the file upload component so I can insert them into the table in the proper order?
I suspect that that is a common problem with web-based systems. This forum is using Discourse and when you add an image to your post it uploads it and renders it in the preview pane. There is no obligation to complete the post so, as you say, it is orphaned in the ether.
One possible solution is to use this standard and simple model but run a scheduled task and delete any unreferenced images older than, say, 24 hours. I know I've been delighted to find that half-written posts for this forum, complete with images, written at home pop up on my work computer where I can finish them off and submit. I don't know if orphaned images are ever deleted.
I've had a similar challenge before, where I had a user form for an event log entry with an optional report upload. I got around it by temporarily storing the file in a global variable dictionary in the onFileReceived event:
That way I could do a single insert query into the database with the form data and file upon form completion. I also had an onShutdown event on the view to clear the global variable.
On a similar note, is anyone aware of a good way to flag for when uploads start and when they are finished uploading? My current solution allows for the chance of an image getting left out because it didn't finish uploading into the component before the user submitted the form.
I know that I could reorder the form to where the file upload isn't right before the submit button, but it would be a nice feature to be able to have a way to flag an enable property on my submit button while the file upload component is in the process of receiving data from my machine.
Have an onClick event on your file upload component set the submit button's enable prop to false. Then use the onFileReceived event to set the enable prop to true
Issue with this solution is that it fails to capture the edge case of when someone will misclick on the upload component, not upload anything and then try and submit the form. They would be locked out until they did upload a file, which isn't a sure thing with just the onclick event
Maybe there's a way to capture that cancellation event as well, maybe onUploadsCleared? If not, you might try having a "cancel upload" button that manually calls clearUploads() and also resets the submission button.
Can even have a little label by the submission button that appears and says "Complete or cancel upload before submitting" just so the user isn't scratching their head as to why they can't click on submit.
It would be very helpful if there was an event.files.count object just providing the number of files that the user is uploading. Then we could know when all files have been processed on the component. Right now I store files in a temporary database and the user has to click a submit button to create the ticket and those files get moved to the permanent db, but if the user does not wait for all the files to be processed then they will not be included. I don't think there is any perfect solution to this problem without knowing the number of files being uploaded.
I know some of these posts are old, but I forced a single zip file for upload. You know how many files are within it. Perhaps not the best solution, but worked well for my use case.
Did you ever find a solution for this? I have the same problem trying to force the user to wait until all files have been uploaded before they can exit the page. The best I can come up with is a modal popup with a loading spinner, which will only execute after each file has been received, so it is still not fail-proof. I would love any ideas for a better option.