FileMosaic

File mosaics are compact elements that represent a file in the UI. They can be used for just showing general info of the file, or either to allow the user to interact with them.

This widget allow users to see information of

Files

and / or trigger actions.

While included here as a standalone component, the most common use will be to display the result of the "onChange" event of <Dropzone/> or <InputButton/> components, so some of the behavior demonstrated here is not totally shown in context.

Basic FileMosaic

The FileMosaic component supports displaying information from a

File

object or from given props.
Also, the

onDelete

prop is used to remove the file selection.

<>
   {value ? (
     <FileMosaic {...value} onDelete={removeFile} />
   ) : (
     <FileInputButton value={value ? [value] : []} onChange={updateFiles} />
   )}
   <FileMosaic {...sampleFileProps} />
</>
 
// file props
const sampleFileProps = {
  id: ":0:",
  size: 28 * 1024 * 1024,
  type: "text/plain",
  name: "file created from props.jsx",
};

FileInputButton

For completeness, some of these examples include <FileInputButton/> component for allowing the user to select files. For further information of this component check out the FileInputButton 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.

Image preview

By setting the preview prop to

true

the component will show an image preview instead of a file icon.
To acomplish this task this component will take the imageUrlprop or will read the

File

object if given and if it is an image.
Finally, the

info

prop is used to show the complete information of the file.

<>
   {value ? (
     <FileMosaic {...value} onDelete={removeFile} info preview/>
   ) : (
     <FileInputButton onChange={updateFile} accept="image/*"/>
   )}
   <FileMosaic {...sampleFileProps} info/>
</>
 
// file props
const sampleFileProps = {
    id: "fileId",
    size: 28 * 1024 * 1024,
    type: "image/jpeg",
    name: "Thor arrives wakanda.jpg",
    imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
};

As you can notice, whenimageUrl prop is present, the preview prop is not needed since it has more priority.
On the other side, for displaying an image preview as a result of reading an image File it is necesary to set the preview prop, otherwise a default image preview will be shown in order to save memory.

Validation

The valid prop can be set to

true

false

undefined

Typically, <Dropzone/> or <FileInputButton/> components set this prop when validating the input from a given criteria. You can see the behaviour mentioned in the following demos:

Uploading status

The uploadStatus prop can be set to

"preparing"

"uploading"

"aborted"

"error"

"success"

. Also the uploadMessage prop is used for displaying the error or success message. Finally, the progress prop can be used to show the current progress of the upload process.
Each of the following examples demonstrates one state combination of the FileMosaic component.

preparing stage

uploading stage

upload result stage

As you can see, you have full control of the FileMosaic upload props. You can take advantage of them to ake your own upload function and show the user the progress.
On the other hand, you can also leverage the capability of <Dropzone/> and <FileInputButton/> components since they also manage the

uploadStatus

prop for you when upload is enabled. You can see the behaviour mentioned in the following demos:

Actions: info, delete, see, watch, download

You can use the following actions.

FileMosaic with the onDelete prop will display a delete icon.
FileMosaic with the info prop will display an "info" icon that will display an info layer.
FileMosaic with the onSee prop will display the "see" button that can be used to retrieve an image
URI
obtained by reading a
File
object if given or just the
imageUrl
prop if given. In the first case, the file must be an image.
FileMosaic with the onWatch prop will display the "play" icon that can be used to retrieve the video as a
File
object if given or just the
videoUrl
prop if given. The file must be an video.
FileMosaic with the downloadUrl prop will display the "download" icon that can be used to start the download. If the onDownload prop is given, the "download" icon will also be visible, but it will be taken as the user will perform their own download.

downloadUrl and onDownload props

When only downloadUrl is specified, FileMosaic will perform the download only for same-origin URLs since it uses the anchor tag under the hood.
If the resource is located in any other host, it will open a new tab and display the content.
For avoiding that behaviour you can do you own download implementation by overriding the download function by setting the onDownload prop.
You can check an example here:

Download a File from different host

Dark mode

The FileMosaic component supports dark mode by setting the prop

darkMode

true

<>
   <FileMosaic {...sampleFileProps} info onDelete={removeFile} />
   <FileMosaic {...sampleFileProps} info onDelete={removeFile} darkMode/>
</>

Smart image fit

FileMosaic with

smartImgFit

prop will display image according to its heigh and width.
Image with height greater than its width has a "portrait" orientation. Otherwise it has a "landscape" orientation.

API

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