What happens between uploading a file to an HTML f

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 then clicked the red X to delete it, but I want to make sure that it was really deleted.

Inspecting the element that is the Select files button I see that its HTML is

input id="gform_browse_button_5_6" value="Select files" class="button gform_button_select_files" aria-describedby="extensions_message" tabindex="9" style="position: relative; z-index: 1;" type="button">

Based on my knowledge of JavaScript I should go to look at the code that controls the id gform_browse_button_5_6 or the class button gform_button_select_files (which one?) however there are a gajillion scripts in the source code.

1. How do I use the inspector in Firefox to pinpoint where either the id or class is located or 2. Generally speaking is my resume safe between uploading it and submitting the form? I read previously that after submitting the files are stored in a temporary folder on the server that can then be processed by PHP 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 (probably updated the page with AJAX)?

UPDATE: I found one place where gform_button_select_files class is handled in https://studyhut.com/wp-content/plugins/gravityforms/js/gravityforms.min.js?ver=2.0.7 and the code is

b(document).ready(function(){"undefined"!=typeof adminpage&&"toplevel_page_gf_edit_forms"===adminpage||"undefined"==typeof plupload?b(".gform_button_select_files").prop("disabled",!0):"undefined"!=typeof adminpage&&adminpage.indexOf("_page_gf_entries")>-1&&b(".gform_fileupload_multifile").each(function(){c(this)})}),a.setup=function(a){c(a)}}(window.gfMultiFileUploader=window.gfMultiFileUploader||{},jQuery);var __gf_keyup_timeout;jQuery(document).on("change keyup",".gfield_trigger_change input, .gfield_trigger_change select, .gfield_trigger_change textarea",function(a){gf_raw_input_change(a,this)}),!window.rgars,!window.rgar,String.prototype.format=function(){var a=arguments;return this.replace(/{(\d+)}/g,function(b,c){return"undefined"!=typeof a[c]?a[c]:b})};

Does this mean anything to anyone or is it pretty much meant to be human unreadable?

Update II It looks like c is defined inside another function

)}};!function(a,b){function c(c){function g(a,c){b("#"+a).prepend("<li>"+c+"</li>")}

Gravity forms js src

• https://studyhut.com/wp-content/plugins/gravityforms/js/jquery.json.js?ver=2.0.7

• /* ![CDATA[ / var gform_gravityforms = {"strings":{"invalid_file_extension":"This type of file is not allowed. Must be one of the following: ","delete_file":"Delete this file","in_progress":"in progress","file_exceeds_limit":"File exceeds size limit","illegal_extension":"This type of file is not allowed.","max_reached":"Maximum number of files reached","unknown_error":"There was a problem while saving the file on the server","currently_uploading":"Please wait for the uploading to complete","cancel":"Cancel","cancel_upload":"Cancel this upload","cancelled":"Cancelled"},"vars":{"images_url":"https://studyhut.com/wp-content/plugins/gravityforms/images"}}; / ]]> */

• https://studyhut.com/wp-content/plugins/gravityforms/js/gravityforms.min.js?ver=2.0.7

• https://studyhut.com/wp-content/plugins/gravityforms/js/conditional_logic.min.js?ver=2.0.7
• https://studyhut.com/wp-includes/js/plupload/plupload.full.min.js?ver=2.1.8
• https://studyhut.com/wp-content/plugins/gravityforms/js/jquery.maskedinput.min.js?ver=2.0.7

Finally This is the HTML for clicking on the delete button

img class="gform_delete" src="https://studyhut.com/wp-content/plugins/gravityforms/images/delete.png" onclick="gformDeleteUploadedFile(5,6, this);" onkeypress="gformDeleteUploadedFile(5,6, this);" alt="Delete this file" title="Delete this file">

and here is the gformDeleteUploadedFile function

function gformDeleteUploadedFile(a,b,c){var d=jQuery("#field_"+a+"_"+b),e=jQuery(c).parent().index();d.find(".ginput_preview").eq(e).remove(),d.find('input[type="file"]').removeClass("gform_hidden"),d.find(".ginput_post_image_file").show(),d.find('input[type="text"]').val("");var f=jQuery("#gform_uploaded_files_"+a).val();if(f){var g=jQuery.secureEvalJSON(f);if(g){var h="input_"+b,i=d.find("#gform_multifile_upload_"+a+"_"+b);if(i.length>0){g[h].splice(e,1);var j=i.data("settings"),k=j.gf_vars.max_files;jQuery("#"+j.gf_vars.message_id).html(""),g[h].length<k&&gfMultiFileUploader.toggleDisabled(j,!1)}else g[h]=null;jQuery("#gform_uploaded_files_"+a).val(jQuery.toJSON(g))}}}

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.