File Upload

Overview

The HeadlessFileUpload component is a versatile File Upload component for React applications. It allows for File Uploading and Provides Custom Implemnetation Possiblilties.

Installation

To install the HeadlessFileUpload component, use npm or yarn:

npm install @locoworks/reusejs-react-file-upload
# or
yarn add @locoworks/reusejs-react-file-upload

External Dependencies

There is no External Dependencies.

Importing

Import the HeadlessFileUpload component into your React application as follows:

import { HeadlessFileUpload  } from "@locoworks/reusejs-react-file-upload";

Import the ReuseFileUpload component into your React application as follows:

import { ReuseFileUpload  } from "@locoworks/reusejs-react-file-upload";

Types/ Exported Components

The component exports the following components:

  • HeadlessFileUpload : The Base component to create a File Uploader
  • ReuseFileUpload : A customized file Uploader which provides you with many custom option to create the file uploader.

Props

The HeadlessFileUpload component accepts the following props:

  • acceptedFileTypes : Accepted File Type.
  • allowsMultiple: File Uploader allows multiple file upload or not.
  • handleAfterFileUploadHook: Function to ran as a callback or after the file is loaded. This function will be Recieve with all the loaded files as a prop.
  • children: Child component.
  • `className: CSS Classes for the input.

The ReuseFileUpload component accepts the following props: All the Props of the HeadlessFileUpload can be passed to the ReuseFileUpload.

  • baseClassName: CSS classes for the base input.
  • wrapperClassName: CSS classes for the Wrapper div.
  • showChildren: Whether to Show the Children or Not.
  • handleBeforeFileUploadHook: Async Function to run before upload of files.
  • handleAfterFileUploadHook : Async Function to run after the upload of files. This function will be Recieve with all the loaded files as a prop.
  • children: Child Components.
  • loaderStyles: CSS Styles for the loader.
  • customLoader: Custom Loader.
  • fileSize: Size of the file to be uploaded.
  • setCustomError: Error object.
  • enableDragAndDrop: If you want to Enable the DragAndDrop import of files.
  • dragAndDropRef: Pass this Input Ref to Enable the Drop and Drop for Bigger Section.
  • setIsDraggedOver: Pass this Prop Function to Control what Happen When the file Is Dragged Over and Dragged Outside.

Usage/Examples

HeadlessFileUpload

import React from "react";
import { HeadLessFileUpload } from "@locoworks/reusejs-react-file-upload";

const HeadlessFileUploadSample = () => {
	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<HeadLessFileUpload />
		</div>
	);
};

export default HeadlessFileUploadSample;

ReuseFileUpload

import React from "react";
import { ReuseFileUpload } from "@locoworks/reusejs-react-file-upload";
import { useRef } from "react";
import { ReuseButton } from "@locoworks/reusejs-react-button";

const ReuseFileUploadSample = () => {
	const ref = useRef<HTMLInputElement>(null);
	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseFileUpload
				ref={ref}
				allowsMultiple
				showChildren
				handleAfterFileUploadHook={async (e: any) => {
					console.log(e);
				}}
			>
				<ReuseButton
					className="border border-black px-2 py-1 cursor-pointer rounded-xl text-black"
					onClick={() => {
						console.log(ref.current);
						ref.current?.click();
					}}
				>
					Browse
				</ReuseButton>
			</ReuseFileUpload>
		</div>
	);
};

export default ReuseFileUploadSample;

BeforeAfterHookFileUpload

import React from "react";
import { ReuseFileUpload } from "@locoworks/reusejs-react-file-upload";
import { useRef } from "react";
import { ReuseButton } from "@locoworks/reusejs-react-button";

const BeforeAfterHookFileUpload = () => {
	const ref = useRef<HTMLInputElement>(null);

	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseFileUpload
				ref={ref}
				fileSize={39804}
				handleBeforeFileUploadHook={async () => {
					await new Promise<void>((resolve) => {
						setTimeout(() => {
							console.log("before function");
							resolve();
						}, 1);
					});
				}}
				handleAfterFileUploadHook={async (e: any) => {
					console.log(e, "this is the file type");
				}}
				baseClassName="hidden"
				showChildren
			>
				<ReuseButton
					className="border border-black px-2 py-1 cursor-pointer rounded-xl text-black"
					onClick={() => {
						console.log("hi this is the onclick of the component");
					}}
				>
					Browse
				</ReuseButton>
			</ReuseFileUpload>
		</div>
	);
};

export default BeforeAfterHookFileUpload;

MultiFileReuseFileUpload

import React from "react";
import { ReuseFileUpload } from "@locoworks/reusejs-react-file-upload";
import { useRef } from "react";
import { ReuseButton } from "@locoworks/reusejs-react-button";

const MultiFileReuseFileUpload = () => {
	const ref = useRef<HTMLInputElement>(null);
	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseFileUpload
				ref={ref}
				allowsMultiple
				baseClassName="hidden"
				showChildren
			>
				<ReuseButton
					className="border border-black px-2 py-1 cursor-pointer rounded-xl text-black"
					onClick={() => {
						alert("use mutliple files");
					}}
				>
					Browse
				</ReuseButton>
			</ReuseFileUpload>
		</div>
	);
};

export default MultiFileReuseFileUpload;

AcceptFileUpload

import React from "react";
import { ReuseFileUpload } from "@locoworks/reusejs-react-file-upload";
import { useRef } from "react";
import { ReuseButton } from "@locoworks/reusejs-react-button";

const AcceptFileUpload = () => {
	const ref = useRef<HTMLInputElement>(null);
	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseFileUpload
				ref={ref}
				allowsMultiple
				showChildren
				acceptedFileTypes={["image/png", "image/svg"]}
			>
				<ReuseButton
					className="border border-black px-2 py-1 cursor-pointer rounded-xl text-black"
					onClick={() => {
						console.log(ref.current);
						ref.current?.click();
					}}
				>
					Browse
				</ReuseButton>
			</ReuseFileUpload>
		</div>
	);
};

export default AcceptFileUpload;

DragAndDrop

import React, { useState } from "react";
import { ReuseFileUpload } from "@locoworks/reusejs-react-file-upload";
import { useRef } from "react";
import { ReuseButton } from "@locoworks/reusejs-react-button";

const DragAndDrop = () => {
	const ref = useRef<HTMLInputElement>(null);
	const dragAndDropRef = useRef<HTMLInputElement>(null);
	const [isDraggedOver, setIsDraggedOver] = useState(false);

	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10  rounded bg-gray-50">
			<div
				ref={dragAndDropRef}
				className="border border-red-300 rounded-md px-[200px] py-[100px]"
			>
				<ReuseFileUpload
					ref={ref}
					dragAndDropRef={dragAndDropRef}
					allowsMultiple
					fileSize={999999999}
					showChildren
					acceptedFileTypes={["image/png", "image/svg", "application/pdf"]}
					enableDragAndDrop={true}
					setIsDraggedOver={setIsDraggedOver}
					handleAfterFileUploadHook={async (e) => {
						console.log(e);
					}}
				>
					<ReuseButton
						className="border border-black px-2 py-1 cursor-pointer rounded-xl text-black"
						onClick={() => {
							ref.current?.click();
						}}
					>
						{isDraggedOver ? "Drop Your File Here " : ""}
						Browse
					</ReuseButton>
				</ReuseFileUpload>
			</div>
		</div>
	);
};

export default DragAndDrop;

Styling

You can style the component using Tailwind CSS and CSS. Feel free to customize the component's appearance as per your project's requirements.

HeadlessFileUploadProps

PropTypeDefault ValueDescription
classNameString""Pass this prop to style the base input of headless component.

ReuseFileUploadProps

PropTypeDefault ValueDescription
baseClassNameString""styles the base input of headless component.
wrapperClassNameString""styles the Wrapper div of the ReuseFileUpload.
loaderStylesString""styles the default loader.