File Input Component

File Input component is an input field for designating file upload or interacting with local capturing devices like camera from user. Bissetii did a number of researches on its own and decided to only provide styling for proper HTML5 semantic syntax defined by w3.org.

This component is available starting from v1.12.1.

Hugo

All File Input Hugo interface is directly supported by Form Component.

Go

All File Input Go interface is directly supported by Form Component.

HTML

Expanding from Form Component, File Input is meant for designating file upload or interacting with a local capturing devices like camera depending on the browser support.

Should you need to specify specific files, use accept= attribute and specify the supported file types. You need to search your list of MIME types from known sources. Below are some examples.

For PNG graphic files, the attribute can be any of the following:

1
2

accept="image/png"
accept=".png"

For JPEG graphic files, the attribute can be any of the following:

1
2

accept="image/jpeg"
accept=".jpg,.jpeg"

For both PNG and JPEG graphic files, the attribute is:

1
2

accept="image/png,image/jpeg"
accept=".png,.jpg,.jpeg"

For any graphic files, the attribute is:

accept="image/*"

An all compatible attributes HTML syntax is shown as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<label for="input-javascript-id">File Upload</label>
<input type="file"
	id="input-javascript-id"
	name="example"
	accept="...YOUR FILTER..."
	capture
	multiple
	required
	disabled
	autofocus
	autocomplete
/>

Here is an example:

CSS

All File Input CSS variables is directly supported by Button Component and Form Component.

Javascript

All File Input Javascript is directly supported by Button Component and Form Component.

Sass

All File Input Sass is directly supported by Button Component and Form Component.

Researches

Here are the researches done to ensure File Input component meets the necessary quality assurances:

SCHEDULED COMING SOON

Epilogue

That’s all about File Input component in Bissetii. If you need more feature or need to report a bug, please feel free to file an issue at our Issue Section.