@siamf/upload NPM

@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>
  )}
...