@siamf/upload

A fully headless React package for handling image and file uploads with complete UI control. It provides four flexible components— ImageUpload, MultiImageUpload, FileUpload, and MultiFileUpload —using render props for seamless customization. Perfect for developers who need total control over the upload experience.

• Easy to use
• Full UI Control (This package only provide functionality)
• SSR Support
• Latest React Support

Installation

$ npm i @siamf/upload

Usage

ImageUpload

"use client"
import { useState } from "react";
import { ImageUpload, ImageType } from "@siamf/upload";

const Page = () => {
  //State
  const [selectedImage, setSelected] = useState<ImageType>(null);

  const onHandleFile = (value: ImageType) => {
    setSelected(value);
  }

  return (
    <div className="px-40 py-40">
      <ImageUpload
        onChange={onHandleFile}
        value={selectedImage}
      >
        {({
          isDragging,
          dragProps,
          onImageUpload,
          imageInfo,
          onImageRemove,
          errors,
        }) => (
          <div>
            <div className={`border border-solid border-red-600 p-8 ${isDragging && "bg-green-600"}`} {...dragProps} onClick={onImageUpload}>
              Upload Now
            </div>
            <div>
              {imageInfo &&
                <div className="my-4 border-4 p-5 border-solid border-black">
                  <img src={imageInfo.dataURL} />
                </div>
              }
              <button onClick={onImageRemove}>
                Remove File
              </button>
            </div>
          </div>
        )}
      </ImageUpload>
    </div>
  );
};

export default Page;

MultiImageUpload

"use client"
import { useState } from "react";
import { MultiImageUpload, MultiImageType } from "@siamf/upload";

const Page = () => {
  //State
  const [imageList, setImageList] = useState<MultiImageType>([]);

  const onHandleFile = (value: MultiImageType) => {
    setImageList(value);
  }

  return (
    <div className="px-40 py-40">
      <MultiImageUpload
        onChange={onHandleFile}
        value={imageList}
      >
        {({
          isDragging,
          dragProps,
          onImageUpload,
          imageInfo,
          onImageRemove,
          onImageRemoveAll,
          onImageUpdate,
          errors,
        }) => (
          <div>
            <div className={`border border-solid border-red-600 p-8 ${isDragging && "bg-green-600"}`} {...dragProps} onClick={onImageUpload}>
              Upload Now
            </div>
            <div>
              {imageInfo.map((item, i) => (
                <div className="my-4 border-4 p-5 border-solid border-black">
                  <img src={item?.dataURL} />
                  <button onClick={() => onImageRemove(i)}>Remove File</button>
                  <button onClick={() => onImageUpdate(i)}>Update File</button>
                </div>
              ))}
              <button onClick={onImageRemoveAll}>
                Remove All
              </button>
            </div>
          </div>
        )}
      </MultiImageUpload>
    </div>
  );
};

export default Page;

FileUpload

"use client"
import { useState } from "react";
import { FileUpload, FileType } from "@siamf/upload";

const Page = () => {
  //State
  const [selectedFile, setSelected] = useState<FileType>(null);

  const onHandleFile = (value: FileType) => {
    setSelected(value);
  }

  return (
    <div className="px-40 py-40">
      <FileUpload
        onChange={onHandleFile}
        value={selectedFile}
      >
        {({
          isDragging,
          dragProps,
          onFileUpload,
          fileInfo,
          onFileRemove,
          errors,
        }) => (
          <div>
            <div className={`border border-solid border-red-600 p-8 ${isDragging && "bg-green-600"}`} {...dragProps} onClick={onFileUpload}>
              Upload Now
            </div>
            <div>
              {fileInfo &&
                <div className="my-4 border-4 p-5 border-solid border-black">
                  <p>{fileInfo.fileInfo.name}</p>
                </div>
              }
              <button onClick={onFileRemove}>
                Remove File
              </button>
            </div>
          </div>
        )}
      </FileUpload>
    </div>
  );
};

export default Page;

MultiFileUpload

"use client"
import { useState } from "react";
import { MultiFileUpload, MultiFileType } from "@siamf/upload";

const Page = () => {
  //State
  const [fileList, setFileList] = useState<MultiFileType>([]);

  const onHandleFile = (value: MultiFileType) => {
    setFileList(value);
  }

  return (
    <div className="px-40 py-40">
      <MultiFileUpload
        onChange={onHandleFile}
        value={fileList}
      >
        {({
          isDragging,
          dragProps,
          onFileUpload,
          fileInfo,
          onFileRemove,
          onFileRemoveAll,
          onFileUpdate,
          errors,
        }) => (
          <div>
            <div className={`border border-solid border-red-600 p-8 ${isDragging && "bg-green-600"}`} {...dragProps} onClick={onFileUpload}>
              Upload Now
            </div>
            <div>
              {fileInfo.map((item, i) => (
                <div className="my-4 border-4 p-5 border-solid border-black">
                  <p>{item?.fileInfo.name}</p>
                  <button onClick={() => onFileRemove(i)}>Remove File</button>
                  <button onClick={() => onFileUpdate(i)}>Update File</button>
                </div>
              ))}
              <button onClick={onFileRemoveAll}>
                Remove All
              </button>
            </div>
          </div>
        )}
      </MultiFileUpload>
    </div>
  );
};

export default Page;

Example for Validation

...
  {({ imageList, onImageUpload, onImageRemoveAll, errors }) => (
    errors && <div>
      {errors.acceptType && <span>Your selected file type is not allow</span>}
      {errors.maxFileSize && <span>Selected file size exceed maxFileSize</span>}
    </div>
  )}
...

Available Options

ImageUpload

Props

Name	Description	Type	Default/Required
inputProps	Available props for input field	HTMLProps	optional
acceptType	Image Accept type	ImageAcceptType | Exclude[]	ImageAcceptType.ALL
maxFileSize	Max file size validation(KB)	number	optional
resolutionWidth	Image resolution width validation	number	optional
resolutionHeight	Image resolution height validation	number	optional
resolutionType	Resolution type for validations	"absolute" | "less" | "more" | "ratio"	"absolute"
children	UI for upload zone or button	(props: ImageExportTypes) => React.ReactNode	required
onChange	Image upload listener function	(value: ImageType) => void;	required
value	Default Value	ImageType	required
onError	Image upload error listener	(errors: ImageErrorTypes) => void;	optional

ImageExportTypes

dragProps	Element for implementing drag and drop features	Object
isDragging	Listen is it dragging or not	boolean
onImageUpload	Handler for triggering image upload	() => void
imageInfo	Selected image information	ImageType
errors	Error listener	ImageErrorTypes
onImageRemove	Handler for removing selected Image	() => void

MultiImageUpload

Props

Name	Description	Type	Default/Required
inputProps	Available props for input field	HTMLProps	optional
acceptType	Image Accept type	ImageAcceptType | Exclude[]	ImageAcceptType.ALL
maxFileSize	Max file size validation(KB)	number	optional
resolutionWidth	Image resolution width validation	number	optional
resolutionHeight	Image resolution height validation	number	optional
resolutionType	Resolution type for validations	"absolute" | "less" | "more" | "ratio"	"absolute"
children	UI for upload zone or button	(props: MultiImageExportTypes) => React.ReactNode	required
onChange	Image upload listener function	(value: MultiImageType) => void	required
value	Default Value	MultiImageType	required
onError	Image upload error listener	(errors: MultiImageErrorTypes) => void	optional
maxNumber	Maximum files to be selected	number	10

MultiImageExportTypes

dragProps	Element for implementing drag and drop features	Object
isDragging	Listen is it dragging or not	boolean
onImageUpload	Handler for triggering image upload	() => void
imageInfo	Selected image information	MultiImageType
errors	Error listener	MultiImageErrorTypes
onImageRemove	Handler for removing selected Image	(index: number) => void
onImageUpdate	Handler for updating a particular image	(index: number) => void
onImageRemoveAll	Handler for removing all image	() => void

FileUpload

Props

Name	Description	Type	Default/Required
inputProps	Available props for input field	HTMLProps	optional
acceptType	File Accept type	FileAcceptType | Exclude[]	FileAcceptType.ALL
maxFileSize	Max file size validation(KB)	number	optional
children	UI for upload zone or button	(props: FileExportTypes) => React.ReactNode	required
onChange	File upload listener function	(value: FileType) => void	required
value	Default Value	FileType	required
onError	File upload error listener	(errors: FileErrorTypes) => void;	optional

ImageExportTypes

dragProps	Element for implementing drag and drop features	Object
isDragging	Listen is it dragging or not	boolean
onImageUpload	Handler for triggering file upload	() => void
fileInfo	Selected file information	FileType
errors	Error listener	FileErrorTypes
onFileRemove	Handler for removing selected File	() => void

MultiFileUpload

Props

Name	Description	Type	Default/Required
inputProps	Available props for input field	HTMLProps	optional
acceptType	File Accept type	FileAcceptType | Exclude[]	FileAcceptType.ALL
maxFileSize	Max file size validation(KB)	number	optional
children	UI for upload zone or button	(props: MultiFileExportTypes) => React.ReactNode	required
onChange	File upload listener function	(value: MultiFileType) => void	required
value	Default Value	MultiFileType	required
onError	File upload error listener	(errors: MultiFileErrorTypes) => void	optional
maxNumber	Maximum files to be selected	number	10

MultiImageExportTypes

dragProps	Element for implementing drag and drop features	Object
isDragging	Listen is it dragging or not	boolean
onFileUpload	Handler for triggering file upload	() => void
fileInfo	Selected file information	MultiFileType
errors	Error listener	MultiFileErrorTypes
onFileRemove	Handler for removing particular file	(index: number) => void
onFileUpdate	Handler for updating a particular file	(index: number) => void
onFileRemoveAll	Handler for removing all file	() => void

Stay in touch

• Author - Siam Ahnaf
• Website - https://www.siamahnaf.com/
• LinkedIn - https://www.linkedin.com/in/siamahnaf/
• Github - https://github.com/siamahnaf