jb file input

File upload web component. this component just let user select file and wait for you to get the value and handle it yourself and it's not handling any kind of upload or something

Samples

• Codepen
• Storybook

Using with JS frameworks

to use this component in react see jb-file-input/react;

using with JS frameworks

Usage

just import package with import or from js CDN and write web component tag in your html

<script>
  import 'jb-file-input'
</script>

<jb-file-input></jb-file-input>

Placeholder Title

you can change file input place holder text by set placeholder-title="select your special file" attribute in dom

Value

jb-file-input use file as default value type. means you can get value by dom.value and set it by dom.value= yourFile.

Reset Value

you can reset input file value by dom.value = null or dom.resetValue()

Loading State

jb-file-input dont show any loading by default because it's just a file input and not file uploader. but you can show upload state in file uploader by set some attribute and property.

in HTML

<jb-file-input uploading>

or in javascript:

// show upload section 
document.querySelector("jb-file-input").setAttribute("uploading","")
// set upload percent
document.querySelector("jb-file-input").uploadPercent = 10; //10% of file uploaded

Download Button

when file upload is complete user access to download button and you can add your own function to download file by add event listener:

document.querySelector("jb-file-input").addEventListener("download",()=>{
  //download file however you want
})

download button has no default functionality because file download in every project has it's own way so we just create a ui button to enable you ad function for it.

Hide Download Button

if you dont want download button to be shown add hide-download attribute to dom:

<jb-file-input hide-download></jb-file-input>

Other Related Docs:

• see jb-file-input/react; if you want to use this component in react

• see All JB Design system Component List for more components

• use Contribution Guide if you want to contribute in this component.