Keep form files after validation error - html

I have a form where I simultaneously send several (let's say 10) files to the backend, along with some other regular input fields.
When I find a validation problem in the backend I display the form again and fill the regular inputs (dropdowns, text inputs, etc.), but I cannot fill the file fields, forcing the user to select the files from the file directory again.
The solution I think of is sending the base64 encoded representation of the files, and put them back in the form in case there is a validation error, but I would like to know if there is a simpler way.

No matter what you do, you can not skip server-side validation. For security reasons (someone sending raw requests for example). As far as showing the files in case of error (or simple reloading) I would send it as Base64, but via AJAX if the files are large.
Client-side validation: most validations (if not all) can be done using plain JS. Be it filesize, content type... and more specific validations according to filetypes (image, document...)
Server-side validation: Once sent, fully validate the file and content.
Send files back:In case of error, send the files with the request if small. If big send them via AJAX to avoid blocking and keep page loading times fast.
Hope it helps!

The simplest thing to do would be :
1) Validate all fields on the client side (javascript/jquery)
2) Once all other inputs are validated, then you send in Files.
NB: If you need to validate some values on the server side, use ajax for both steps (1) and (2). Also, try to give a bit more details to get quality answers

I would create a temporary store for uploaded files and would send back only a unique-hard-to-guess ID got from the store instead than the whole file.
The form section for a single file upload would then include also an hidden input carrying the unique file-ID.
When processing the request: if there is a file in the request get the file (and store it if form not valid) otherwise if there is a file-ID get the file from store.

Related

Is it possible send a specified file (input type=file)?

I need to upload a file repeatedly by browser (automatic) and refresh time ask me for confirm.
How can i to POST form with a specified file?
Sorry my english
It would be nice if you make available what you already tried, then we know where you are getting stuck.
Basically if you need to upload a file to a remote server you will need a dynamic language like PHP, Python, etc.
You can't send files to a remote server using plain HTML.
For security reasons HTML itself won't let you send files to a remote webserver via <form> automatically.
For that feature you would have to have your webserver handle the form via a special file like for example <form action="exampleFormHandler.php" method="post">.
Placed at your webserver, this form-handling file would have to provide the sending of that very file then.

How can I force the user to only upload a xlsx, csv, or xls file that has two columns and has the same exact name for header as I need in frontend?

So far, I can only check if the user has uploaded an xlsx, xls, or csv file. How can I make sure the user is actually uploading a file with those extensions that also is required to have two columns, with 'Example', and 'Label' headers in the frontend, otherwise, keep asking them to upload the correct file?
<div class="form-group"><input type="file" name="annotatedsamplefile" id="annotatedsamplefile" accept=".xlsx, .xls, .csv" class=""></div>
It sounds like you need to upload the file to the back-end immediately, which would process the file and return whether the file is of the correct format. Then, if it is valid, that same response would have a way to identify the already uploaded file so it doesn't have to be uploaded again on a possible form submission.
I'll leave it to you to figure out how to accomplish this, since there's multiple ways to do it in JQuery, vanilla JavaScript, and probably Bootstrap. It also depends on your server-side language as well as if you are putting the file into a DB or just a file system.
There may be a client-side way to do this, but do you really want to have a potentially large library loaded when your site loads? Also, relying on client-side information isn't generally a good idea when talking about business logic. Business logic should generally be done server-side, so it can be more reliable. It' much harder to alter a server-side response to user data than client-side results based on user data. I'm not saying server-side results are infallible, but rather that it can be easy to manipulate client-side results, even remotely. And even if you did validate on the client-side, you'd still want to validate the file on the server-side anyway, so why not avoid duplication of effort and just do it server-side?

How to store a blob of JSON in Airtable?

There does not appear to be a dedicated field type in Airtable for "meta" data blobs and/or a JSON string.
Is the "Attachment" type my best bet?
I could store it either as a json attachment, or on a String type column.
Since a full json on a text column would likely not be readable, I would store it as attachments.
However, it seems that at least for now, uploading attachments require the file to be already hosted somewhere first, so this route might not be the easiest one:
https://community.airtable.com/t/is-it-possible-to-upload-attachments/188
Right now this isn’t possible with the Airtable API alone. It’s
something we’ll think about for future API versions though. A
workaround for now is to use a different service
(e.g. Filestack90, imgur52, etc.) to process the upload before then
sending the url to Airtable. When Airtable processes the attachment,
it will copy the file to Airtable’s own (S3) server for safekeeping,
so it’s OK if the original uploaded file url is just temporary

Send Json inside FormData as File alongside files

I was wondering if it was ok to encode json data as a blob (using atob) alongside some other binary data to the server, and then reload the json file file into memory to save it in the database?
I am doing this in order to prevent multiple posts to the server, I could for example, send the json data, validate it, and when it's OK, I could send the files with some Ids, and then link the both of them server side.
but this method seems broken, because if the user leaves the browser while he is sending the data, and part of the files have been sent, then i'd have alot of uncomplete posts.
Thanks for your answers in advance.

Restoring the value of a input type=file after failed validation

I have a form with several inputs that deal with files. The javascript validation is pretty good at checking to make sure that everything is good, but some things require PHP to inspect (like the file's mime type), and sometimes it will get rejected.
The problem is, when I send the user back to the form, I can repopulate all the data that they had originally input, except the inputs with the type of file. Firefox doesn't provide the absolute file path so I can't just copy in a file path to the input.
What can I do to repopulate the input type=file form elements?
You cannot populate the file input, to do so would be a serious security problem.
Instead, store the uploaded content on the server and store an id that you can use to reference it in a hidden input.
Clean the files up automatically after they reach a certain age, and provide a means for the user to change their mind about what file they want to upload (e.g. a checkbox (checked by default) for each file being stored on the server for upload)