JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<div class = "col-md-6 upload-form">
    <div class= "upload-response"></div>
    <div class = "form-group">
 
        <input type = "file" name = "files[]" accept = "image/*" class = "files-data form-control" />
    </div>
    <div class = "form-group">
        <input type = "submit" value = "Upload" class = "btn btn-primary btn-upload" />
    </div>
</div>

JavaScript

$(document).ready(function() {
    // When the Upload button is clicked...
    $('body').on('click', '.upload-form .btn-upload', function(e){
        e.preventDefault;

        var fd = new FormData();
        var files_data = $('.upload-form .files-data'); // The <input type="file" /> field
        
        // Loop through each data and create an array file[] containing our files data.
    //    $.each($(files_data), function(i, obj) {
            $.each(files_data.files,function(j,file){
                fd.append('files[' + j + ']', file);
            });
    //    });
        
      console.log(fd);

    });
});