@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

ImageExportTypes

MultiImageUpload

Props

MultiImageExportTypes

FileUpload

Props

ImageExportTypes

MultiFileUpload

Props

MultiImageExportTypes

Connect with me