File upload

The b.File constructor creates a file input.

Modifier	Action
`b.Right`	Move the call-to-action to the right side, align the file input to the right
`b.FullWidth`	Expand the name to fill up the space
`b.Boxed`	Make the input a boxed block
`b.Centered`	Alight the file input to the center
`b.White`	Set color to white
`b.Black`	Set color to black
`b.Light`	Set color to light
`b.Dark`	Set color to dark
`b.Primary`	Set color to primary
`b.Link`	Set color to link
`b.Info`	Set color to info
`b.Success`	Set color to success
`b.Warning`	Set color to warning
`b.Danger`	Set color to danger
`b.Small`	Set size to small
`b.Normal`	Set size to normal
`b.Medium`	Set size to medium
`b.Large`	Set size to large

Child	Action
`b.OnCTA(...any)`	Apply children to the `<span class="file-cta">` element
`b.OnDiv(...any)`	Apply children to the `<div class="file">` element
`b.OnInput(...any)`	Apply children to the `<input>` element
`string`	Define the call-to-action label
`b.FileName`	Define the content of the `<span class="file-name">` element
`b.FileNameAutoUpdate`	Define the content of the `<span class="file-name">` element, which changes when a file is selected
`e.Element`	Add element to the `<span class="file-cta">` element
Anything else	Apply child to the `<input>` element

Bulma examples

Bulma documentation

Example

Code

b.File(
	e.Name("resume"),
	fa.Icon(fa.Solid, "upload"),
	"Choose a file…",
)

ResultHTML

Choose a file…

<div class="file"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-upload fa-solid"></i></span><span class="file-label">Choose a file…</span></span></label></div>

Modifiers

Bulma documentation

Example

Code

b.File(
	e.Name("resume"),
	fa.Icon(fa.Solid, "upload"),
	"Choose a file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Choose a file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="file has-name"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Choose a file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Right,
	fa.Icon(fa.Solid, "upload"),
	"Choose a file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Choose a file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="is-right has-name file"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-upload fa-solid"></i></span><span class="file-label">Choose a file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Example

ResultHTML

Choose a file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="has-name file is-fullwidth"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Choose a file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Code

b.File(
	e.Name("resume"),
	b.FullWidth,
	fa.Icon(fa.Solid, "upload"),
	"Choose a file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

Example

Code

b.File(
	e.Name("resume"),
	b.Boxed,
	fa.Icon(fa.Solid, "upload"),
	"Choose a file…",
)

ResultHTML

Choose a file…

<div class="file is-boxed"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-upload fa-solid"></i></span><span class="file-label">Choose a file…</span></span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Boxed,
	fa.Icon(fa.Solid, "upload"),
	"Choose a file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Choose a file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="file is-boxed has-name"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Choose a file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Colors

Bulma documentation

Example

Code

b.File(
	e.Name("resume"),
	b.Primary,
	fa.Icon(fa.Solid, "upload"),
	"Primary file…",
)

ResultHTML

Primary file…

<div class="file is-primary"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Primary file…</span></span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Info,
	fa.Icon(fa.Solid, "upload"),
	"Info file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Info file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="file is-info has-name"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-upload fa-solid"></i></span><span class="file-label">Info file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Warning,
	b.Boxed,
	fa.Icon(fa.Solid, "upload"),
	"Warning file…",
)

ResultHTML

Warning file…

<div class="file is-warning is-boxed"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Warning file…</span></span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Danger,
	b.Boxed,
	fa.Icon(fa.Solid, "upload"),
	"Danger file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Danger file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="is-boxed has-name file is-danger"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Danger file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Sizes

Bulma documentation

Example

Code

b.File(
	e.Name("resume"),
	b.Small,
	fa.Icon(fa.Solid, "upload"),
	"Small file…",
)

ResultHTML

Small file…

<div class="file is-small"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Small file…</span></span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Normal,
	fa.Icon(fa.Solid, "upload"),
	"Normal file…",
)

ResultHTML

Normal file…

<div class="file is-normal"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-upload fa-solid"></i></span><span class="file-label">Normal file…</span></span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Medium,
	fa.Icon(fa.Solid, "upload"),
	"Medium file…",
)

ResultHTML

Medium file…

<div class="file is-medium"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Medium file…</span></span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Large,
	fa.Icon(fa.Solid, "upload"),
	"Large file…",
)

ResultHTML

Large file…

<div class="file is-large"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Large file…</span></span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Small,
	fa.Icon(fa.Solid, "upload"),
	"Small file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Small file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="file is-small has-name"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Small file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Normal,
	fa.Icon(fa.Solid, "upload"),
	"Normal file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Normal file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="file is-normal has-name"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Normal file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Medium,
	fa.Icon(fa.Solid, "upload"),
	"Medium file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Medium file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="is-medium has-name file"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Medium file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Large,
	fa.Icon(fa.Solid, "upload"),
	"Large file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Large file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="is-large has-name file"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-upload fa-solid"></i></span><span class="file-label">Large file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Small,
	b.Boxed,
	fa.Icon(fa.Solid, "upload"),
	"Small file…",
)

ResultHTML

Small file…

<div class="file is-small is-boxed"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-upload fa-solid"></i></span><span class="file-label">Small file…</span></span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Normal,
	b.Boxed,
	fa.Icon(fa.Solid, "upload"),
	"Normal file…",
)

ResultHTML

Normal file…

<div class="file is-normal is-boxed"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Normal file…</span></span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Medium,
	b.Boxed,
	fa.Icon(fa.Solid, "upload"),
	"Medium file…",
)

ResultHTML

Medium file…

<div class="file is-medium is-boxed"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Medium file…</span></span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Large,
	b.Boxed,
	fa.Icon(fa.Solid, "upload"),
	"Large file…",
)

ResultHTML

Large file…

<div class="file is-large is-boxed"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Large file…</span></span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Small,
	b.Boxed,
	fa.Icon(fa.Solid, "upload"),
	"Small file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Small file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="file is-small is-boxed has-name"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-upload fa-solid"></i></span><span class="file-label">Small file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Normal,
	b.Boxed,
	fa.Icon(fa.Solid, "upload"),
	"Normal file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Normal file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="file is-normal is-boxed has-name"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Normal file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Medium,
	b.Boxed,
	fa.Icon(fa.Solid, "upload"),
	"Medium file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Medium file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="has-name file is-medium is-boxed"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-upload fa-solid"></i></span><span class="file-label">Medium file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Large,
	b.Boxed,
	fa.Icon(fa.Solid, "upload"),
	"Large file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Large file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="has-name file is-large is-boxed"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Large file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Alignment

Bulma documentation

Example

Code

b.File(
	e.Name("resume"),
	b.Centered,
	b.Boxed,
	b.Success,
	fa.Icon(fa.Solid, "upload"),
	"Centered file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Centered file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="file is-centered is-boxed is-success has-name"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Centered file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

Example

Code

b.File(
	e.Name("resume"),
	b.Right,
	b.Info,
	fa.Icon(fa.Solid, "upload"),
	"Right file…",
	b.FileName("Screen Shot 2017-07-29 at 15.54.25.png"),
)

ResultHTML

Right file…Screen Shot 2017-07-29 at 15.54.25.png

<div class="file is-right is-info has-name"><label class="file-label"><input class="file-input" type="file" name="resume"><span class="file-cta"><span class="file-icon"><i class="fa-upload fa-solid"></i></span><span class="file-label">Right file…</span></span><span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span></label></div>

JavaScript

Bulma documentation

In order to automatically change the file name when the user has selected a file, use b.FileNameAutoUpdate with a placeholder:

Example

Code

b.File(
	e.Name("resume"),
	fa.Icon(fa.Solid, "upload"),
	"Choose a file…",
	b.FileNameAutoUpdate("No file uploaded"),
)

ResultHTML

Choose a file…No file uploaded

<div class="has-name file"><label class="file-label"><input class="file-input" type="file" name="resume" onchange="if (this.files.length>0) { this.parentNode.getElementsByClassName(&#34;file-name&#34;)[0].textContent = this.files[0].name }"><span class="file-cta"><span class="file-icon"><i class="fa-solid fa-upload"></i></span><span class="file-label">Choose a file…</span></span><span class="file-name">No file uploaded</span></label></div>