Krajee

Font Awesome 6.x Theme Demo

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

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

Usage and demo of the Font Awesome 6.x Theme. You need to set the plugin theme property to fa6. This theme uses the icons from Font Awesome 6.x library. To ensure this theme works, you must pre-load the Font Awesome 6.x library assets/CSS.

Basic usage of Font Awesome 6.x Theme with an initial preview configuration and file extensions restricted to image files (jpg, png, gif). Note that you must load the CSS files and the JS files for the theme after fileinput.css and fileinput.js respectively. You must load the Font Awesome 6.x CSS for the theme to render the right icons. NOTE: The theme is responsive and will automatically style itself differently for mobile devices (you can test this by resizing your browser to less than 500px width).
<!-- FONT AWESOME 6.X THEME (BASIC) -->

<!-- load the CSS files in the right order -->
<link href="/path/to/css/fileinput.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">

<!-- load the JS files in the right order -->
<script src="/path/to/js/fileinput.js"></script>
<script src="/path/to/themes/fa6/theme.js"></script>

<div class="file-loading">
    <input id="inp-theme-fa6-1" name="inp-theme-fa6-1" type="file" multiple accept="image">
</div>
<script>
$("#inp-theme-fa6-1").fileinput({
    theme: "fa6",
    uploadUrl: "/file-upload-batch/2",
    allowedFileExtensions: ['jpg', 'png', 'gif'],
    overwriteInitial: false,
    initialPreviewAsData: true,
    maxFileSize: 10000,
    removeFromPreviewOnError: true,
    initialPreview: [
        "https://picsum.photos/id/101/1920/1080",
        "https://picsum.photos/id/102/1920/1080",
        "https://picsum.photos/id/103/1920/1080"
    ],
    initialPreviewConfig: [
        {caption: "picture-1.jpg", description: "<h5>Picture One</h5> This is a representative placeholder description for the first image.", size: 329892, width: "120px", url: "/site/file-delete", key: 101},
        {caption: "picture-2.jpg", description: "<h5>Picture Two</h5> This is a representative placeholder description for the second image.", size: 872378, width: "120px", url: "/site/file-delete", key: 102},
        {caption: "picture-3.jpg", description: "<h5>Picture Three</h5> This is a representative placeholder description for the third image.", size: 632762, width: "120px", url: "/site/file-delete", key: 103}
    ],
    initialPreviewDownloadUrl: 'https://picsum.photos/id/{key}/1920/1080' // the key will be dynamically replaced  
});
</script>
Advanced usage of Font Awesome 6.x theme with an initial preview configuration and allowing all file types, but only iconic previews for thumbnails. Files can be zoomed and previewed. You must load the Font Awesome 6.x CSS for the theme to render the right icons. This example also uses Font Awesome icons for loading the file icons and hence the Font Awesome CSS assets need to be loaded on your page. NOTE: The theme is responsive and will automatically style itself differently for mobile devices (you can test this by resizing your browser to less than 500px width).
<!-- FONT AWESOME 6.X THEME (ADVANCED) -->

<!-- load the CSS files in the right order -->
<link href="/path/to/css/fileinput.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">

<!-- load the JS files in the right order -->
<script src="/path/to/js/fileinput.js"></script>

<div class="file-loading">
    <input id="inp-theme-fa6-2" name="inp-theme-fa6-2[]" type="file" multiple>
</div>
<script>
<!-- must load the font-awesome.css for this example -->
$("#inp-theme-fa6-2").fileinput({
    theme: "fa6",
    uploadUrl: "/file-upload-batch/2",
    minFileCount: 2,
    maxFileCount: 5,
    maxFileSize: 10000,
    removeFromPreviewOnError: true,
    overwriteInitial: false,
    previewFileIcon: '<i class="fas fa-file"></i>',
    initialPreview: [
        // IMAGE DATA
       'https://picsum.photos/id/1071/1920/1080',
        // IMAGE RAW MARKUP
        '<img src="https://picsum.photos/id/1075/1920/1080" class="kv-preview-data file-preview-image">',
        // TEXT DATA
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleTextFile_10kb.txt',
        // PDF DATA
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
        // VIDEO DATA
        "https://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4"
    ],
    initialPreviewAsData: true, // defaults markup  
    initialPreviewConfig: [
        {caption: "Image 11.jpg", description: "<h5>File One</h5> This is an image file.", size: 762980, url: "/site/file-delete", downloadUrl: 'https://picsum.photos/id/1071/1920/1080', key: 1071},
        {previewAsData: false, description: "<h5>File Two</h5> This is also an image file.", size: 823782, caption: "Image 13.jpg", url: "/site/file-delete", downloadUrl: 'https://picsum.photos/id/1075/1920/1080', key: 1075}, 
        {caption: "Lorem Ipsum.txt", type: "text", description: "<h5>File Three</h5> This is a text file.", size: 1430, url: "/site/file-delete", key: 12}, 
        {type: "pdf", description: "<h5>File Four</h5> This is a PDF document.", size: 8000, caption: "PDF Sample.pdf", url: "/site/file-delete", key: 14}, 
        {type: "video", description: "<h5>File Five</h5> This is a Video file.", size: 375000, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: "/site/file-delete", key: 15} 
    ],
    uploadExtraData: {
        img_key: "1000",
        img_keywords: "happy, nature"
    },
    preferIconicPreview: true, // this will force thumbnails to display icons for following file extensions
             previewFileIconSettings: { // configure your icon file extensions
            'doc': '<i class="fa-solid fa-file-word text-primary"></i>',
            'xls': '<i class="fa-solid fa-file-excel text-success"></i>',
            'ppt': '<i class="fa-solid fa-file-powerpoint text-danger"></i>',
            'pdf': '<i class="fa-solid fa-file-pdf text-danger"></i>',
            'zip': '<i class="fa-solid fa-file-archive text-muted"></i>',
            'htm': '<i class="fa-solid fa-file-code text-info"></i>',
            'txt': '<i class="fa-solid fa-file-alt text-info"></i>',
            'mov': '<i class="fa-solid fa-file-video text-warning"></i>',
            'mp3': '<i class="fa-solid fa-file-audio text-warning"></i>',
            // note for these file types below no extension determination logic 
            // has been configured (the keys itself will be used as extensions)
            'jpg': '<i class="fa-solid fa-file-image text-danger"></i>', 
            'gif': '<i class="fa-solid fa-file-image text-muted"></i>', 
            'png': '<i class="fa-solid fa-file-image text-primary"></i>'    
        },
    previewFileExtSettings: { // configure the logic for determining icon file extensions
        'doc': function(ext) {
            return ext.match(/(doc|docx)$/i);
        },
        'xls': function(ext) {
            return ext.match(/(xls|xlsx)$/i);
        },
        'ppt': function(ext) {
            return ext.match(/(ppt|pptx)$/i);
        },
        'zip': function(ext) {
            return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
        },
        'htm': function(ext) {
            return ext.match(/(htm|html)$/i);
        },
        'txt': function(ext) {
            return ext.match(/(txt|ini|csv|java|php|js|css)$/i);
        },
        'mov': function(ext) {
            return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
        },
        'mp3': function(ext) {
            return ext.match(/(mp3|wav)$/i);
        }
    }
});
</script>
Variation of theme rendering with hidden thumbnail content in preview. This will only display the file name and file size as defined in the layout templates and hide the thumbnail content. You must load the Font Awesome 6.x CSS for the theme to render the right icons.
<!-- FONT AWESOME 6.X THEME (ADVANCED) -->

<!-- load the CSS files in the right order -->
<link href="/path/to/css/fileinput.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">
<link href="/path/to/themes/explorer/theme.css" rel="stylesheet">

<!-- load the JS files in the right order -->
<script src="/path/to/js/fileinput.js"></script>
<script src="/path/to/themes/explorer/theme.js"></script>

<div class="file-loading">
    <input id="input-ke-3" name="input-ke-3[]" type="file" multiple>
</div>
<script>
<!-- must load the font-awesome.css for this example -->
$("#input-ke-3").fileinput({
    hideThumbnailContent: true, // hide image, pdf, text or other content in the thumbnail preview
    theme: "fa6",
    uploadUrl: "/file-upload-batch/2",
    minFileCount: 2,
    maxFileCount: 5,
    overwriteInitial: false,
    initialPreview: [
        // IMAGE DATA
       'https://picsum.photos/id/718/1920/1080',
        // IMAGE RAW MARKUP
        '<img src="https://picsum.photos/id/719/1920/1080" class="kv-preview-data file-preview-image">',
        // TEXT DATA
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleTextFile_10kb.txt',
        // PDF DATA
        'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
        // VIDEO DATA
        "https://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4"
    ],
    initialPreviewAsData: true, // defaults markup  
    initialPreviewConfig: [
        {caption: "Business 1.jpg", description: "<h5>File One</h5> This is an image file.", size: 762980, url: "/site/file-delete", key: 11},
        {previewAsData: false, description: "<h5>File Two</h5> This is an image file.", size: 823782, caption: "Business 2.jpg", url: "/site/file-delete", key: 13}, 
        {caption: "Lorem Ipsum.txt", type: "text", description: "<h5>File Three</h5> This is a Text file.", size: 1430, url: "/site/file-delete", key: 12}, 
        {type: "pdf", description: "<h5>File Four</h5> This is a PDF document.", size: 8000, caption: "PDF Sample.pdf", url: "/site/file-delete", key: 14}, 
        {type: "video", description: "<h5>File Five</h5> This is a Video file.", size: 375000, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: "/site/file-delete", key: 15},  
    ],
    uploadExtraData: {
        img_key: "1000",
        img_keywords: "happy, nature",
    },
});
</script>

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