React File Management with Preview - Fully Customized

React file management system built with React, Next.js and TypeScript that allows for single and multiple file uploading with a preview feature. It allows you to select files and preview them, returning an array of selected files. It allows customizing design by overriding the style classes.

---

Table of Contents

• Getting Started
  • Prerequisites
  • Installation
• Properties and Events
• Usage

---

Getting Started

Follow below instructions to configure this package into your project.

Prerequisites

Before you begin, make sure you have the following software installed:

• Node.js - v20.x
• React

Installation

Using npm:

npm install @canopassoftware/react-file-upload

Using yarn:

yarn add @canopassoftware/react-file-upload

Note: we have already configure this in demo project. so, refer it for more information.

---

Properties and Events

props

• callback="handleFileUploading"

  • required
  • Description: Add your upload callback function while receive the selected file/files

• uploadedFile="setPreviewFileData" - For single file component

  • required
  • Uploaded file object with below format,

    {
      fileType: string,
      fileUrl: string,
      fileName: string
    }
    

• uploadedFiles="setPreviewFilesData" - For multiple file component

  • required
  • Uploaded files array with below format,

    [
      {
        fileType: string,
        fileUrl: string,
        fileName: string
      }
    ]
    

• uploadBtnText="'Upload'"

  • default : Upload
  • Text for save or upload file button

• progressBtnText="'Uploading...'"

  • default : Uploading...
  • Text for the progress bar, showing file uploading under the process

• removeBtnText="'Uploading...'"

  • default : x
  • Text for remove file button

• accept="'image/jpg, image/jpeg, image/png, video/mp4, audio/mp3, application/zip'"

  • Validation for file type. By default it will select all the type of file.

• (filetype)Preview="'(file location)'"

  • default : Default file icons as per file types
  • Set path for your customized icon if needed

---

Usage

To manage and preview files with this library, follow these steps:

Import the library into your file

1// using CommonJS
2const {
3  SingleFileUpload,
4  MultipleFileUpload,
5} = require("@canopassoftware/react-file-upload");
6
7OR;
8
9// using esModules
10import {
11  SingleFileUpload,
12  MultipleFileUpload,
13} from "@canopassoftware/react-file-upload";

Use default CSS

• Use style.css for UI by importing like,

1import "@canopassoftware/react-file-upload/style.css";

Creating custom UI with file preview

• You can customize file uploading UI in inner part of component.

• The file containing file object with following keys, we will use this object to show preview.

  1file = file: {
  2  previewType: 'video', // type of the preview. like, file is image or video
  3  previewUrl: 'data:image/jpeg;base64,/9j/D1AAAACRsdW1pAAAD...', // URL of the file preview
  4  previewName: 'a152148640581.62d918f12a0b4.mp4', // preview file name
  5  isDragging: false // you will get it `true` when you dragging the file on design
  6}

Single File Upload Management

1"use client";
2
3import Image from "next/image";
4import React, { useState } from "react";
5import { SingleFileUpload } from '@canopassoftware/react-file-upload';
6
7export default function App() {
8  const [previewFileData, setPreviewFileData] = useState(
9    {} as {
10      previewType: string;
11      previewUrl: string | ArrayBuffer | null;
12      previewName: string;
13      isDragging: boolean;
14    }
15  );
16
17  // callback function
18  const handleFileUploading = async (file: any) => {
19    await new Promise((resolve) => setTimeout(resolve, 2000));
20    setPreviewFileData({
21      previewType: "image",
22      previewUrl: "https://picsum.photos/300/224",
23      previewName: file.name,
24      isDragging: false,
25    });
26  };

1  return (
2    <main className="min-h-screen flex flex-col justify-between p-5">
3      <SingleFileUpload
4        uploadedFile={setPreviewFileData}
5        callback={handleFileUploading}
6        uploadBtnText={"Save"}
7        progressBtnText={"Saving..."}
8      >
9      <!-- write a code to manage file design or use code from examples -->
10      </SingleFileUpload>
11    </main>
12  );
13}

Multiple File Upload Management

1"use client";
2
3import Image, { StaticImageData } from "next/image";
4import React from "react";
5import MultipleFileUpload from "@canopassoftware/react-file-upload";
6
7export default function App() {
8  const uploadedFiles = [] as Array<{
9    fileType: string;
10    fileUrl: string | StaticImageData;
11    fileName: string;
12  }>;
13
14  // callback function
15  const handleFilesUploading = async (files: any) => {
16    const uploadedFiles = [];
17
18    for (var i = 0; i < files.length; i++) {
19      uploadedFiles.push({
20        fileType: "image",
21        fileUrl: images[i],
22        fileName: files[i].name,
23      });
24    }
25
26    await new Promise((resolve) => setTimeout(resolve, 5000));
27    return uploadedFiles;
28  };

1return (
2    <main className="min-h-screen flex flex-col justify-between p-5 dark:bg-black">
3      <MultipleFileUpload
4        accept=""
5        uploadedFiles={uploadedFiles}
6        callback={handleFilesUploading}
7        removeBtnText={"remove"}
8        uploadBtnText={"Save"}
9        progressBtnText={"Saving..."}
10      >
11        {(file: any) => (
12          <!-- write a code to manage file design or use code from examples -->
13        )}
14      </MultipleFileUpload>
15    </main>
16  );
17}