Extension of scenario 5 to trigger auto upload immediately after files are dragged & dropped (OR when files are selected via browse button). Note that the filebatchselected event is used to trigger the auto upload. We will HIDE the upload button for this scenario and set the browseOnZoneClick property to true. Like scenario 5, this incorporates synchronous batch uploads in which you can dynamically setup the initialPreview and initialPreviewConfig immediately after upload at runtime. For this you must return the initialPreview, initialPreviewConfig, and append properties within a JSON object from your server. Refer to the documentation for receiving data on server or sending data from server in synchronous mode.

The example below contains an example of a PHP server code that can respond with such a JSON as mentioned above.

Code

<div class="file-loading">
    <input id="input-705" name="kartik-input-705[]" type="file" accept="image/*" multiple>
</div>

<script>
$(document).ready(function() {
var $el1 = $("#input-705");
$el1.fileinput({
    allowedFileExtensions: ['jpg', 'png', 'gif'],
    uploadUrl: "/file-upload-batch/2",
    uploadAsync: true,
    deleteUrl: "/site/file-delete",
    showUpload: false, // hide upload button
    overwriteInitial: false, // append files to initial preview
    minFileCount: 1,
    maxFileCount: 5,
    browseOnZoneClick: true,
    initialPreviewAsData: true,
}).on("filebatchselected", function(event, files) {
    $el1.fileinput("upload");
});
});
</script>

Server Code (PHP Example)

// example of a PHP server code that is called in `uploadUrl` above
// file-upload-batch script
header('Content-Type: application/json'); // set json response headers
$outData = upload(); // a function to upload the bootstrap-fileinput files
echo json_encode($outData); // return json data
exit(); // terminate

// main upload function used above
// upload the bootstrap-fileinput files
// returns associative array
function upload() {
    $preview = $config = $errors = [];
    $input = 'kartik-input-705'; // the input name for the fileinput plugin
    if (empty($_FILES[$input])) {
        return [];
    }
    $total = count($_FILES[$input]['name']); // multiple files
    $path = '/uploads/'; // your upload path
    for ($i = 0; $i < $total; $i++) {
        $tmpFilePath = $_FILES[$input]['tmp_name'][$i]; // the temp file path
        $fileName = $_FILES[$input]['name'][$i]; // the file name
        $fileSize = $_FILES[$input]['size'][$i]; // the file size
        
        //Make sure we have a file path
        if ($tmpFilePath != ""){
            //Setup our new file path
            $newFilePath = $path . $fileName;
            $newFileUrl = 'http://localhost/uploads/' . $fileName;
            
            //Upload the file into the new path
            if(move_uploaded_file($tmpFilePath, $newFilePath)) {
                $fileId = $fileName . $i; // some unique key to identify the file
                $preview[] = $newFileUrl;
                $config[] = [
                    'key' => $fileId,
                    'caption' => $fileName,
                    'size' => $fileSize,
                    'downloadUrl' => $newFileUrl, // the url to download the file
                    'url' => 'http://localhost/delete.php', // server api to delete the file based on key
                ];
            } else {
                $errors[] = $fileName;
            }
        } else {
            $errors[] = $fileName;
        }
    }
    $out = ['initialPreview' => $preview, 'initialPreviewConfig' => $config, 'initialPreviewAsData' => true];
    if (!empty($errors)) {
        $img = count($errors) === 1 ? 'file "' . $error[0]  . '" ' : 'files: "' . implode('", "', $errors) . '" ';
        $out['error'] = 'Oh snap! We could not upload the ' . $img . 'now. Please try again later.';
    }
    return $out;
}