kartik-v/bootstrap-fileinput

An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.

Hi 👋, I'm Kartik Visweswaran

A passionate open source contributor from India

🔭 I’m currently working on Javascript Plugins and Yii2 Extensions 👨‍💻 All of my projects are available at https://krajee.com 📝 Check out my articles on web tips and my blog 💬 Ask me about anything on app development 📫 How to reach me: https://krajee.com/contact

Support

bootstrap-fileinput's Issues

Image preview for update action

Example use case:

• Update profile picture, say if user already upload their image, then show the current image.

Questions:

• What's 'best' practice to achieve this?
• showDefaultPreview option, that accept image url would be nice

CMIIW

IE10 Error on remove

I am experiencing an error when uploading a jpeg image and then removing then selecting the same image. It doesn't preview. However, if you select another image it does. just not the same image 2x in a row. Only seeing this in IE10. I tried reset and refresh to no avail.

1. Browse and select an image.
2. Remove image.
3. Browse and select same image.

Trigger new events `filebrowse` and `fileselectnone`

HTML encode caption hover title

HTML encode (strip only text) for the caption title displayed on hover.

swf file preview

hello.
do you have a plan to add preview on flash files?

Can't set custom file input name when I am using the widget with model

I am trying to set a custom name attribute value for the file input which is rendered by the widget with no success. I started digging in the code and I have noticed that in the kartik\widgets\InputWidget::getInput method the name is removed form $this->options array in the init method and then when you render the html input you use the same array with the name key missing . It makes overriding the name attribute of the input almost impossible. I think that you should change this.

I can propose 2 ways:

1. do not remove the name attribute from the $this->options array in the kartik\widgets\InputWidget class at line 96.

2. use the same logic which you use to define to remove the name key or not from $this->options array to define if you have to merge it back in kartik\widgets\InputWidget::getInput method when you render the attribute.

Trigger fileloaded when showPreview is false.

I am creating a Knockout binding handler for this. Adding the "file" to an observable array via the valueAccessor in a custom binding handler. I am not using showPreview. I attach to the fileloaded event like so in my bindingHandler:

ko.utils.registerEventHandler(element, 'fileloaded', function (event, file, previewId) {
    addFile(value, file);
});

However, that event does not fire when preview is not true. So I found it necessary to add a trigger to the readFiles method:

if (!self.showPreview) {
    setTimeout(readFile(i + 1), 1000);
    $el.trigger('fileloaded', [file, previewId, i]);
    return;
}

Im sure you can probably find a better way to add that trigger to your code, so I dont want to try to fork it, this was just a quick fix to do what I needed to do. Hopefully you dont mind adding this in future versions.

Anyhow, thanks for the great work!

Reset on browse?

What is the reason for resetting the fileupload when clicking on the browse button? If the user then decides to cancel the file dialog the current selected file is lost. I tested to uncomment self.clear(false) within the listen method and everything seems to be working, but maybe not in some edge case(s)?

listen: function () {
    var self = this, $el = self.$element, $cap = self.$captionContainer, $btnFile = self.$btnFile;
    $el.on('change', $.proxy(self.change, self));
    $(window).on('resize', function() {
        setTimeout(function() {
            self.autoSizeCaption();
        }, 100);  
    });
    $btnFile.on('click', function (ev) {
        self.clear(false); // <-----
        $cap.focus();
    });
    $el.closest('form').on('reset', $.proxy(self.reset, self));
    self.$container.on('click', '.fileinput-remove:not([disabled])', $.proxy(self.clear, self));
},

Set image preview dimensions to auto fit and center.

Long filename - file input to long

If I upload a file with a very long filename, the width of the file input container flows out of the specified width. It there a way to prevent that?

Update file preview when file browse is cancelled

Hi,

When I choopse multiple files, I've the preview zone displayed normally, all works fine.

But if I click on browse button, and then I click "Cancel", the preview zone is still displayed but the file input is empty..

IE 10 "readAsBinaryString" error

Hello

In IE 10 i get the following error:

SCRIPT438: Object doesn't support property or method 'readAsBinaryString'
fileinput.min.js, line 6 character 10442
The file is submited with the input but visually there is no thumb or input text to alert users they set the input file.

I use version 2.1

In chrome and Firefox the script is working fine.

Autosize preview images when they exceed the size of the preview container

Enhanced generic support for more preview formats

Allow preview of most formats using HTML 5 video, audio and others through the object element.

Highlight error in file caption on validation error

Use bootstrap has-error CSS class to highlight error in file caption on validation error

Better text format validation and correct modal preview

Add support for Flash and Video media preview

To add support for flash (SWF) and video (MP4, WEBM, OGG, 3GP) preview.

how to upload those images?

Hi:
I use this fileinput plugin in my website,and i use php. How to write the server code?I debug the upload request,$_FILE has no object,and $_GET has one array which has the image name,but this not enough! how to put the file input value to $_FILE? thanks!

Long captions wrap and display outside of input box.

When caption is enabled and the file name exceeds the space in the input the text wraps and continues to display below.

Add validation for allowed file types and extensions

Enhance plugin to configure the following arrays:

• allowedFileTypes (e.g. [image, html, text, video, audio, flash])
• allowedFileExtensions (e.g. [jpg, gif, txt, json])

Throw a validation error message if not matched. Validation error message can be configured as:

• msgInvalidFileType: Validation error message string when invalid file type found that will have these following tags replaced:
  • {name}: file name
  • {types}: comma separated string list of allowedFileTypes
• msgInvalidFileExtension: Validation error message string when invalid file extension found that will have these following tags replaced:
  • {name}: file name
  • {extensions}: comma separated string list of allowedFileExtensions
• Event fileerror will be triggered when these validation errors are encountered.

wrong previewid in fileloaded event if load more than one file

i use

echo $form->field($model, 'image')->widget(\kartik\widgets\FileInput::className(), [
    'options' => ['multiple' => true,'accept' => 'image/*'],
    'pluginOptions' => [
        'previewFileType' => 'image',
        'showPreview' => true,
        'showCaption' => true,
        'showRemove' => false,
        'showUpload' => false,
        'maxFileSize'=>2500,
        'maxFileCount'=>5,
        'msgSizeTooLarge'=>'Размер файла "{name}" (<b>{size} KB</b>) превышает максимально разрешенный <b>{maxSize} KB</b>!',
        'msgFilesTooMany'=>'Вы не можете загружать одновременно больше <b>{m}</b> файлов!',
        'uploadUrl'=>\yii\helpers\Url::toRoute(['/gallery/foto/upload']),
    ],
    'pluginEvents'=>[
         'fileloaded'=>'function(event, file, previewId) {
                                console.log(previewId);
                        }'
    ]
]);

if i upload one image i see in console correct previewId such as preview-1407781677547-0
but if i upload two image - i see in console preview-1407781725430-0-1 preview-1407781725430-0-1
if upload more image - we always see duplicated latest prviewId, instead of first previewId with -0 index

And more please add 'i' - index of file to fileloaded event (latest part of previewId)

$el.trigger('fileloaded', [file, previewId, i]);

Thanks for your attention and good plugins

Enhance multiple file upload performance and preview progress.

Various enhancements to the fileinput plugin for multiple file upload:

• Incorporate timeouts between file uploads to improve browser caching performance and allow files to be better uploaded for preview
• Enhance file display progress message to display status/count of current file being loaded.
• Enhance msgLoading and msgProgress message templates to display status/count of current file being loaded.

Previews are not working in Safari

Previews are not showing in Safari on Windows.

Possibility to add files to "multiple" input

Hi, thanks for great plugin. Is it possible somehow to have "multiple" file input, select first file, select another and add it to the input, instead of overwriting the old one?

Hide thumbnail ...

Thank you for share this great plugin.
I want to hide thumbnail after choose file. How can I hide file thumbnail?

IE8 - control not working

Hello,

First of all, thanks for your control. It's a great control and easy to use.
However, I've got a javascript error under IE8 (I know it's an old browser but it's still used by our clients) located in the document.ready:

"Line: 528
Error: Object doesn't support this property or method."

In fact, Object.keys is undefined as shown by the debugger.

Instead of : var $input = $('input.file[type=file]'), count = Object.keys($input).length;
Proposition: var $input = $('input.file[type=file]'), count = Object.keys ? Object.keys($input).length : 1;

This avoid crashing and let the control beeing displayed.
Note. This issue is still valid with newest version 2.1.1.

Thanks.
Julien

-

input disabled remains 'disabled' and not enabled by removing disabled attribute.

Disable issues

I wrote previously:
During my tests I have found 2 problems about the disable/refresh option.
When I disable/enable my fileinput I can't use the remove button anymore (nothing happen). The same problem appears in your demo.
And I have another problem: when we disable the input it removes all the previews (because it reloads the html I think). It seems not normal for me, when I disable the other fields the values remains. Do you think you can make some modification in order to keep the data ?

You answered:

This looks like a problem with your button markup that you click to disable your input. Note by default an HTML button type defaults to submit (this will reload your page on click) . You must implicitly declare the markup for a simple button type as below:

<button type="button" class="...">Disable</button>

In fact I am disabling the fileinput with javascript like that:
input.prop("disabled", true); input.fileinput("refresh");

And the refresh disable the input properly but removes all the previews previously selected. Probably because the refresh function init again the fileinput (and recreate the html).
In this case we disable AND lose data instead of just preventing the use of the fileinput.

Is there a way to have upload happen automatically after file is chosen?

I have a jquery script which runs and works fine onsubmit when the upload button is clicked, (and runs an ajaxsubmit process), but ideally I would like it to automatically submit the form once the file is chosen, doing away with the upload click completely. Is there an event that will tell me when a file has been chosen?

Thanks!

Enhancements to caption for validation error and reporting file counts

Enhance fileinput caption to report the right file count based on initial preview. In addition, report a validation error message in the caption container when the plugin calculates an error on file size or max file count.

Update readAsBinaryString to readAsArrayBuffer

Since readAsBinaryString has been deprecated in HTML5 FileReader API.

Remove Only one file instead of all files to be removed

i tried with this plugin. its really simple to use. after adding files to ui. there is a option to remove added files. if i click it its deleting all the files. But i just want to delete selected file only

Multiple files including one file too big

Hi,

When I select multiple files including one of them with a size too big, I get an error in the debug console : "Cannot read property 'name' of undefined". Then I don't see the error message related to the size of the file because the preview zone don't appear.

Some questions about uses and improvements

HI,

I have posted a comment on your website (http://plugins.krajee.com/file-input). But after I realized it should be better to post here my questions among the github community!

Thank you for this little plugin, it's simple and does the things properly :).

I am trying to use it but I want to add some more functionalities (like ajax uploads, etc...)
For that purpose I have modified some stuff inside your files, can I ask you if I am on the right way ? :)

• I have added a trigger event when the files have their preview loaded (it allows me to launch the ajax upload once the preview is done)
• My input files are customized with data-attributes but I wasn't able to add more than one file as initial preview (string, not array). So I have added an option "initialDelimiter" which allow me to give a string with a delimiter between each file in order to display more than one file at the initialization.
• So I have adapted the initPreview function and I have also replaced the hard-coded "files selected" by the option "msgSelected" in order to retrieve my translations given as data-attribute.

Now I can launch some ajax calls and display the current uploaded files at initialisation. Just remains 2 little problems:

• If I want to add some new files to the files already uploaded I have to set the param data-overwrite-initial="false". That's ok when I want to add new files but now I can't remove them ^^. Do you think you could make an option for removing one specific file from the list ? (with a trigger in order to update some things if needed). For example with a little cross on the upper right of the preview ?
• If I upload a picture with a small height but a big width it's ugly and problematic (it takes all the place and we can only see a part of the picture). What should be the best and simplest way to handle this ?

Thank you again for your work and I hope my english will be understandable ^^.

zephyx

Only msgValidationError is displayed when errors are triggered

Non-default error messages (like msgInvalidFileExtension) aren't displayed in case of specific error (such as an invalid File Extension): it's always displayed only msgValidationError.

To reproduce use following code and select a file with an extension different from the ones specified (png, gif).

$(document).ready(function() {
        $("#test-upload").fileinput({
                'showPreview' : false,
                'allowedFileExtensions' : ['png','gif'],
                'msgInvalidFileExtension' : 'TEST MESSAGE'
        });
});

Raise new `fileimageloaded` event

Raise a new fileimageloaded event which will be triggered after each selected image has completely loaded in the file preview window.

Initial caption not shown if there is no initial preview

In the case where initialPreview.length is zero, the function returns and the initial caption is never set. It is set when a file is selected making me think this is an oversight rather than desired functionality.

Multiple file upload from different directory

Hi i want to use this plugin for uploading picture from my script. The problem is i want to select multiple picture from different directory on client pc. It is always rewrite photo if select second time.

Browser IE10 hangs on file clear

In E10, when selecting a file just hangs browser.

maxFileSize - enhancement

Hi,
Thank's for very nice plugin.
Could I suggest add plugin option "maxFileSize" or similiar? It would be great.
Regrads
Jarek

Initial image disappears on Browse button click

When I click on Browse button, my initial image (in filepreview) disappears now (after update).
I think it should disapper if I chose a new image.

Unable to upload multiple files

The same file get's uploaded thrice if i add 3 images. Can you see if this is an issue?

Better control and configuration of preview templates

UploadButton does not vanish

Hi,

downloaded the current version and followed the instructions, in order to hide the upload button.

$("#course_logo").fileinput({'showUpload':false});

But the button still appears. What might be the reason?

Regards,

Mathias

Image preview not working: unrecognised expression

I'm using fileinput in a yii2 project
I've just updated composer and related dependencies and I started getting this error in the preview of images in my form:

Uncaught Error: Syntax error, unrecognized expression: http://debenhams.scene7.com/is/image/Debenhams/20090806_332006133980MG00 
Sizzle.error jquery.js:1437
Sizzle.tokenize jquery.js:2051
Sizzle.select jquery.js:2452
Sizzle jquery.js:843
jQuery.fn.extend.find jquery.js:2668
jQuery.fn.init jquery.js:2776
jQuery jquery.js:76
h.initPreview fileinput.min.js:6
h.init fileinput.min.js:6
h fileinput.min.js:6
(anonymous function) fileinput.min.js:6
jQuery.extend.each jquery.js:375
jQuery.fn.jQuery.each jquery.js:139
e.fn.fileinput fileinput.min.js:6
(anonymous function) update?id=25583:204
fire jquery.js:3073
self.fireWith jquery.js:3185
jQuery.extend.ready jquery.js:3391
completed jquery.js:3407

(sorry for shitty styling)
I'm using latest stable chromium
This was working with 2.3.0 (https://api.github.com/repos/kartik-v/bootstrap-fileinput/zipball/5159df7d77b79366f6a8370dc892f3f019a419d5)

HTML encode text content for preview in modal

Encode html content in text for preview in modal.

Image preview does not work for filenames that contain parenthesis

I got the below error message in the console when picking such file name:

Uncaught Error: Syntax error, unrecognized expression: filename (1).png

"Browse" (browseLabel) text disappear.

Hi,

thanks for this nice plugin.
I noticed that when you navigate through form with tab, "Browse" (browseLabel) text disappear.

Thank you.

Add exception handling for HTML5 File handling API exceptions