Upload files with HTML/PHP/AJAX and especially SweetAlert2/jquery_file_upload

Question

I want to upload file from HTML to my server with PHP and js library SweetAlert2.

It work if I do that

swal({
    html: '<form action="script/php/upload.php" method="post" enctype="multipart/form-data"><input name=\"upload[]\" id="fileToUpload" accept= "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" multiple></input></form>'
})

But I don't completely use power of "SweetAlert2" so I try this JAVASCRIPT/AJAX

swal({
    input: 'file',
    inputAttributes: {
        name:"upload[]",
        id:"fileToUpload",
        accept: "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        multiple:"multiple"
    },
    showCloseButton: true,
    showCancelButton: true
}).then(function() {
    var formData = new FormData();
    formData.append('fileToUpload', $('#fileToUpload')[0]);
    $.ajax({type:"POST",url:"script\\php\\upload.php",data: formData,processData: false,contentType: false,headers:{"Content-Type":"multipart/form-data"},async:false});
})

But it doesn' work...

My PHP like that

$total = count($_FILES['upload']['name']);
echo($total);

for($i=0; $i<$total; $i++) {
  $tmpFilePath = $_FILES['upload']['tmp_name'][$i];

  if ($tmpFilePath != ""){
    $newFilePath = "d:/web/site_sig_cclo/site_3_administration/script/python/" . $_FILES['upload']['name'][$i];

    if(move_uploaded_file($tmpFilePath, $newFilePath)) {
    }
  }
}

And echo always return 0

------EDIT 2016 10 05------

My PHP is launched with this Post value

------EDIT 2016 10 06------

If I use console.log on my input file after that .then(function(file) { I've :

And if I do the same on my FormData it seems to be empty :

------EDIT 2016 10 12------

I try a technic with the script jquery_file_upload

I load input in my swal

swal({
    title: "Input title",
    html: '<input id="fileupload" type="file" name="files[]" multiple>'
});

And after I load my scripts with jquery function for fileupload

$.getScript("script/jquery_file_upload/js/vendor/jquery.ui.widget.js");
$.getScript("script/jquery_file_upload/js/jquery.iframe-transport.js");
$.getScript("script/jquery_file_upload/js/jquery.fileupload.js", function(){
    $("#fileupload").fileupload({
        url:"script/python",
        dataType: 'json',
        add: function (e, data) {
            data.context  = $('#fileuploadname').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

If I do console.log on data values I can see all it work, but on my server I've nothing...

Answer 1

The solution is to open swal function

swal({
    title: "Input title",
    html: '<input id="fileupload" type="file" name="files[]" multiple>'
}).then(function() {
    (...)
}

And after load scripts with jquery function for fileupload at the same level like swal. In this script it's necessary to call the php code for upload files

$.getScript("script/jquery_file_upload/js/vendor/jquery.ui.widget.js");
$.getScript("script/jquery_file_upload/js/jquery.iframe-transport.js");
$.getScript("script/jquery_file_upload/js/jquery.fileupload.js", function(){
    $("#fileupload").fileupload({
        url:"script/php/myuploadphp.php",
        dataType: 'json',
        add: function (e, data) {
            data.context  = $('#fileuploadname').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

And in PHP write that

$tmpFilePath = $_FILES['files']['tmp_name'][0];

      if ($tmpFilePath != ""){
        $newFilePath = "destination_folder" . $_FILES['files']['name'][0];
      }

And that's work !