Krajee

Bootstrap File Input Demo

Thankful to Krajee! BUY A COFFEEor to get more out of us.

Extension of scenario 2 for 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-704" name="kartik-input-704[]" type="file" accept="image/*" multiple>
</div>

<script>
$(document).ready(function() {
    $("#input-704").fileinput({
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        uploadUrl:  "/file-upload-batch/2",
        uploadAsync: false,
        overwriteInitial: false,
        minFileCount: 1,
        maxFileCount: 5,
        initialPreviewAsData: true // identify if you are sending preview data only and not the markup
    });
});
</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-704'; // 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;
}

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.

 
visitors to Krajee Jquery Plugins since 22-May-2017