RhFileUploader

The RhFileUploader component is a file uploader component built using the Uppy library and React framework. It provides a UI for selecting and uploading files to a server.

Usage

Once installed, you can import the RhFileUploader component into your React application:

copy

import {RhFileUploader} from "@rhythm-ui/react"

Then, you can use the RhFileUploader component in your JSX code:

Modal

copy

function Default() {
  const [isOpen, setIsOpen] = useState(false);

  // Use this method with custom API to fetch Pre-signer
  const preProcessor = async (files) => {
    const url = "https://v2.convertapi.com/upload";
    return files.map((file) => {
      let data = {
        fileId: file.id,
        endpoint: url,
        method: "POST",
      };
      return data;
    });
  };

  return (
    <>
      <RhButton onClick={() => setIsOpen(true)}>Upload File</RhButton>
      <RhFileUploader
        height="90vh"
        width="100%"
        plugins={["ImageEditor", "Webcam"]}
        type="modal"
        open={isOpen}
        onRequestClose={() => setIsOpen(false)}
        preUpload={preProcessor}
        postUpload={(files) => console.debug(files)}
      />
    </>
  );
}

RhFileUploader Props

Name	Type	Default	Description
preUpload	(files: any[]) => any		Add a preprocessing function. fn gets called with a list of files before an upload starts. fn should return a Promise. Its resolution value must be an array of objects where each object must contain these compulsory fields: - <code>fileId</code> Id of the file - <code>endpoint</code> Url to which the file will be uploaded - <code>method</code> HTTP method to use while uploading file - <code>metaFields</code> Object containing other fields which need to be passed to formData of upload request.
postUpload	(files: UppyFile[]) => void		Add a postprocessing function. fn is called with a list of files when an upload has finished. Each file object will contain a <code>response</code> field, containing a response from the server for that file. This hook can be used to do any finishing work. For example, you could do an HTTP API call to your server for all images/files that were uploaded.
getBuffer	(files: FileType[]) => void		Add a function to get file Buffer. fn is called with a list of files with id and data (buffer). you can use the buffer to handle the file upload manually.
plugins	pluginOptions[]		Array of strings for controlling file uploader features. Currently supported values: - <code>ImageEditor</code> Add image editor to file uploader - <code>Webcam</code> Allow webcam to be used for uploading images
restrictions	Restrictions		Provide rules and conditions to limit the type and/or number of files that can be selected. Parameters supported: - <code>maxFileSize</code> maximum file size in bytes for each individual file - <code>minFileSize</code> minimum file size in bytes for each individual file - <code>maxTotalFileSize</code> maximum file size in bytes for all the files that can be selected for upload - <code>maxNumberOfFiles</code> total number of files that can be selected - <code>minNumberOfFiles</code> minimum number of files that must be selected before the upload - <code>allowedFileTypes</code> array of wildcards image/, exact mime types image/jpeg, or file extensions .jpg: ['image/', '.jpg', '.jpeg', '.png', '.gif']
height	string		Set height of the file uploader
width	string		Set width of the file uploader
disabled	boolean	false	Disable file uploader
uniqueID	string	RhFileUploader
type	"mini" \| "regular" \| "modal"	regular	Set type of file uploader

Type

The type property is a string that determines the type of file uploader, and can be set to one of three values: regular, modal, or mini.

copy

function Mini() {
  const [uploadedFile, setUploadedFile] = useState();
  const [progress, setProgress] = useState(0);

  const preProcessor = async (files) => {
    const url = "https://v2.convertapi.com/upload";
    return files.map((file) => {
      let data = {
        fileId: file.id,
        endpoint: url,
        method: "POST",
      };
      return data;
    });
  };

  return (
    <div className="w-fit h-full flex items-center gap-2">
      <RhFileUploader
        type="mini"
        preUpload={preProcessor}
        postUpload={(files) => {
          setUploadedFile(files[0].data.name);
        }}
        miniTitle="Choose Picture"
        restrictions={{
          allowedFileTypes: ["image/*"],
          maxNumberOfFiles: 1,
        }}
        onUploadProgress={(progress) => {
          setProgress(progress);
          console.debug("Progress:", progress);
        }}
        className="border-2 p-2"
      />
      {progress < 1 && progress < 100 ? (
        <div>{uploadedFile || "No file Chosen"}</div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

Example of preProcessor

Using custom upload url

copy

function Default() {
  const [isOpen, setIsOpen] = useState(false);

  // Use this method with custom API to fetch Pre-signer
  const preProcessor = async (files) => {
    const url = "https://v2.convertapi.com/upload";
    return files.map((file) => {
      let data = {
        fileId: file.id,
        endpoint: url,
        method: "POST",
        headers: {}, // Add headers if required
        metaFields: {}, // Add metadata if required, metadata will be part of request body.
      };
      return data;
    });
  };

  return (
    <>
      <RhButton onClick={() => setIsOpen(true)}>Upload File</RhButton>
      <RhFileUploader
        height="90vh"
        width="100%"
        plugins={["ImageEditor", "Webcam"]}
        type="modal"
        open={isOpen}
        onRequestClose={() => setIsOpen(false)}
        preUpload={preProcessor}
        postUpload={(files) => console.debug(files)}
      />
    </>
  );
}

Return preUploadBuffer object if a file buffer wanted.

copy

function FileUploader() {
  const [uploadedFile, setUploadedFiles] = useState();
  const [progress, setProgress] = useState(0);

  const preProcessor = async (files) => {
    return files.map((file) => {
      let data = {
        fileId: file.id,
        isFileBuffer: true,
      };
      return data;
    });
  };
  return (
    <div className="w-fit h-full flex items-center gap-2">
      <RhFileUploader
        type="mini"
        preUpload={preProcessor}
        miniTitle="Choose Picture"
        restrictions={{
          allowedFileTypes: ["image/*"],
          maxNumberOfFiles: 1,
        }}
        onUploadProgress={(progress) => {
          setProgress(progress);
          console.debug("Progress:", progress);
        }}
        isBuffer={true}
        postUpload={(files) => {
          files.map((file) => {
            file.data.arrayBuffer().then((buffer) => {
              // Use this buffer in API or set state variable to use later.
              setUploadedFiles([...uploadedFile, buffer]);
            });
          });
        }}
        className="border-2 p-2"
      />
      {progress < 1 && progress < 100 ? (
        <div>{uploadedFile || "No file Chosen"}</div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}