Hi,

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

Thank you.

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.

Encode html content in text for preview in modal.

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!

Since readAsBinaryString has been deprecated in HTML5 FileReader API.

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)

Previews are not showing in Safari on Windows.

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..

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

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

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.

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

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

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

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!

In E10, when selecting a file just hangs browser.

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

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.

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'
        });
});

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.

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?

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

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?

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

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

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.

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

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

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));
},

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.

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

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.

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

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

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

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

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

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!

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.

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

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.

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.

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.