How to Use Upload Button From Krajee in Javascript

bootstrap-fileinput

Financial Contributors on Open Collective Latest Stable Version License Packagist Downloads Monthly Downloads

An enhanced HTML 5 file input for Bootstrap five.x, 4.ten, and 3.x with file preview for various files, offers multiple selection, resumable clamper uploads, and more than. The plugin allows you lot a simple way to setup an advanced file picker/upload command built to piece of work specially with Bootstrap 5.ten, 4.ten, and 3.10 CSS3 styles. It enhances the file input functionality further, past offering support to preview a wide multifariousness of files i.east. images, text, html, video, audio, wink, and objects. In addition, information technology includes AJAX based uploads, dragging & dropping files, viewing upload progress, and selectively previewing, calculation, or deleting files.

NEW: Bootstrap 5.x support is added from v5.2.0 (major release after v5.ane.5) of the plugin. With v5.ii.0, the plugin is able to automatically detect the bootstrap library version and deliver the relevant bootstrap specific functionality (if the bootstrap library JS file is loaded). Alternatively, check the $.fn.fileinputBsVersion setting for advanced use cases to avoid Bootstrap version detection problems.

NOTE: Version five.x is a significant rewrite. With version 5.x, the plugin lawmaking has been revamped with enhanced file management, resumable chunk uploads support, and other new features. You tin can go through the various airtight enhancements and features and documented for Release five.10 milestone.

Krajee Default Theme

Notation: An alternative new Krajee Explorer Theme (preview shown below) for bootstrap-fileinput has been released and available since v4.3.vii. For more theming options and suggestions refer the theming demos.

Krajee Explorer Theme

Documentation and Demo

View the plugin documentation and plugin demos at Krajee JQuery plugins.

Pre-requisites

Bootstrap 5.x or 4.x, or 3.x
Latest JQuery
Well-nigh modern browsers supporting HTML5 (inputs and FileReader API) including CSS3 & JQuery. For Net Explorer, i must utilize IE versions x and in a higher place. IE9 and beneath will work as a normal file input, and volition not support multiple file selection or the HTML 5 FileReader API.
With release 4.0, AJAX uploads are supported. AJAX uploads require that the browser support HTML5 FormData and XHR2 (XMLHttpRequest 2). Nigh modernistic browsers back up FormData and XHR2. The plugin will automatically degrade to normal grade based submission for browsers not supporting AJAX uploads

Annotation:

Bootstrap 5.x is supported in add-on to Bootstrap 3.ten and 4.x since release v5.ii.0. Refer the Modify LOG for details.

Bootstrap 4.x is supported in addition to Bootstrap iii.x since release v4.4.4. Refer the CHANGE LOG for details.

You can use the sass branch for installation using bootstrap-sass dependency. The master branch tin can exist used for installation using apparently bootstrap dependency.

Installation

Using Bower

To install using the bower package manager run:

              bower install bootstrap-fileinput

Using NPM

To install using the npm packet manager run:

              npm install bootstrap-fileinput

Using Composer

To install using the composer packet managing director run:

              $ php composer.phar require kartik-5/bootstrap-fileinput "@dev"

or add:

              "kartik-v/bootstrap-fileinput": "@dev"

to your composer.json file

Manual Install

You can also manually install the plugin easily to your project. But download the source ZIP or TAR ball and excerpt the plugin assets (css and js folders) into your project.

Usage

Pace 1: Load the following assets on your page in the order mentioned.

                <!-- bootstrap 5.x or 4.x is supported. You tin also utilize the bootstrap css three.3.x versions -->                <                link                rel="stylesheet"                href="https://cdn.jsdelivr.internet/npm/bootstrap@5.1.three/dist/css/bootstrap.min.css"                crossorigin="anonymous">                <!-- default icons used in the plugin are from Bootstrap five.x icon library (which tin be enabled past loading CSS below) -->                <                link                rel="stylesheet"                href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css"                crossorigin="anonymous">                <!-- alternatively you tin use the font awesome icon library if using with `fas` theme (or Bootstrap 4.ten) by uncommenting beneath. -->                <!-- link rel="stylesheet" href="https://utilize.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="bearding" -->                <!-- the fileinput plugin styling CSS file -->                <                link                href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.two.seven/css/fileinput.min.css"                media="all"                rel="stylesheet"                blazon="text/css" />                <!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file subsequently fileinput.css past uncommenting beneath -->                <!-- link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@v.ii.7/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->                <!-- the jQuery Library -->                <                script                src="https://lawmaking.jquery.com/jquery-3.vi.0.min.js"                crossorigin="anonymous">                </                script                >                <!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you lot                                  wish to resize images earlier upload. This must exist loaded before fileinput.min.js -->                <                script                src="https://cdn.jsdelivr.cyberspace/gh/kartik-v/bootstrap-fileinput@5.2.vii/js/plugins/piexif.min.js"                blazon="text/javascript">                </                script                >                <!-- sortable.min.js is only needed if y'all wish to sort / rearrange files in initial preview.                                                  This must exist loaded before fileinput.min.js -->                <                script                src="https://cdn.jsdelivr.cyberspace/gh/kartik-v/bootstrap-fileinput@5.ii.seven/js/plugins/sortable.min.js"                type="text/javascript">                </                script                >                <!-- bootstrap.packet.min.js below is needed if you wish to zoom and preview file content in a detail modal                                  dialog. bootstrap 5.x or 4.10 is supported. You tin can likewise use the bootstrap js 3.3.x versions. -->                <                script                src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.three/dist/js/bootstrap.bundle.min.js"                crossorigin="anonymous">                </                script                >                <!-- the primary fileinput plugin script JS file -->                <                script                src="https://cdn.jsdelivr.cyberspace/gh/kartik-v/bootstrap-fileinput@5.2.7/js/fileinput.min.js">                </                script                >                <!-- post-obit theme script is needed to use the Font Awesome 5.x theme (`fas`). Uncomment if needed. -->                <!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.ii.7/themes/fas/theme.min.js"></script -->                <!-- optionally if yous demand translation for your language then include the locale file as mentioned beneath (replace LANG.js with your language locale) -->                <                script                src="https://cdn.jsdelivr.net/gh/kartik-5/bootstrap-fileinput@5.2.vii/js/locales/LANG.js">                </                script                >

With v5.2.one, the plugin is able to automatically discover the bootstrap library version and evangelize the relevant bootstrap specific functionality (if you have loaded the bootstrap.min.js earlier fileinput.min.js). In example of any problems - you can explicitly gear up the bootstrap version past setting the following variable before the plugin initialization script.

                // fix this before initializing the fileinput plugin                $                .                fn                .                fileinputBsVersion                =                '3.four.1'                ;                // for example if using bootstrap css 3.iv.1 version

If you noticed, y'all need to load the jquery.min.js and bootstrap.min.css in add-on to the fileinput.min.css and fileinput.min.js. The theme file themes/fa/theme.js can exist optionally included for the font awesome icons styling. The locale file <lang>.js tin be optionally included for translating for your language if needed.

Optional Dependent Plugins

The piexif.min.js file is the source for the Piexifjs plugin by hMatoba. It is required to be loaded before fileinput.min.js if you wish to utilize the image resize characteristic of the bootstrap-fileinput plugin.
The sortable.min.js file is the source for the Sortable plugin by rubaxa. It is required to be loaded before fileinput.min.js if you wish to sort the thumbnails in the initial preview.

For ease of admission, the sources for the higher up plugins are included in the js/plugins binder of this project repository.

Step 2: Initialize the plugin on your folio. For example,

// HTML markup                <                input                id="input-id"                name="file-data"                type="file">                <                script                >                $                (                document                )                .                gear up                (                function                (                )                {                // initialize with defaults                $                (                "#input-id"                )                .                fileinput                (                )                ;                // with plugin options                $                (                "#input-id"                )                .                fileinput                (                {                'uploadUrl':                '/path/to/your-upload-api'                ,                'previewFileType':                'whatsoever'                }                )                ;                }                )                ;                </                script                >

The #input-id is the identifier for the input (e.g. type = file) on your page, which is hidden automatically past the plugin.

Alternatively, y'all tin can straight telephone call the plugin options by setting data attributes to your input field. To auto initialize the plugin with but HTML markup - add together the CSS class file to your file input markup element.

                <                input                id="input-id"                blazon="file"                grade="file"                data-preview-file-blazon="text"                >

Annotation: When initializing the plugin via javascript (every bit mentioned earlier), do non add the CSS class file to the input markup (else you would get an erronaeous / inconsistent output).