0

For users purchasing services from a website this would be the ideal workflow :
1. (clientside) Select services (via form)
2. (clientside) Browse (not upload here) some needed files (PDF, images)
3. (serverside) Validate form ($_POST)
4. (clientside) Present validation result.
5. (clientside) Edit form in case validation failed (repeat step 3 to 5 as needed)
6. (clientside) Submit form and upload prev. browsed files
7. (clientside) Track upload (AJAX)

As I understood one is not able to cache URL's of local files , so browsing files before (serverside) form validation seems to be quite useless. Browsing files must happen at the end shortly before submitting the form, unless there are options of caching URL's of local files to establish above workflow.

Any hints, any suggestions ?

Ben
  • 677
  • 5
  • 19
  • `FileReader` may be the go – Jaromanda X Aug 27 '16 at 09:23
  • As I understand FileReader reads the content of a file, i.e. a text file to present it on the the users website. This is not my approach. – Ben Aug 27 '16 at 09:43
  • Not really - see https://jsfiddle.net/cgv5doLo/ - this is something I use to get data uri's for simple graphics (never mind, it is useful at work) - when you drop a file (this can be done with a file picker too, but I've never investigated exactly how to do that) it reads the file and converts to a data uri ... that part is not relevant to you, but you should see the possibility of using FileReader (and other concepts) for your needs – Jaromanda X Aug 27 '16 at 09:54

1 Answers1

0

There's two ways, depending on the details of your application flow.

  1. If you are on a Single Page app, you could use an XMLHttpRequest with only the form data and without the files to get the validation result and then do a normal form submission with all the data to upload the files
  2. You can use the FileReader, read the files as Blobs and put them into the XMLHttpRequest as described here
Community
  • 1
  • 1
geekonaut
  • 5,714
  • 2
  • 28
  • 30