File Upload

The FileUpload component allows you to upload the files on a website (or a webapp). You can upload the file ( like text documents, pdfs, pictures and videos etc ) by either selecting it or by dragging it into the component viewport.

You can use this component when you need to:-

• Upload one or more files.
• Upload files by dragging and dropping.

The FileUpload component is internally made up of 2 components, the <SelectFile /> component and the <DragAndDrop /> component. <SelectFile /> only allows to upload a file by manually selecting the file by opening the desktop storage window. <DragAndDrop /> allows us to upload a file both by opening the desktop storage window and by dragging the file and dropping it into the component viewport.

Props

Props	Type	Required	Description
multiple	boolean	Yes	when true, it allows you to upload multiple files. If it is false, the user can only upload a single file
getFiles	function (allSelectedFiles: FileType[]) => void	Yes	If you want to do something when a file ( or multiple files ) is uploaded, then you can do it by passing the getFiles function
showImageWall	boolean	No	If you want to hide the image wall ( i.e the component that shows the uploaded files ), then you can set this to false. Its default value is true Note:- This prop is only passed to the <SelectFile /> component internally by FileUpload.
showDeleteIcon	boolean	No	If you want to hide the delete icon, then you can set this to false. Its default value is true Note:- This prop is only passed to the <SelectFile /> component internally by FileUpload.
dragging	boolean	No	If you want to enable the drag-and-drop feature for file upload, then you can set this to true. Its default value is false

Note:- The type FileType is used so that all the returned files have a common structure. All returned files will have a url ( where they are stored in the system ), name, id, size ( in kb ) and type ( like pdf, image/jpeg, image/png, text etc ).

http://localhost:3000

Upload Files

Your files will appear here

src/components/FileUploadExample/index.tsx

import React from "react";
import { FileUpload } from "canary-design";

function FileUploadExample() {
  return (
    <div>
      <FileUpload
        multiple
        getFiles={(files: unknown) => {
          console.log("files from getFiles: ", files);
        }}
        showImageWall={true}
        showDeleteIcon={true}
      />
    </div>
  );
}

export { FileUploadExample };

The above example shows the FileUpload component when drag-and-drop is disabled. To checkout the component with drag-and-drop enabled, checkout the example shown below.

http://localhost:3000

Browse or drop files

src/components/FileUploadDraggingExample/index.tsx

import React from "react";
import { FileUpload } from "canary-design";

function FileUploadDraggingExample() {
  return (
    <div>
      <FileUpload
        multiple
        getFiles={(files: unknown) => {
          console.log("files from getFiles: ", files);
        }}
        showImageWall={true}
        showDeleteIcon={true}
        dragging // <-- dragging is enabled
      />
    </div>
  );
}

export { FileUploadDraggingExample };