Krajee Bootstrap File Input, catching AJAX success response

Question

I\'m using Krajee the Bootstrap File Input plugin to perform an upload via AJAX call.

Here is the link to the Krajee plugin AJAX section: Krajee plugin AJAX

The

Answer 1

<?php echo $form->field($model, 'icon_path')->widget(FileInput::classname(), [
        'options'           =>  ['accept' => 'image/*','multiple'=>false, 'id' => 'category_icon_image'],
        'pluginLoading'     =>  false,
        'pluginOptions'     =>  [
        'initialPreview'        =>  (!$model->isNewRecord) ? [
            'web/filebox/'.$model->icon_path
        ] : '',
            'initialPreviewAsData'  =>  true,
            'browseIcon'            =>  '<i class="glyphicon glyphicon-camera"></i> ',
            'showPreview'           =>  true,
            'showCaption'           =>  false,
            'showRemove'            =>  false,
            'showUpload'            =>  false,
            'showClose'             =>  false,
            'previewTemplates'      =>  'object',
            'layoutTemplates'       =>  'preview',
            'uploadUrl'             =>  'category-item/category-item/ajax-image-upload',
            'uploadAsync'           =>  false,
            'deleteUrl'             =>  Url::toRoute('category-item/delete-image?id='.$model->category_item_id)
        ],
        'pluginEvents'  =>  [
            'filebatchuploadsuccess' => 'function(event, data, previewId, index) {
                console.log(data.response)
            }',
            'filebatchselected' => "function(event,files){
                var input = $('#category_icon_image');
                input.fileinput('upload');
                $('#categoryitem-icon_path_pre').val(files[0].name);
            }",
        ],
    ])
?>

Answer 2

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);
});

Answer 3

refer this answer, i have done like this

javascript :

$('#input-id').on('fileuploaded', function(event, data, previewId, index) {
    var form = data.form, files = data.files, extra = data.extra,
        response = data.response, reader = data.reader;
    console.log('File uploaded successfully : ID '+ data.response.d);
});

In ASHX File add response to the context:

context.Response.ContentType = "application/json";
string myId = "NewwId 1";
var wrapper = new { d = myId };
context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(wrapper));

Answer 4

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.

Answer 5

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);