FileInputButton

The default <input type="file"/> is just a quite boring button. That's why we present the<FileInputButton/> component which as an special input enhanced by the ability to allow users to choose files from a file dialog and also to validate an upload them.

The widget is useful for handling one

File

or a list of

Files

in one or more of these scenarios:

The file(s) must be chosen from a File Dialog
The file(s) must be validated or not. If validation is required, it can be done by taking into account a predefined set of allowed Common MIME Types; specifiying the max file size (in bytes) and/or the max amount of files.
The file(s) must be uploaded somewhere in the internet.

This component works perfectly with <FileMosaic/> and<FileCard/> components for displaying the files.

Basic FileInputButton

In this demo we set the <FileInputButton/> with the minimum props that allows you to get your task done fast. These props are onChange and value.

<FileInputButton onChange={updateFiles} value={files} />
 
{files.map((file) => (
   <FileCard key={file.id} {...file} onDelete={removeFile} info />
))}

FileCard

For completeness, these examples include <FileCard/> component for showing the files selected by the user with minimun props too. For further information of this component check out the FileCard page.

ExtFile

ExtFile type is explicity used in the Typescript example and is implicity used in the Javascript example for handling the metadata that makes possible the information exchange between components. For further information about this data type check out the ExtFile-API.

Validation

In this demo you can see how <FileInputButton/> component covers the following features when it comes to validating files.

Accepting specific file types.
Accepting an specific number of files.
Accepting files with an specific size (in bytes).

<FileInputButton
  onChange={updateFiles}
  value={files}
  accept={"image/*"}
  maxFileSize={28 * 1024}
  maxFiles={2}
  actionButtons={{ position: "bottom", cleanButton: {} }}
/>
{files.map((file) => (
   <FileCard key={file.id} {...file} onDelete={removeFile} info />
))}

Removing non valid Files

We call "clean" to the operation of removing non valid files. Apart from deleting them individually, there are some other ways in which you can remove all of them. You can try the following props in the <FileInputButton/> component:

actionButtons
: By setting this prop properly, a button will be visible and will trigger the "clean" operation (This is the way used in this demo).
autoClean
: By setting this prop, non valid files will be automatically discarted and will not be given in the onChange event.

Custom validation

You can also override the FileInputButton validation operation by giving a custom validation function that must fit the following signature: validator?: (f: File) => ValidateFileResponse. Custom validator can work together with

maxFileSize

and

maxFiles

props.

Uploading

For uploading , the prop

uploadConfig

must be given. This prop recieves an object in which you can specify the HTTP method, the url, the headers and also extra data to be uploaded. The type definition for the prop mentioned can be found here.

<FileInputButton
  onChange={updateFiles}
  value={files}
  accept={"image/*"}
  maxFileSize={28 * 1024 * 1024}
  maxFiles={2}
  actionButtons={{
    position: "bottom",
    uploadButton: {},
    abortButton: {},
   }}
  uploadConfig={{
    url: "https://www.myawsomeserver.com/upload",
    method: "POST",
    headers: {
      Authorization:
         "bearer HTIBI/IBYG/&GU&/GV%&G/&IC%&V/Ibi76bfh8g67gg68g67i6g7G&58768&/(&/(FR&G/&H%&/",
     },
    cleanOnUpload: true,
   }}
  onUploadFinish={handleFinishUpload}
  fakeUpload
/>
{files.map((file) => (
   <FileCard key={file.id} {...file} onDelete={removeFile} info preview/>
))}

Server response

For uploading files through files-ui, server must return the response with the structure of the

ServerResponse

type.

"fakeUpload"

By giving this prop, the <FileInputButton/> component will simulate the upload operation by randomly setting the upload status and message on each uploadable

ExtFile

. It will also set a fake progress.

Upload config properties

Apart from the properties you can see in the example above, there are more of them that can make the upload process to behave differently.

autoUpload
: By setting this prop to true, the upload process will start automatically just after the user drops or selects files.
cleanOnUpload
: By setting this prop, you can control whether the upload process should "clean" the non valid files before uploading or not. By default this value is true.

More information about the uploadConfig type structure can be found here.

FileInputButton with action buttons

If you need to display buttons that trigger the default events in the <FileInputButton/> component, you can do it by adding the

actionButtons

prop. This will add buttons to the top or to the bottom of this component.

FileInputButton with the
actionButtons.cleanButton
prop defined will display a button which triggers the clean process.
This button will be visible only when the "upload" process is not active.
FileInputButton with the
actionButtons.deleteButton
prop defined will display a button which deletes all files.
this button will be visible only when the "upload" process is not active.
FileInputButton with the
actionButtons.uploadButton
prop defined will display a button which starts the upload process. This button will not be visible during the "upload" process.
FileInputButton with the
actionButtons.abortButton
prop defined will display a button which stops the upload process.
This button will be visible only during the "upload" process.

<FileInputButton
  onChange={updateFiles}
  value={files}
  autoClean
  uploadConfig={{ url: "https://www.myawsomeserver.com/upload" }}
  fakeUpload
  actionButtons={{
    position: "after",
    uploadButton: { style: { textTransform: "uppercase" } },
    abortButton: {},
    cleanButton: {},
    deleteButton: {},
   }}
/>
{files.map((file) => (
   <FileCard key={file.id} {...file} onDelete={removeFile} info preview/>
))}

Styling FileInputButton

You can use change the look and feel of the FileInputButton component

FileInputButton with the
color
prop defined will use this color as the theme color.
FileInputButton with the
textColor
prop defined will use this value to define the color of the text to be displayed.
FileInputButton with the
variant
prop defined can display the button in 3 different variants: contained(default), outlined and text.
FileInputButton with the
textTransform
prop defined can display the text with a text transform style (e.g. "uppercase").

<FileInputButton>Default color</FileInputButton>
<FileInputButton color="#6200EE">color="#6200EE"</FileInputButton>
 
<FileInputButton textColor="teal" color="aliceblue">
  textColor="teal"
</FileInputButton>
 
<FileInputButton>{"Contained"}</FileInputButton>
<FileInputButton variant="outlined">outlined</FileInputButton>
<FileInputButton variant="text">{"Text"}</FileInputButton>
 
<FileInputButton textTransform="uppercase">
   {"Text transform uppercase"}
</FileInputButton>
<FileInputButton textTransform="capitalize">
   {"Text transform capitalize"}
</FileInputButton>
<FileInputButton textTransform="lowercase">
   {"Text transform LOWERCASE"}
</FileInputButton>
<FileInputButton textTransform="none">
   {"Text transform unset"}
</FileInputButton>

Label

You can specify a fixed label for <FileInputButton/> component.
If not given, the default label is "Browse...".

<FileInputButton/>
<FileInputButton>{"Label as children"}</FileInputButton>
<FileInputButton label={"Files ui ❤️"}/>

Ripple

According to Material Design, the Ripple component provides a radial action in the form of a visual ripple expanding outward from the user's touch. Ripple is a visual form of feedback for touch events providing users a clear signal that an element is being touched. In this component, a ripple is displayed When user clicks or touches the component.
For disabling the ripple effect you can set the

disableRipple

prop to true.

<FileInputButton>{"ripple enabled"}</FileInputButton>
<FileInputButton disableRipple>{"ripple disabled"}</FileInputButton>

Disabled FileInputButton

According to Material Design a disabled state communicates when a component or element isn’t interactive, and should be deemphasized in a UI.

disabled

prop to true.

<FileInputButton>{"input enabled"}</FileInputButton>
<FileInputButton disabled>{"input disabled"}</FileInputButton>

Add or replace files

There are 2 different behaviours when user selects or drops new files:

Dropzone with the behaviour set to
"add"
will add the new files to the current array of ExtFiles.
Dropzone with the behaviour set to
"replace"
will replace the current array of ExtFiles with the new ones.

In this demo try to select files more than once on each fileinputbutton to see the difference.

<FileInputButton onChange={updateFilesAdd} value={filesAdd} label="add"/>
 
{filesAdd.map((file) => (
   <FileCard key={file.id} {...file} onDelete={removeFileAdd} info preview />
))}
 
<FileInputButton
  onChange={updateFilesReplace}
  value={filesReplace}
  variant="outlined"
  label="replace"
  behaviour="replace"
/>
{filesReplace.map((file) => (
   <FileCard key={file.id} {...file} onDelete={removeFileReplace} info preview />
))}

Localization

Although the <FileInputButton/> allows full control of label, this component uses the

localization

prop in the validation and the upload process for setting status and messages according to the language that this prop refers to.
The localization demo for this component can be found in the localization page.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.