Minimal File Upload Component For React

A React hooks library for creating minimal customizable file upload in the app.

Install & Import:

import React from "react";
import "./styles.css";
import { useFileUpload } from "use-file-upload";

Basic Usage:

const App = () => {
  const defaultSrc = "avatar.png";
  const [files, selectFiles] = useFileUpload();
  return (
    <div id="app">
      <img src={files?.source || defaultSrc} alt="preview" />
      <button
        onClick={() =>
          selectFiles({ accept: "image/*" }, ({ name, size, source, file }) => {
            console.log("Files Selected", { name, size, source, file });
          })
        }
      >
        Upload Avatar
      </button>
    </div>
  );
};
export default App;

Preview:

Minimal File Upload Component For React

Download Details:

Author: Marvinified

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/Marvinified/use-file-upload

License: MIT

You Might Be Interested In:

Add Comment