@toranj/react-file-hooks

react hook for file upload

Usage no npm install needed!

<script type="module">
  import toranjReactFileHooks from 'https://cdn.skypack.dev/@toranj/react-file-hooks';
</script>

README

React File Hooks

React File Hooks is a hook simply for file upload using axios

🖥️Live Example

Install

// npm
npm install @toranj/react-file-hooks axios

// or yarn
yarn add @toranj/react-file-hooks axios

Usage

import  React,{ useEffect} from  'react';
import { useUploader } from  'react-file-hooks';

const  App = () => {

  const [uploadTasks, uploadTasksHelper] = useUploader({
    url:  'https://file.io?expires=1w',
    fieldname:  "file",
    method:  'post',
    headers: { 'Content-Type':  'multipart/form-data' } //optional
    multiple:false  // optional and default is true
  })

  const { startUploadTask,
          retryUploadTask, // (id: string) => void
          removeUploadTask, // (id: string) => void
          clearUploadTasks,
         } = uploadTasksHelper

// explain startUploadTask arguments here

   const  handleChange = (e) => {
      startUploadTask(e.currentTarget.files, // file or files that you want to upload
      {'any-other-stuff':  'hello'}, // Optional data that you want to send beside uploading file
      (task)=>console.log(task)); // call whenever uploading task failed or be success
   }

   return (
         <div>
            <input  type="file"  onChange={handleChange} />
            <pre>{JSON.stringify(uploadTasks, null, 2)}</pre>
         </div>
   );
};

Functions and parameters

useUploader() takes object of type UploadParams as an argument

export  interface  UploadParams {
    url: string;
    fieldname: string;
    method: 'put' | 'post' | 'patch' | string;
    headers?: { [key: string]: any };
    multiple?: boolean;
}

License

MIT