React File Hooks

React File Hooks is a hook simply for file upload It can be used with a simple <input type="file"/>

🖥️Live Example

Installation

npm install @toranj/react-file-hooks axios

or

yarn add @toranj/react-file-hooks axios

Usage

useUploader

import*asReactfrom'react';import{useUploader}from'@toranj/react-file-hooks';typeTriggerProps={styles?: {root?: React.CSSProperties,button?: React.CSSProperties};name?: string;onClick?: (taskId: string)=>void}constTrigger=(props: TriggerProps)=>{const{ name, styles, onClick }=props;constinputRef=React.useRef<HTMLInputElement>(null);return(<divstyle={styles?.root}><buttonstyle={styles?.button}onClick={()=>{if(onClick)onClick(inputRef.current?.value??"taskId")}}>{name}</button><inputtype="text"placeholder='taskId'ref={inputRef}/></div>)}exportdefault()=>{const inputRef =React.useRef<HTMLInputElement>(null);const[tasks,handler]=useUploader({url: "https://file.io?expires=1w",fieldname: "file",method: "post",headers: {"Content-Type": "multipart/form-data"},// separately:true if you want to create seperate task for each file});functionhandleChange(e: any){handler.start(e.currentTarget.files,// {// key1: "value1", // key2: "value2" // });}conststyles={mx: {marginRight: 5,marginLeft: 5},mt: {marginTop: 5}}return(<div><pre>{JSON.stringify(tasks,null,2)}</pre><inputmultipleref={inputRef}style={{display: "none"}}type="file"onChange={handleChange}/><buttonstyle={styles.mx}onClick={()=>inputRef.current?.click()}>
upload
</button><Triggername="stop"styles={{root: styles.mt,button: styles.mx}}onClick={(taskId: string)=>handler.stop(taskId)}/><Triggername="remove"styles={{root: styles.mt,button: styles.mx}}onClick={(taskId: string)=>handler.remove(taskId)}/><Triggername="retry"styles={{root: styles.mt,button: styles.mx}}onClick={(taskId: string)=>handler.retry(taskId)}/></div>);};

License

MIT