title: Wordpress site - How to retain event.target.files in JQuery when moving between multiple ajax calls to PHP scripts?
body: <p>I'm about 2 months into learning <code>PHP</code> and <code>JQuery</code>, so please bear with me. :)</p>
  <p>I have a form with a button to add a new record. On button click, a modal opens for record entry, including a button to upload a file which, when clicked triggers an ajax call to a file upload PHP script. On submit of the modal, I use ajax to call a PHP script to save the file to the server and to save the record to the database with the url to the file saved on the server.</p>
  <p>The problem I'm running into is that because it's a new record, the id of the record is not known at the time of calling the PHP script to upload the file to the server. I have other use cases for handling file uploads on edit record that work as expected because the id of the record is known. So, I would like to avoid having to re-arrange existing code.</p>
  <p>After a ton of research and trying all kinds of recommendations for the past 2 weeks, I'm still not able to get this piece of functionality to work.</p>
  <p>Where I'm at now is that the ajax call is called twice for new records. On the 1st call, since the id is empty, it just exits the function. On the 2nd call when the id is known, it fails because now the event.target.files is undefined.</p>
  <p>One solution that I believe will work with existing code is to be able to retain event.target.files in a global variable (which I thought I was doing) so that it's still accessible for the 2nd ajax call. But, nothing I've tried has worked.</p>
  <p>Question - how can I retain event.target.files in a global variable to be accessible for the 2nd ajax call? Or, is there a better solution that will not disrupt the already working code for record edits? Am I simply passing the event incorrectly?</p>
  <p>Any help is greatly appreciated!</p>
  <p><strong>Here's relevant JS code</strong></p>
  <pre><code>jQuery(document).ready(function($) {
    var files;
    $('#file_input').on('change', function() { // 1st call after clicking 'upload file' in modal
      var files = document.getElementById('file_input').files[0];
      prepareUpload(e);
    });
  
    $(document.body).on(&quot;click&quot;, &quot;#submit-btn-modal&quot;, function(e) {
      e.preventDefault();
      post_record(e);
    });
  
  });
          
  function prepareUpload(e, count, new_recid) {
    if (count === 2) {
      var id = new_recid;
    } else {
        var prefix = $(&quot;#master_form_wrapper #prefix&quot;).val();
        var recid = $(&quot;#master_form_wrapper #&quot;+prefix+&quot;id&quot;).val();
        var id = parseInt(recid);
      }
    files = e.target.files; // errors here on 2nd call (Cannot read property 'name' of undefined)
    var data = new FormData();
    data.append(&quot;action&quot;, &quot;file_upload&quot;);
    data.append(&quot;id&quot;, id);
    $.each(files, function(key, value) {
      data.append(&quot;file_upload&quot;, value);
      });        
    $.ajax({
      url: general_globals.ajaxurl,
      type: 'POST',
      data: data,
      cache: false,
      dataType: 'json',
      processData: false, 
      contentType: false
    });
    } 
  }
  
  function post_record(e) {
    var counter = 1;
    var post = $(&quot;#master_form_wrapper form&quot;).serialize();
    var id = $(&quot;#master_form_wrapper #&quot;+prefix+&quot;id&quot;).val();
    var action = 'update_record';
    $.ajax({
      url: general_globals.ajaxurl,
      data: { action : action, post : post},
      type: &quot;post&quot;,
      success: function(response){
      if (response.search(&quot;ERROR: &quot;) === -1) {
        record = JSON.parse(response);
        var recordID = record.record_id;
        var recid = recordID.split('_').pop();
        var counter = 2;
        prepareUpload(e, counter, recid); // 2nd call after clicking 'submit' in modal
      }
    });
  }
  </code></pre>
  <p><strong>Here's relevant HTML</strong></p>
  <pre><code>&lt;body&gt;
    &lt;div id='modal_cover'&gt;
      &lt;div id='master_form_wrapper'&gt;
        &lt;span class='close'&gt;&lt;button class='close-modal'&gt;+&lt;/button&gt;&lt;/span&gt;
        &lt;form name='$table' id='$table' method='post' action='' class='upload_form' enctype='multipart/form-data'&gt;
          &lt;input type='hidden' name='prefix' id='prefix' value='$prefix'&gt;
          &lt;div class='field_wrapper'&gt;
            &lt;div id='file_upload' class='file-upload'&gt;
              &lt;input type='file' id='file_input' style='opacity:0;' /&gt;
              &lt;p class='file_upload_text'&gt;Click to upload file&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id='file_upload_preview' class='file-upload file-preview' style='display:none;'&gt;
              &lt;div class='file_preview'&gt;&lt;/div&gt;
                &lt;button id='fileurl' data-fileurl='' class='file_delete'&gt;Delete&lt;/button&gt;
            &lt;/div&gt;
            &lt;button id='submit-btn-modal' class='submit-btn-modal'&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>