CODEWITHSUNDEEP
javascriptphphtmljqueryajax
Mahbub Rashid Tonoy
Mahbub Rashid Tonoy

Reputation: 95

Upload files when it selected

I am trying to make an input field. I want it when I select files, it automatically uploads them without pressing any upload button. here is my code. not mentioning the CSS because it is irrelevant. but if you need it I'll provide it.

//html

<!-- some codes here-->
<input type="file" id="fileUpload" multiple="true" />
<!-- some codes here-->

//javascript

$(document).ready(() => {
  $("#fileUpload").on("change", (e)=>{
    var formData = new FormData();
    var files = e.originalEvent.dataTransfer.files;
    for (var i = 0; i < files.length; i++) {
      formData.append("file[]", files[i]);
    }
    uploadFormData(formData);
  });

  function uploadFormData(form_data) {
    $.ajax({
      url: ".uploader.php",
      method: "POST",
      data: form_data,
      contentType: false,
      cache: false,
      processData: false,
      success: function (data) {
        $("#filenames").html(data);
        $(".alert-container div").removeClass("alert-box alert-err");
        $(".alert-container div").addClass("alert-box alert-ok");
        $("#alertCheck").prop( "checked", true );
        setTimeout(()=>{
          $("#alertCheck").prop( "checked", false );
        }, 5000);
      },
      error: function (data) {
        $(".alert-container div").removeClass("alert-box alert-ok");
        $(".alert-container div").addClass("alert-box alert-err");
        console.log("err");
      },
    });
  }
});

Upvotes: 1

Views: 258

Answers (2)

1058u4
1058u4

Reputation: 172

Does this work? var files = $("#fileUpload").prop('files');

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is due to the way you're accessing the files collection from the event. The code you're using right now works for custom jQueryUI event handlers, yet you're using a standard change event handler. As such you need to change this line:

var files = e.originalEvent.dataTransfer.files;

To this:

var files = e.target.files;

Upvotes: 1

Related Questions