https://github.com/siamahnaf/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.
https://github.com/siamahnaf/upload
react-upload upload upload-file upload-image upload-images
Last synced: 11 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/siamahnaf/upload
- Owner: siamahnaf
- Created: 2025-01-29T16:49:18.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-13T14:09:54.000Z (about 1 year ago)
- Last Synced: 2025-04-05T04:07:43.771Z (11 months ago)
- Topics: react-upload, upload, upload-file, upload-image, upload-images
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@siamf/upload
- Size: 45.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @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
```bash
$ npm i @siamf/upload
```
# Usage
### `ImageUpload`
```javascript
"use client"
import { useState } from "react";
import { ImageUpload, ImageType } from "@siamf/upload";
const Page = () => {
//State
const [selectedImage, setSelected] = useState(null);
const onHandleFile = (value: ImageType) => {
setSelected(value);
}
return (
{({
isDragging,
dragProps,
onImageUpload,
imageInfo,
onImageRemove,
errors,
}) => (
Upload Now
{imageInfo &&
}
Remove File
)}
);
};
export default Page;
```
### `MultiImageUpload`
```javascript
"use client"
import { useState } from "react";
import { MultiImageUpload, MultiImageType } from "@siamf/upload";
const Page = () => {
//State
const [imageList, setImageList] = useState([]);
const onHandleFile = (value: MultiImageType) => {
setImageList(value);
}
return (
{({
isDragging,
dragProps,
onImageUpload,
imageInfo,
onImageRemove,
onImageRemoveAll,
onImageUpdate,
errors,
}) => (
Upload Now
{imageInfo.map((item, i) => (
onImageRemove(i)}>Remove File
onImageUpdate(i)}>Update File
))}
Remove All
)}
);
};
export default Page;
```
### `FileUpload`
```javascript
"use client"
import { useState } from "react";
import { FileUpload, FileType } from "@siamf/upload";
const Page = () => {
//State
const [selectedFile, setSelected] = useState(null);
const onHandleFile = (value: FileType) => {
setSelected(value);
}
return (
{({
isDragging,
dragProps,
onFileUpload,
fileInfo,
onFileRemove,
errors,
}) => (
Upload Now
{fileInfo &&
{fileInfo.fileInfo.name}
}
Remove File
)}
);
};
export default Page;
```
### `MultiFileUpload`
```javascript
"use client"
import { useState } from "react";
import { MultiFileUpload, MultiFileType } from "@siamf/upload";
const Page = () => {
//State
const [fileList, setFileList] = useState([]);
const onHandleFile = (value: MultiFileType) => {
setFileList(value);
}
return (
{({
isDragging,
dragProps,
onFileUpload,
fileInfo,
onFileRemove,
onFileRemoveAll,
onFileUpdate,
errors,
}) => (
Upload Now
{fileInfo.map((item, i) => (
{item?.fileInfo.name}
onFileRemove(i)}>Remove File
onFileUpdate(i)}>Update File
))}
Remove All
)}
);
};
export default Page;
```
**Example for Validation**
```javascript
...
{({ imageList, onImageUpload, onImageRemoveAll, errors }) => (
errors &&
{errors.acceptType && Your selected file type is not allow}
{errors.maxFileSize && Selected file size exceed maxFileSize}
)}
...
```
# 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](https://www.siamahnaf.com/)
- Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)
- LinkedIn - [https://www.linkedin.com/in/siamahnaf/](https://www.linkedin.com/in/siamahnaf/)
- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)