Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

file-picker

v4.15.0arrow_drop_down
v4.15.0
STATUS
Passing
DOWNLOADS
58
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
165 KB
The Filepicker component is used to select one or multiple filed from the file system.
1 contributor
Install file-picker as a package?
Copied
npm i @bit/segmentio.evergreen.file-picker
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

Snapshot report for src/file-picker/test/index.js

The actual snapshot is saved in index.js.snap.

Generated by AVA.

snapshot

Snapshot 1

<div
  className="evergreen-file-picker-root p&dspl_flex p&box-szg_border-box"
>
  <input
    accept={undefined}
    capture={undefined}
    className="evergreen-file-picker-file-input p&dspl_none p&box-szg_border-box"
    disabled={undefined}
    multiple={undefined}
    name={undefined}
    onChange={Function {}}
    required={undefined}
    type="file"
  />
  <input
    'aria-invalid'={false}
    className="css-5ljhhe evergreen-file-picker-text-input p&color_425A70 p&fnt-fam_b77syt p&fnt-sze_12px p&f-wght_400 p&ln-ht_16px p&ltr-spc_0 p&w_280px p&h_32px p&pl_10px p&pr_10px p&bblr_3px p&bbrr_0-important p&btlr_3px p&btrr_0-important p&flx_1 p&txt-ovrf_ellipsis p&box-szg_border-box"
    disabled={false}
    onBlur={Function {}}
    placeholder="Select a file to uploadb&"
    readOnly={true}
    required={undefined}
    spellCheck={true}
    type="text"
    value=""
  />
  <button
    className="css-69cngj evergreen-file-picker-button p&fnt-fam_b77syt p&mt_0px p&fnt-sze_12px p&f-wght_500 p&ln-ht_32px p&ltr-spc_0 p&btrr_3px p&bbrr_3px p&btlr_0px p&bblr_0px p&pt_0px p&pb_0px p&pr_16px p&pl_16px p&ml_0px p&mr_0px p&mb_0px p&h_32px p&pst_relative p&dspl_inline-flex p&algn-itms_center p&flx-wrap_nowrap p&flx-srnk_0 p&box-szg_border-box"
    disabled={undefined}
    onBlur={Function {}}
    onClick={Function {}}
    type="button"
  >
    Select file
  </button>
</div>
Properties
NameTypeDescription
name
string

Name attribute of the input.

accept
string | string[]

The accept attribute of the input.

required
bool

When true, the file picker is required.

multiple
bool

When true, accept multiple files.

disabled
bool

When true, the filepicker is disabled.

capture
bool

The capture attribute of the input.

height
number

The height of the file picker.

onChange
function

Function called when onChange is fired

onBlur
function

Function called when onBlur is fired