2

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

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))}}}
Vons
  • 3,277
  • 2
  • 16
  • 19
  • 2
    No way to know how it is handled server side unless you control that code – charlietfl Oct 08 '17 at 22:09
  • @charlietfl Note, it is now possible to set `.files` property of `` element – guest271314 Oct 08 '17 at 22:57
  • @guest271314 but that has nothing to do with knowing what happens server side when you *"delete"* a previous upload – charlietfl Oct 08 '17 at 23:01
  • @charlietfl See OP at _"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"_ though granted the text of the Question also includes _"I read previously that after submitting the files are stored in a temporary folder on the server that can then be processed by PHP"_ – guest271314 Oct 08 '17 at 23:09
  • Where is `c` defined? – guest271314 Oct 09 '17 at 01:53
  • @guest271314 The function c looks like it is defined inside another one – Vons Oct 09 '17 at 02:28
  • To determine what occurs, or does not occur, we would need to view all of the relevant files – guest271314 Oct 09 '17 at 02:31
  • There were six script elements related to gravityforms – Vons Oct 09 '17 at 02:59

2 Answers2

2

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

Kartik Prasad
  • 730
  • 7
  • 18
1

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.

guest271314
  • 1
  • 15
  • 104
  • 177
  • `element.files = files` appears to do nothing – Vons Oct 11 '17 at 06:41
  • 1
    @Vons _"`element.files = files` appears to do nothing"_ Not sure what you mean? At both Chromium and Firefox the `.files` property of `element` is set to a `FileList` object having `.length` of `0` containing no `File` objects – guest271314 Oct 11 '17 at 13:12
  • I mean from `let files = input.files` and `button.onclick = () => { setFiles(input, files); }` it would seem that the statement `element.files = files` attempts to set the `.files` of `element` (which is `input`) to `input.files` again – Vons Oct 11 '17 at 17:48
  • Yes, that is one way to remove the file object uploaded though before `
    ` is submitted, by setting `.files` to a `FileList` object which does not contain any `File` objects.
     – guest271314 Oct 12 '17 at 00:32
  • It's not working on my Firefox - I click Run code snippet above then upload a file then delete but the `FileList` was still length `1` – Vons Oct 12 '17 at 05:42
  • @Vons At Firefox 57 the `FileList` has a `.length` of `0` after `` is clicked. At which version of Firefox did you try stacksnippets? – guest271314 Oct 12 '17 at 05:47
  • Firefox version 56 – Vons Oct 12 '17 at 06:48
  • 1
    No, should I? I guess I'll try it – Vons Oct 12 '17 at 06:53