Bootstrap Krajee file input, catching AJAX response

Question

I am using the Krajee Bootstrap File Input plugin to load via an AJAX call.

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

I use the following JS and PHP codes (codeigniter):

JS:

<script> $("#file-upload").fileinput({ 'allowedFileExtensions' : ['csv'], 'maxFileSize': 5120, 'maxFileCount': 1, 'uploadUrl': 'dashboard/uploader', 'elErrorContainer': '#errorBlock', 'uploadAsync': true, 'msgInvalidFileExtension': 'Invalid extension for file "{name}". Only "{extensions}" files are supported.', 'uploadExtraData': {csrf_token_name: $("input[name=csrf_token_name]").val()} }); </script> 

PHP:

 public function uploader(){ $config['upload_path'] = './csv_uploads/'; $config['allowed_types'] = 'csv'; $config['max_size'] = '5120'; $this->upload->initialize($config); if (!$this->upload->do_upload("file-upload")){ $data['error'] = 'The following error occured : '.$this->upload->display_errors().'Click on "Remove" and try again!'; echo json_encode($data); } else { echo json_encode("success"); } } 

Right now I get a response from PHP, whatever it is - a mistake or success, as in JSON, I looked at the plugin documentation and still can not find how to intercept the AJAX answer and act in accordance with this answer, as we do in jQuery. with ajax success function:

 success: function (response) { //Deal with the server side "response" data. }, 

How can i do this?

Answer 1

You can check the demo here live demo

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

Code example:

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

Answer 2

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

It depends on how you configured ajax loading in the plugin. The plugin offers two ajax boot modes - synchronous and asynchronous, as described in the documentation. This is asynchronous if the uploadAsync property uploadAsync set to true .

For the AJAX trap:

• You can use the filebatchuploadsuccess event to load synchronously
• You can use the fileuploaded event to asynchronously load

FOR AJAX ERROR TRAP:

• You can use the filebatchuploaderror event to synchronously load
• You can use the fileuploaderror event to asynchronously load

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

Answer 3

you can use this sample code in your test.in my test, my response data is 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 4

send this answer i did so

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 the ASHX File, add the 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 5

Ok, the file is uploaded instead of filebatchupsusuccess if successful ... works well !!!