Bulma: Form: add file/upload input

[Vrtak-CZ]

Checklist

• [x] This is about Bulma the CSS framework and not about the Bulma website
• [x] I'm using Bulma version [0.1.2]
• [x] My browser is: Chrome 52 (macOS)
• [x] This is NOT a Sass issue
• [x] I am sure this issue is not a duplicate?
  

  Description

Please add form file/upload input styles.

[JorgenSolli]

Yes please! :+1:

[jgthms]

That is a tricky one! Here's a few nice examples: http://tympanus.net/Tutorials/CustomFileInputs/

It _could_ be implemented, but I'm concerned about the accessibility. Upload inputs are quite different across browsers and platforms, so redefining the UI will confuse users. It must be perfect in order to be worth it.

For example, on Mac OS, you can drag a file onto the upload input, which is very convenient. But restyling that input breaks that behaviour.

I believe I could add an optional style. But the JavaScript would _not_ be included.

[perkola]

Any news on this? I would really like a Bulma-themed file input :)

[markfarrall]

Certainly not important, but at the bottom of a form it does bring the 'sticks out like dogs balls' phrase to mind.

[scottzirkel]

If not a full restyling of the input, maybe just some padding so it stacks the same as inputs. Right now the label below the file is really tight.

```
Page Title

PDF

Next Thing

````

I kludged it by adding a content class to the file input. Of course it's not the most elegant (or precise) solution.

[steven-p-walsh]

+1 on this, I realize it's not an easy ask... but this is pretty important. It looks really out of place. I'd say this is an essential add if you want this framework to be widely used.

[chrislewispac]

+1

[VaclavObornik]

+1

[chintanbanugaria]

+1

[Jaimeer]

+1

[dsbert]

Please don't +1 issues, it spams anyone subscribed to it.

[cuzfrog]

@jgthms is probably right.

A pattern is to hide the <input type="file">, then reference to it through getElementByXX or whatever. And emulate event on it. Like this related question, where it uses React ref to get the dom.Input.

Latter we can use existing ui like button to trigger the event.

[chintanbanugaria]

Thats how I got it around.
https://jsfiddle.net/chintanbanugaria/uzva5byy/

[brunsten]

@chintanbanugaria that's nice. Any chance for a sass version?

[jgthms]

Coming up in 0.5.1: http://bulma.io/documentation/form/file/

[benyrfg]

Hello, I'm wondering how to add drag & drop function for file input. Because this is a native function for default-browser input field. It's a little pitty that it's not supported for Bulma stylized file input.
Some ideas? Thanks

[markfarrall]

Finally got to use this, very nice. Thanks for the work.

[My1]

@benyrfg probably you have to make it a drop zone by JS or whatever, but yeah I would also lobe to do a bulma file input as a drop zone.

[Markyb0y]

would someone be able to provide a working example of using this please
I have tried using chintanbanugaria's workaraound from https://jsfiddle.net/chintanbanugaria/uzva5byy/
but I have not been able to adjust the code to work with the default option, I press the button and the file select window appears but when I select a file the path or filename is not added to the input box as I would have expected
I appreciate there are many different ways around this which is why it isn't added natively, but if someone could provide a solution using the default option it would be a great starting point
many thanks

````

Choose a file… text should go here

````

[VizuaaLOG]

@Markyb0y To update the file name you need some JS magic.

I have created and maintain a vanilla ES6 Javascript implementation for the Bulma components that require a sprinkle of JS.

You can find the docs for the BulmaJS file implementation here

Please let me know how you get on :).

Edit: Of course if you are using other libraries such as React or Vue then people have created an implementation for those also.

[Markyb0y]

@VizuaaLOG thanks for the reply
I am trying to create a simple minimalist page with File Upload functionality
should I be using the SRC files or the DIST files? which JS file should I be linking in my html file? I tried to link just the bulma.js file as I saw it references the other files within but I get an error in Firefox Developer console saying "SyntaxError: import declarations may only appear at top level of a module" and it points to bulma.js:1
any help appreciated

[VizuaaLOG]

@Markyb0y If you're only wanting to use the File JS file. Then you can include the file.js file from the dist folder. When I get home later, I'll put an example JSFiddle or something together for you to look at :).

[Markyb0y]

@VizuaaLOG that would be great, I also notice in your example that once selected it shows the filename only in the field, I can of course then reference the field name but will it store the full path of the file anywhere? or can it easily be adjusted to show the full path rather than just the filename?
many thanks

[VizuaaLOG]

@Markyb0y oh that's a great idea! Would you be able to open a new issue on the BulmaJS repo and describe what your looking for and maybe a use case. I'm planning on doing some work on it this weekend so will get a configuration option or something added.

[gardsted]

I am just an amateur, so forgive me for breaking into this.
I made a little experiment with dropzone.js (dropping files for upload) and using bulma-media for preview.
I really like bulma - and I am sure, I can find use for this
https://gist.github.com/gardsted/79fafcd7969872c71720820c54c7b3ae

[pkbarbiedoll]

@VizuaaLOG - your link from Feb 12 is 404'ed. Struggling getting @chintanbanugaria's example to work (same as @Markyb0y -- did you eventually figure it out?)

[My1]

@pkbarbiedoll
well their docs changed a bit in URL structure I guess.
here's the most recent version of the link:

https://vizuaalog.github.io/BulmaJS/docs/0.6/file

[VizuaaLOG]

@pkbarbiedoll good catch thanks! The docs have been going through an overhaul recently which includes a change to the structure. I've now updated the link.

[pkbarbiedoll]

@VizuaaLOG which is the correct documentation to use? The documentation I find when doing a simple google search points to https://bulma.io/documentation/form/file/, which looks different from the documentation at https://vizuaalog.github.io/BulmaJS/docs/0.6/file

[pkbarbiedoll]

Also, would anyone be up for creating an actual working example using Bulma's file input object and javascript? I temporarily gave up on trying to get @chintanbanugaria's example to play nicely with Bulma and am using a standard file input for now.

[My1]

the bulma.io link is the basic bula styling and stuff for the file upload, the description of the bulmajs page describes what the addon does to the file input, basically telling you how to use the plugin WITH bulma.

as far as the doc states you need to include the plugin on the site as written on the install page, and just create a normal bulma file input as written on those docs.

try this pen.
https://codepen.io/My1/pen/oMaKLo/

CSS is empty because I just used codepen's include feature to get bulma and the JS is just the dist/file.js from
https://github.com/VizuaaLOG/BulmaJS/releases

[dbrgn]

The fiddle provided by @chintanbanugaria (which is linked in the official docs) is vulnerable to HTML injection since it writes the filename directly to the innerHTML element... For example, a file called <b>bold.txt will result in a bold label. With some trickery, JS injection might be possible.

Instead, the textContent attribute should be used instead of innerHTML. It strips markup.

Not sure how I could fix that with a merge request, since it links to an external page. Maybe the example could be integrated into the documentation directly?

[My1]

Is that even possible? Last time i remember renaming stuff my pc reminded me that < and > ain't allowed in file names, but it makes sense.

[dbrgn]

That depends on the file system. On Linux and ext4 I can include < and > in a filename without a problem, it won't allow / though. But some of that is only userlevel validation and could be circumvented by manipulating a file in the file system directly.

In any case, it's something that should (and can easily be) avoided.

[chintanbanugaria]

@dbrgn I have made a repo for the same.
https://github.com/chintanbanugaria/bulma-file-upload
Please create the PR.
Will update on the jsfiddle as well.

[dbrgn]

@chintanbanugaria I honestly think it's a bit overkill to have a separate repo for modifying the DOM in an onchange handler... I think this would be a good case for integration into the docs.

I'll create a PR. Thanks for the update in the jsfiddle though!