"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;

"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;

"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;

"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;

...
  {({ 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>
  )}
...