Files Management UI Components

ℹ️

Before you can use these UI Components, please do the basic setup.

`<FileUpload/>`

Description

The <FileUpload/> component represents a button which opens a file selector and starts uploads. Please refer to the files feature guide for more information and instructions.

Integration

ℹ️

This component can be used in various ways. A good way to learn about it, is to look into the implementation of the Kickstarter: /src/components/file/upload-file.tsx (opens in a new tab)

You can easily add the <FileUpload/> component to your application by adding this code snippet to your component:

import {FileUpload} from "@roq/nextjs";
 
<FileUpload
    accept={["image/*"]}
    fileCategory="USER_FILES"
    onUploadSuccess={({url, id, ...rest}) => {
        console.log({id, url});
        // optional: send file ID to server-side by calling your API 
    }}
/>

Success handler

After the file was uploaded, the onUploadSuccess handler is called. This way you can send the file ID to your backend application, which is required in one of these cases:

you want to relate the file to another object
you want to change the visibility of the file (e.g. from "public" to "private").

Read more about these concepts in the tutorials section.

Props

The <FileUpload/> component has multiple props:

Prop	Type	Description	Default
accept	string[]	List of mime-types that the drop zone should support	All
fileCategory	string	File category key defined in the console
onUploadFail	function	Callback, invoked when upload gets failed
onUploadSuccess	function	Callback, invoked when upload gets successful

`<FileDropzone/>`

Description

The <FileDropzone/> component represents an area on your application where users can drag and drop files to be uploaded. Please refer to the files feature guide for more information and instructions.

Integration

You can easily add the <FileDropzone/> component to your application by using this code:

import {FileDropzone} from "@roq/nextjs";
 
<FileDropzone
    accept={["image/*"]}
    fileCategory="USER_FILES"
    onUploadSuccess={(data, id) =>
        console.log("(onUploadSuccess)", { data, id })
    }
    onFileEdit={(file) => console.log("(onFileEdit)", { file })}
    onUploadFail={(err) => console.error("(onUploadFail)", err)}
/>

Props

The props of the <FileDropzone/> component are the same as for <FileUpload/>.

`<FileActiveUploads/>`

Description

The <FileActiveUploads/> component shows a progress bar of all active files uploads. Users can abort and restart uploads. This component is typically shown on the bottom right corner of your application but you can place it wherever you like.

Integration

To add the <FileActiveUploads/> component to your application, you can use the following code:

import {FileActiveUploads} from "@roq/nextjs";
 
<FileActiveUploads
    files={[]}
    onCancel={function noRefCheck() {
    }}
    onRestart={function noRefCheck() {
    }}
/>

Props

Prop	Type	Description	Default
`files`	array	List of files that are currently uploaded. Each file is represented as an object, see below.	`[]`
`files.abortController`	`AbortController`	Instance of Abort controller object that allows you to abort one or more DOM requests as and when desired.	`undefined`
`name`	String	Name of the file
`percentage`	Number	File percentage which was uploaded
`size`	Number	Size of file in bytes
`status`	ActiveUploadStatusEnum	Status of the file	UPLOADING
`temporaryId`	String	Unique Identifier for the files list
`uploadUrl`	String	Upload URL, to upload file
`onCancel`	function	Callback function which is triggered when User Clicks on Cancel (X) Icon, contains logic on how to cancel file upload
`onRestart`	function	Callback function which is triggered when User Clicks on restart Icon, contains logic on how to restart file upload

API Overview