JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<form method="post" action="add_products.php?mode=add_images" enctype="multipart/form-data" id="extra_img_form">
  <input name="pictures[]" type="file" class="upload_extra_imgs"/>
  <input name="pictures[]" type="file" class="upload_extra_imgs"/>
  <input name="pictures[]" type="file" class="upload_extra_imgs"/>
  <input name="upload_images" type="button" value="Upload" class="gallery_btn" id="upload_btn"/>

JavaScript

function upload_fail(){
alert('Sry we coulnd\'t upload the files');
}
$(document).ready(function(e) {
   $('#upload_btn').click(function(){

    var fileInput = $('.upload_extra_imgs');
    var fileInputName = 'pictures';

    //var form = document.getElementById("extra_img_form"); <- Didn't work either :/
    var data = new FormData();
    jQuery.each($(fileInput), function(i) {
        var file = this.files[0];
        if(typeof file != 'undefined'){
            fileName = file.name;
            console.log('fileName->'+fileName); // So far everything works... i do get the correct file name here
            data.append('image_'+i, file);
        }
    });
    console.log(data); // I'm not quite sure what this should output but i can't see anything related to the image i just uploaded in this object.

    $('body').css('cursor','wait');
    $.ajax({
        url: '/echo/html/',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function(data){
            var data = $(data); 
            message = data.filter('pre').text();
            $('body').css('cursor','default');
            alert('Message->'+message);
        },
         error: upload_fail    
    }); 

});
});