Multiple file selection with custom file uploader

[boonelab]

When multiple files are selected in the custom file chooser, only the first file is displayed as opposed to having all files comma separated in the native file chooser

[jasny]

Multiple file upload isn't supported currently. I'll need to think of a solution to make it work both for file uploads and image uploads.

[martin-g]

voting for this functionality 👍

[nathanpitman]

Yup, this would be super. :)

[williamsbdev]

Are there any tests around the feature as it stands? I didn't notice any.

[luchesar]

One more for this !

[jasny]

The file input component will have basic support for multiple files in the next release.

Note that the widget has been designed as a drop in replacement for <input type="file">. Any features that require AJAX upload can't be supported. So, if you need the clear and set individual files, support drag&drop, show progress bars, etc. please consider using Dropzone.js.

[guyisra]

👍

[ahurst11290]

Hi Jasny,

Currently loving these extra components. This particular feature is incredibly important to me. Do you have anty ETA for the next version? I will most likely resolve this one myself as the code is very clean and readable (not for the image preview component though).

Thank you,
Anthony

[jasny]

@ahurst11290 Sorry, no ETA. I'm quite busy at the moment, so I have little time to work on my open source projects.

[devanddesign]

definitely need this functionality as well! 👍

[ducman]

I did this back in the day to show "multiple files selected". Though I created my own FileInput which inherit Jasny's FileInput and override some code in the change function.

I quickly threw together 2 versions just listening to the change.bs.fileinput; both have their good and bad moments.
Version 1: http://jsfiddle.net/a0h1chdv/
Con: can't see all the files if you selected a lot. The extra css is to hide the file name from overflowing outside the "textbox" (if you're good with css then maybe you can make it look better). Tooltip is added to see all files.

Version 2: http://jsfiddle.net/Lkmps8c6/
Con: you have to remove the data-trigger="fileinput" from the markup. Clicking on the "textbox" no longer open the file browser modal (which is ok since older browser will throw a security error when submitting the form). Extra css is required.

[julianxhokaxhiu]

Thank you @ducman version 2 was exactly what I was searching for, and you gave me a great inspiration! :D

[jasny]

@ducman Can you create a PR for this?

[dylanvdmerwe]

I still think multiple file uploads should be supported.

[Jany-M]

I would like to know if there's any plan to add all uploaded images previews (instead of just the first one)?
I posted here too.

[Minstel]

@Jany-M Hi! Yes, sure, we're currently thinking of the best way to do this. Implementing multiple uload without previews was just the first step.

[Jany-M]

Maybe generate a progressive ID for each preview "block", so that each has their own wrapped & targeted edit/remove buttons, then submit as array?

[ducman]

I don't want to drive people away from this great plugin but here is another bootstrap one dealing with uploading/preview, etc. I haven't tried it yet. Sharing is caring!! Good luck.

http://plugins.krajee.com/file-input/demo

[Minstel]

@ducman Yeh, thanks, it looks really good :) Currently we try to think of smth more compact, not showing preview of each image separately.

[dylanvdmerwe]

Has this been resolved? Why is it closed?