Javascript Image Upload change from drag drop to file select

[happypete]

I have an image upload script which works file on desktop but not on mobile so I am trying to change the drag drop file input to select multiple files.

original:

    <!-- DROP ZONE -->
    <div id="uploader">
      <div class="drop">Drop Files Here</div>
    </div>

/* !! UPDATE : AJAX IS ASYNCHRONOUS !! */
/* We do not want users to dump 100 files & upload all at the same time */
/* This will create sort of a queue system & upload one at a time */
var upcontrol = {
  queue : null, // upload queue
  now : 0, // current file being uploaded
  start : function (files) {
  // upcontrol.start() : start upload queue

    // WILL ONLY START IF NO EXISTING UPLOAD QUEUE
    if (upcontrol.queue==null) {
      // VISUAL - DISABLE UPLOAD UNTIL DONE
      upcontrol.queue = files;
      document.getElementById('uploader').classList.add('disabled');

      // PROCESS UPLOAD - ONE BY ONE
      upcontrol.run();
    }
  },
  run : function () {
  // upcontrol.run() : proceed upload file

    var xhr = new XMLHttpRequest(),
        data = new FormData();
    data.append('file-upload', upcontrol.queue[upcontrol.now]);
    xhr.open('POST', 'process.php', true);
    xhr.onload = function (e) {
      // SHOW UPLOAD STATUS
      var fstat = document.createElement('div'),
          txt = upcontrol.queue[upcontrol.now].name + " - ";
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          // SERVER RESPONSE
          txt += xhr.responseText;
        } else {
          // ERROR
          txt += xhr.statusText;
        }
      }
      fstat.innerHTML = txt;
      document.getElementById('upstat').appendChild(fstat);
	  


      // UPLOAD NEXT FILE
      upcontrol.now++;
      if (upcontrol.now < upcontrol.queue.length) {
        upcontrol.run();
      }
      // ALL DONE
 
      else {
        upcontrol.now = 0;
        upcontrol.queue = null;
        document.getElementById('uploader').classList.remove('disabled');
		
		// callback text done!
		done.innerHTML = "Uploads Complete";
        document.getElementById('done').appendChild(done);
		
      }
    };
    xhr.send(data);
  }
};


window.addEventListener("load", function () {
  // IF DRAG-DROP UPLOAD SUPPORTED
  if (window.File && window.FileReader && window.FileList && window.Blob) {
    /* [THE ELEMENTS] */
    var uploader = document.getElementById('uploader');

    /* [UPLOAD MECHANICS] */
    // STOP THE DEFAULT BROWSER ACTION FROM OPENING THE FILE
    uploader.addEventListener("dragover", function (e) {
      e.preventDefault();
      e.stopPropagation();
    });

    uploader.addEventListener("drop", function (e) {
      e.preventDefault();
      e.stopPropagation();
      uploader.classList.remove('highlight');
      upcontrol.start(e.dataTransfer.files);
    });

New

<input type="file" id="uploader" name="files[]" accept="image/jpeg, image/jpg, image/gif, image/png" multiple/>

This bit the same as before

/* !! UPDATE : AJAX IS ASYNCHRONOUS !! */
/* We do not want users to dump 100 files & upload all at the same time */
/* This will create sort of a queue system & upload one at a time */
var upcontrol = {
  queue : null, // upload queue
  now : 0, // current file being uploaded
  start : function (files) {
  // upcontrol.start() : start upload queue

    // WILL ONLY START IF NO EXISTING UPLOAD QUEUE
    if (upcontrol.queue==null) {
      // VISUAL - DISABLE UPLOAD UNTIL DONE
      upcontrol.queue = files;
      document.getElementById('uploader').classList.add('disabled');

      // PROCESS UPLOAD - ONE BY ONE
      upcontrol.run();
    }
  },
  run : function () {
  // upcontrol.run() : proceed upload file

    var xhr = new XMLHttpRequest(),
        data = new FormData();
    data.append('file-upload', upcontrol.queue[upcontrol.now]);
    xhr.open('POST', 'process.php', true);
    xhr.onload = function (e) {
      // SHOW UPLOAD STATUS
      var fstat = document.createElement('div'),
          txt = upcontrol.queue[upcontrol.now].name + " - ";
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          // SERVER RESPONSE
          txt += xhr.responseText;
        } else {
          // ERROR
          txt += xhr.statusText;
        }
      }
      fstat.innerHTML = txt;
      document.getElementById('upstat').appendChild(fstat);
	  


      // UPLOAD NEXT FILE
      upcontrol.now++;
      if (upcontrol.now < upcontrol.queue.length) {
        upcontrol.run();
      }
      // ALL DONE
 
      else {
        upcontrol.now = 0;
        upcontrol.queue = null;
        document.getElementById('uploader').classList.remove('disabled');
		
		// callback text done!
		done.innerHTML = "Uploads Complete";
        document.getElementById('done').appendChild(done);
		
      }
    };
    xhr.send(data);
  }
};

And this is where I am stuck. I'm trying to convert the drop to a select multiple files so need to change the "dataTransfer.files;"

  	window.addEventListener("change", function(e) {
	e.preventDefault();
	e.stopPropagation();
	
///I believe this bit below is what needs changing????
	upcontrol.start(e.dataTransfer.files);

I get this far, and the console give the following error:

"Uncaught TypeError: Cannot read property 'files' of undefined"

Edited April 20, 2019 by happypete

[requinix]

e is an event object. e.target is the object firing the event (the select). You can get the files from it.

[happypete]

Awesome, thanks, that worked:

 

  	window.addEventListener("change", function(e) {
	e.preventDefault();
	e.stopPropagation();
	upcontrol.start(e.target.files);