Krajee Bootstrap File Input, catching AJAX success response

You can read the events section on the plugin documentation page to understand the various events provided by the plugin.

It depends on how you have setup the ajax upload in the plugin. The plugin offers two ajax upload modes - synchronous and asynchronous as described in the documentation. Its asynchronous if you have uploadAsync property set to true.

FOR AJAX SUCCESS TRAP:

  • you can use the filebatchuploadsuccess event for synchronous uploads
  • you can use fileuploaded event for asynchronous uploads

FOR AJAX ERROR TRAP:

  • you can use the filebatchuploaderror event for synchronous uploads
  • you can use fileuploaderror event for asynchronous uploads

In your case you have set uploadAsync set to true - so use the asynchronous settings/events.


you can use this sample code in your test.in my test,my response data like this:

response data:
{
"ver":"1.0",
"ret":true,
"errmsg":null,
"errcode":0,
"data":{
    "status":"upload success",
    "originalFilename":"testFileName.txt",
    "fileName":"excelFile",
    "fileType":"text/plain",
    "fileSize":1733
}

 javascript code:
 $('#input-id').on('fileuploaded', function(event, data, previewId, index) {
    var response = data.response;
    if(response.ret ) {
        alert("upload success!"+data.response.data);
    }else{
        alert("upload failed!"+response.errmsg)
    }
    alert('File uploaded triggered'+form+"response:"+response);
    console.info(response.data);
});

You can check out a demo here live demo

Remember to set uploadAsync false if you want the success event fire

Example code:

JS

$("#input-id").fileinput({
    showRemove:false,
    showPreview: false,
    uploadUrl: "../xxxx/xxxx/XXXXXX.php", // server upload action
    uploadAsync: false,
    uploadExtraData: function() {
        return {
            bdInteli: xxxx
        };
    }
});

// CATCH RESPONSE
$('#input-id').on('filebatchuploaderror', function(event, data, previewId, index) {
var form = data.form, files = data.files, extra = data.extra, 
    response = data.response, reader = data.reader;
});

$('#input-id').on('filebatchuploadsuccess', function(event, data, previewId, index) {
    var form = data.form, files = data.files, extra = data.extra, 
    response = data.response, reader = data.reader;
    alert (extra.bdInteli + " " +  response.uploaded);
});

PHP

$nombre = $_FILES["ficheroExcel"]["name"];
$bdInteli = $_POST['bdInteli'];
if (move_uploaded_file($_FILES["ficheroExcel"]["tmp_name"], $nombre) ){
    $output = array('uploaded' => 'OK' );
} else {
   $output = array('uploaded' => 'ERROR' );
}
echo json_encode($output);