Bootstrap File Input Methods

Thankful to Krajee!
to get more out of us.

The plugin supports the following methods. To view a demonstration of various plugin methods, click here.

Many of the methods below support method chaining because they return the file input element as a jQuery object.

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)

disable

Disable the file input. This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('disable');

// method chaining with enable
$('#input-id').fileinput('disable').fileinput('enable');

enable

Enable the file input. This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('enable');

// method chaining with disable
$('#input-id').fileinput('enable').fileinput('disable');

reset

Softer reset of the file input than the clear method. It cleans up the preview thumbnails (except successful uploads and initialPreview) and cleans up the ajax upload file stack. But this method does not directly clear the native file input of the files selected. This cleanup typically happens automatically when the enveloping form is reset. It thus differs a bit from the clear method which is a more deep hard reset and involves clearing the file input as well as clearing of the files in the preview. This method returns the file input element as a jQuery object and can thus be chained with other methods. However, note that when resetting the form enveloping the native file input - the clear method is automatically called and not this method.

$('#input-id').fileinput('reset');

// method chaining
$('#input-id').fileinput('reset').trigger('custom-event');

destroy

Destroys the file input plugin and reverts to a normal native file input. This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('destroy');

// method chaining
$('#input-id').fileinput('destroy').fileinput('disable');

refresh

Refreshes the file input plugin based on options provided. You can supply an array of plugin options as a parameter. This method returns the file input element as a jQuery object and can thus be chained with other methods.

// example 1 (disable at runtime)
$('#input-id').attr('disabled', 'disabled');
$('#input-id').fileinput('refresh');

// example 2 (modify plugin options at runtime)
$('#input-id').fileinput('refresh', {browseLabel: 'Select...', removeLabel: 'Delete'});

// method chaining
$('#input-id').fileinput('refresh', {showCaption: false}).fileinput('disable');

clear

Clear the file input. This method clears the preview of all non-uploaded files, clears the ajax filestack, and also clears the native file input. This method thus provides a more deeper cleaning of the fileinput as compared to the reset method. This method is automatically called when the main Remove button beside the file Browse button is clicked OR the enveloping native form RESET action is triggered (e.g. via a form RESET button). This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('clear');

// method chaining
$('#input-id').fileinput('clear').fileinput('disable');

upload

Trigger ajax upload of the files that are selected. Applicable only if uploadUrl is set. This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('upload');

// method chaining
$('#input-id').fileinput('upload').fileinput('disable');

cancel

Cancel an ongoing ajax upload of the files. This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('cancel');

// method chaining
$('#input-id').fileinput('cancel').fileinput('disable');

lock

Locks the file input by disabling all actions/buttons except a cancel button to abort ongoing AJAX requests (for ajax uploads only). This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('lock');

// method chaining
$('#input-id').fileinput('lock').fileinput('disable');

unlock

Unlocks and enables the file input back again by reversing the outcome of the lock action. This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('unlock');

// method chaining
$('#input-id').fileinput('unlock').fileinput('disable');

addToStack

This method pushes (appends) a file object to the cached file stack array for upload (note that this only adds files to the internal stack and does not update the preview). You must supply a file object as a parameter.

$('#input-id').fileinput('addToStack', fileObj); // where `fileObj` is the file blob object instance

updateStack

This method updates/overwrites a file object in the cached file stack array for a specified array index (note that this only updates files to the internal stack and does not update the preview). You must supply the array index and the file object as a parameter.

$('#input-id').fileinput('updateStack', index, fileObj); 
// where `index` is the index of the file stack array against which `fileObj` will be updated/stored

clearStack

This method clears the entire file upload array stack (note that this only clears files from the internal stack and does not update the preview).

$('#input-id').fileinput('clearStack');

getFileStack

This method returns the array of file objects selected (applicable only for ajaxUploads when uploadUrl is set). This method will not return files that failed validation error or which have already been uploaded.

var files = $('#input-id').fileinput('getFileStack'); // returns file list selected

As mentioned, note that this method is useful to get file objects only for ajax uploads. For normal form based submission, you can get the files selected by directly reading the input value i.e. $('#input-id').val().

getFilesCount

This method returns the count of all files pending upload and files already uploaded (based on initial preview). The count will include files selected from client (not uploaded) PLUS the files uploaded to server and displayed via initial preview. The validateInitialCount property will be used to check if initial preview count will be used. This method will return count of files for both normal form submissions as well as ajaxUploads when uploadUrl is set.

var filesCount = $('#input-id').fileinput('getFilesCount'); // returns count of files (uploaded and pending upload)

readFiles

This method reads an array of file objects and adds it to the file object stack and also updates the preview to display the files based on the plugin settings. Note that this method is meaningful to use only for ajaxUploads when uploadUrl is set. You must supply an array of file objects as a parameter.

$('#input-id').fileinput('readFiles', files); // where `files` is an array of file blob objects

zoom

Zooms the content in detailed preview for the passed thumbnail frame id parameter. This method takes in the following parameters:

  • frameId: string, the HTML identifier for the file preview thumbnail frame for which the exif data will be returned

$('#input-id').fileinput('zoom', 'preview-123882'); // pass the HTML identifier for the thumbnail frame

getPreview

Returns the initial preview content, the initial preview configuration, and initial preview thumb tags. This is returned as an object (associative array) of the following format:

{
    content: ['content1', 'content2'],
    config: [
        { 
            // initial preview config for content1 
        },
        { 
            // initial preview config for content2
        },
            
    ],
    tags: [
        { 
            // initial preview tags for content1 
        },
        { 
            // initial preview tags for content2
        },
    ]
}

Usage example:

console.log($('#input-id').fileinput('getPreview'));

getExif

Gets the exif data for the specified file thumbnail frame (applicable only for JPEG image file types). The exif data is returned as an object using the piexif.js library. If exif data is not found - this will be returned as NULL. The piexif.min.js plugin is required to be loaded before fileinput.min.js for restoring the exif data to the image files. This method takes in the following parameters:

  • frameId: string, the HTML identifier for the file preview thumbnail frame for which the exif data will be returned

Usage example:

console.log($('#input-id').fileinput('getPreview', 'yourThumbFrameId'));

getFrames

Returns the list of file preview thumbnail frames as jQuery objects. This method takes in the following parameters:

  • cssFilter: string, additional CSS filter to be applied to restrict and return the relevant thumbnail preview frames

Usage example:

// no css filter - returns all thumbnail frames
console.log($('#input1').fileinput('getFrames'));

// returns only initial preview thumbnail frames
console.log($('#input2').fileinput('getFrames', '.file-preview-initial'));

// returns all  thumbnail frames except the successfully uploaded thumbnails
console.log($('#input3').fileinput('getFrames', ':not(.file-preview-success)')); 

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.