What happens between uploading a file to an HTML form and submitting it?

Question

What happens to a file after it is uploaded into an HTML form but before it is submitted?

I uploaded my resume to this website https://studyhut.com/employment/ and t

Answer 1

From what I can see your resume is not safe it is sent to the server on uploaded via an ajax post. You can see this from the network tab of your inspector when clicking upload. Once it's going to the server there is nothing you can do to see where what they are doing with that file.

One thing though, this is a site built on WordPress using gravity forms for the upload, you could look further into that and what it expects you to do at the back-end (common practices) if you are interested but there is still no assurance what they are doing at the back-end

Update:

After taking another look at this, I think that the server does not delete the file you have uploaded. Again by checking your network tab on upload, you will see an ajax request is made to the server via a POST, now when you click delete no request is made to the server and a change is only made on the front-end you would expect a DELETE request to go through but it doesn't. So the server is keeping your upload, no way of knowing what they are doing with it though. It could be that they will delete it if not linked to anything after some time or just keeping it forever.

The first ajax request looks to be initiated via the https://studyhut.com/wp-includes/js/plupload/plupload.full.min.js?ver=2.1.8 plugin

Answer 2

What happens to a file after it is uploaded into an HTML form but before it is submitted?

but what is going on at the time that I Selected a file to upload and it shows the file name with the option to delete it

Note that it is now possible to set the .files property of an <input type="file"> element to a FileList object having .length 0 and containing no File objects, see Make .files settable #2866.

<input type="file" />
<input type="button" value="Delete Files" />
<script>
  const input = document.querySelector("input[type=file]");
  const button = document.querySelector("input[type=button]");

  let files = input.files; // `FileList` object
  
  console.log(files);
  // set `.files` of `<input type="file">` to `FileList`
  const setFiles = (element, files) => {
    if (element.files.length) {
      element.files = files; // set `.files` of `<input>` element
      console.log(element, element.files);
    }
  };

  input.onchange = () => {
    if (input.files.length > 0) {
      // do stuff
      console.log(input.files);
    }
  }

  button.onclick = () => {
    setFiles(input, files);
  }
</script>

Cannot be certain that the code at the document that you are referencing performs the same procedure without viewing the full HTML and JavaScript used at the document.