Usage

Learn the basics of working with Files UI components.

Quick start (Basic exaple)

The following code snippet demonstrates a simple app that uses the Files UI Dropzone and FileMosaic components:

In this demo we set dropzone with the minimun props that allows you to get done fast. These props are onChange and value props. This example is the same as the one you will find in the Basic dropzone section.

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

You can play around with this code in the interactive Code Sandbox demo below. Try adding the accept prop to the Dropzone to see the changes:

Advanced Example

In this example we set dropzone with the props that allows validation and upload. These props are:

For validating: accept, maxFiles and maxFileSize
For uploading: uploadConfig
For simulating the upload process: fakeUpload

Max file size: 2.00 MB, Files 0/3,

Drag'n drop files here or click to browse

<Dropzone
  onChange={updateFiles}
  minHeight="195px"
  value={extFiles}
  accept="image/*, video/*"
  maxFiles={3}
  maxFileSize={2 * 1024*1024}
  label="Drag'n drop files here or click to browse"
  uploadConfig={{
     // autoUpload: true
    url: BASE_URL + "/file/28048465460",
    cleanOnUpload: true,
   }}
  onUploadStart={handleStart}
  onUploadFinish={handleFinish}
   //fakeUpload
  actionButtons={{
    position: "after",
    abortButton: {},
    deleteButton: {},
    uploadButton: {},
   }}
>
     {extFiles.map((file) => (
       <FileMosaic
         {...file}
        key={file.id}
        onDelete={onDelete}
        onSee={handleSee}
        onWatch={handleWatch}
        onAbort={handleAbort}
        onCancel={handleCancel}
        resultOnTooltip
        preview
        info
       />
     ))}
</Dropzone>
<FullScreen
  open={imageSrc !== undefined}
  onClose={() => setImageSrc(undefined)}
>
   <ImagePreview src={imageSrc} />
</FullScreen>
<FullScreen
  open={videoSrc !== undefined}
  onClose={() => setVideoSrc(undefined)}
>
   <VideoPreview src={videoSrc} autoPlay controls />
</FullScreen>