File Uploader

File uploader allow users to select one or multiple files to upload to a specific location.

Example

Live Editor

<FileUploader
  postEndpoint="http://127.0.0.1:8000/upload"
  deleteEndpoint="http://127.0.0.1:8000/delete"
/>

<FileUploader
  postEndpoint="http://127.0.0.1:8000/upload"
  deleteEndpoint="http://127.0.0.1:8000/delete"
/>

Result

Variants

Custom Text

You can specify the text content of a component by providing textContent and browseButtonLabel props.

Live Editor

<FileUploader
  multiple={false}
  textContent="You can drag and drop your file or"
  browseButtonLabel="Open file manager"
  postEndpoint="http://127.0.0.1:8000/upload"
  deleteEndpoint="http://127.0.0.1:8000/delete"
/>

<FileUploader
  multiple={false}
  textContent="You can drag and drop your file or"
  browseButtonLabel="Open file manager"
  postEndpoint="http://127.0.0.1:8000/upload"
  deleteEndpoint="http://127.0.0.1:8000/delete"
/>

Result

Custom dataTestId

You can now test the component using custom testid using dataTestId component.

Live Editor

  <FileUploader
    postEndpoint="http://127.0.0.1:8000/upload"
    deleteEndpoint="http://127.0.0.1:8000/delete"
    dataTestId="custom-test-id"
  />

  <FileUploader
    postEndpoint="http://127.0.0.1:8000/upload"
    deleteEndpoint="http://127.0.0.1:8000/delete"
    dataTestId="custom-test-id"
  />

Result

Disabled

Live Editor

<FileUploader
  disabled
  postEndpoint="http://127.0.0.1:8000/upload"
  deleteEndpoint="http://127.0.0.1:8000/delete"
/>

<FileUploader
  disabled
  postEndpoint="http://127.0.0.1:8000/upload"
  deleteEndpoint="http://127.0.0.1:8000/delete"
/>

Result

File Types

You can add a list of allowed file types to let users upload only files of these types.

If the type of the selected file doesn't list in the allowedTypes array then the user could be notified about the error with typeErrorText. And allowedTypes provides hints for browsers to guide users towards selecting the correct file types.

Live Editor

<FileUploader
  allowedTypes={['png', 'jpg']}
  infoText="Allowed file types: png, jpg."
  typeErrorMessage="Invalid filetype. Please upload .png, or .jpg files."
  postEndpoint="http://127.0.0.1:8000/upload"
  deleteEndpoint="http://127.0.0.1:8000/delete"
/>

<FileUploader
  allowedTypes={['png', 'jpg']}
  infoText="Allowed file types: png, jpg."
  typeErrorMessage="Invalid filetype. Please upload .png, or .jpg files."
  postEndpoint="http://127.0.0.1:8000/upload"
  deleteEndpoint="http://127.0.0.1:8000/delete"
/>

Result

Handle Failed Requests

You can use onRequestError prop to get the error response data after a failed upload or delete request.

Live Editor

<FileUploader
  multiple={false}
  postEndpoint="https://gorest.co.in/public/v2/users"
  deleteEndpoint="http://127.0.0.1:8000/delete"
  onRequestError={(err) => console.log('error', err)}
/>

<FileUploader
  multiple={false}
  postEndpoint="https://gorest.co.in/public/v2/users"
  deleteEndpoint="http://127.0.0.1:8000/delete"
  onRequestError={(err) => console.log('error', err)}
/>

Result

HasNoDeleteEndpoint

If you are doing something else other than saving the uploaded file on the server, you may not have a deleteEndpoint. You can use the hasNoDeleteEndpoint prop to allow deleting the file after a successful response

Live Editor

<FileUploader
  hasNoDeleteEndpoint
  postEndpoint="https://jsonplaceholder.typicode.com/posts"
/>

<FileUploader
  hasNoDeleteEndpoint
  postEndpoint="https://jsonplaceholder.typicode.com/posts"
/>

Result

Label and Info Text

Use an info text to give specific instructions to help users correctly fill in the data.

You can also use it to clarify how the data will be used.

Live Editor

<>
  <FileUploader
    label="Upload image"
    infoText="Allowed file types: png, jpg. Maximum size: 500KB."
    postEndpoint="http://127.0.0.1:8000/upload"
    deleteEndpoint="http://127.0.0.1:8000/delete"
  />
  <FileUploader
    size="small"
    label="Upload image"
    infoText="Allowed file types: png, jpg. Maximum size: 500KB."
    postEndpoint="http://127.0.0.1:8000/upload"
    deleteEndpoint="http://127.0.0.1:8000/delete"
  />
</>

<>
  <FileUploader
    label="Upload image"
    infoText="Allowed file types: png, jpg. Maximum size: 500KB."
    postEndpoint="http://127.0.0.1:8000/upload"
    deleteEndpoint="http://127.0.0.1:8000/delete"
  />
  <FileUploader
    size="small"
    label="Upload image"
    infoText="Allowed file types: png, jpg. Maximum size: 500KB."
    postEndpoint="http://127.0.0.1:8000/upload"
    deleteEndpoint="http://127.0.0.1:8000/delete"
  />
</>

Result

onUploadSuccess

You can use the onUploadSuccess prop to get the response data after upload success.

Live Editor

function FileUploaderComponent() {
  const showResultData = (data) => {
    console.log(data);
  };

  return (
    <FileUploader
      postEndpoint="http://127.0.0.1:8000/upload"
      deleteEndpoint="http://127.0.0.1:8000/delete"
      onUploadSuccess={showResultData}
    />
  );
}

function FileUploaderComponent() {
  const showResultData = (data) => {
    console.log(data);
  };

  return (
    <FileUploader
      postEndpoint="http://127.0.0.1:8000/upload"
      deleteEndpoint="http://127.0.0.1:8000/delete"
      onUploadSuccess={showResultData}
    />
  );
}

Result

onUploading

You can use onUploading prop as a callback to get the file which is uploading in case of you don't need upload immediately. And this prop is required if postEndpoint is not provided.

Live Editor

function MyUploader () {
  const handleCallback = (formData) => {
    Array.from(formData, element => console.log(element[1]));
  }
  return (
    <FileUploader onUploading={handleCallback} hasNoDeleteEndpoint/>
  )
}

function MyUploader () {
  const handleCallback = (formData) => {
    Array.from(formData, element => console.log(element[1]));
  }
  return (
    <FileUploader onUploading={handleCallback} hasNoDeleteEndpoint/>
  )
}

Result

Optional field

You can show the field as optional or custom text by using the optionalText prop as string.

Live Editor

<FileUploader
  postEndpoint="http://127.0.0.1:8000/upload"
  deleteEndpoint="http://127.0.0.1:8000/delete"
  label="Label"
  optionalText="Optional"
/>

<FileUploader
  postEndpoint="http://127.0.0.1:8000/upload"
  deleteEndpoint="http://127.0.0.1:8000/delete"
  label="Label"
  optionalText="Optional"
/>

Result

Programmatically Reset

You can programmatically reset or remove uploaded files using resetUploads function from FileUploaderContext.

N.B. The FileUploader should be wrapped in a FileUploaderProvider

Live Editor

function ResetUploadsDemo() {
  const App = () => {
    const { resetUploads } = useContext(FileUploaderContext);
    return (
      <>
        <Button
          label="Reset Uploads"
          onClick={() => resetUploads({ foo: 'bar' })}
        />
        <FileUploader
          size="small"
          postEndpoint="https://jsonplaceholder.typicode.com/posts"
          deleteEndpoint="https://jsonplaceholder.typicode.com/posts/1"
        />
      </>
    );
  };

  return (
    <FileUploaderProvider>
      <App />
    </FileUploaderProvider>
  );
}

function ResetUploadsDemo() {
  const App = () => {
    const { resetUploads } = useContext(FileUploaderContext);
    return (
      <>
        <Button
          label="Reset Uploads"
          onClick={() => resetUploads({ foo: 'bar' })}
        />
        <FileUploader
          size="small"
          postEndpoint="https://jsonplaceholder.typicode.com/posts"
          deleteEndpoint="https://jsonplaceholder.typicode.com/posts/1"
        />
      </>
    );
  };

  return (
    <FileUploaderProvider>
      <App />
    </FileUploaderProvider>
  );
}

Result

Props

Name	Type	Default
deleteEndpoint Endpoint of the DELETE request	string	—
hasNoDeleteEndpoint You can use this prop to allow delete without specifying a deleteEndpoint.	boolean	—
postEndpoint Endpoint of the POST request	string	—
fieldName You can specify the field name in the internal form. It will be used by your Backend to process POST requests.	string	"file"
withCredentials Indicates whether or not cross-site Access-Control requests should be made using credentials	boolean	false
postHeaders Custom headers to be sent with a POST request	Record<string, string>	—
deleteHeaders Custom headers to be sent with a DELETE request	Record<string, string>	—
allowedTypes List of allowed file types	string[]	—
size Size of the file uploader	"small" \| "medium"	"medium"
multiple Use this prop to allow multiple selection	boolean	true
disabled Use this prop if the component should not be interactive	boolean	false
label The label of the file uploader	string	—
infoText Use this prop to help end-users interact with the component	string	—
typeErrorMessage This message will be displayed if one of the selected files has a type not included in the `allowedTypes` list.	string	—
selectErrorMessage This message will be displayed if the selection was unsuccessful. (e.g. multiple files are selected but the `multiple` prop is set to "false")	string	—
uploadErrorMessage This message will be displayed if the uploading failed	string	—
deleteErrorMessage This message will be displayed if the deletion failed	string	—
textContent This text will be displayed right before the browse button	string	"Drag & drop your files or"
browseButtonLabel The label of the browse button	string	"Browse"
id Native HTML attribute: Link . Internally, this component uses a random id. We use it to associate an input with a label element. As the random id might break snapshot tests it can be overridden by setting an explicit id.	string	—
required Native HTML attribute: Link	boolean	—
optionalText	string	—
onUploadSuccess You can use this prop to get response data on upload success	((data: Record<string, unknown>[]) => void)	—
onDeleteSuccess You can use this prop to get response on delete	(() => void)	—
onRequestError You can use this prop to get error response data when upload or delete fails	(<T>(error: T) => void)	—
onUploading This prop is required if postEndpoint is not provided. You can use this callback to get the file is uploading.	((formData: FormData) => void)	—
dataTestId Data-testid for the component	string	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Example​

Variants​

Custom Text​

Custom dataTestId​

Disabled​

File Types​

Handle Failed Requests​

HasNoDeleteEndpoint​

Label and Info Text​

onUploadSuccess​

onUploading​

Optional field​

Programmatically Reset​

Props​

Example

Variants

Custom Text

Custom dataTestId

Disabled

File Types

Handle Failed Requests

HasNoDeleteEndpoint

Label and Info Text

onUploadSuccess

onUploading

Optional field

Programmatically Reset

Props