README.md

Files ui

UI components for file uploas with React js. Files UI is a complete library for handling files in the UI. You can validate and upload them.

• More previews here.

Installation

@files-ui/react is available as an npm package.

// with npm
npm i @files-ui/react

// with yarn
yarn add @files-ui/react

Usage and examples

Here is a quick example to get you started, it's all you need:

import * as React from "react";
import ReactDOM from "react-dom";
import { Dropzone, FileMosaic } from "@files-ui/react";
Function App() {
  const [files, setFiles] = React.useState([]);
  const updateFiles = (incommingFiles) => {
    setFiles(incommingFiles);
  };
  return (
    <Dropzone onChange={updateFiles} value={files}>
      {files.map((file) => (
        <FileMosaic {...file} preview />
      ))}
    </Dropzone>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

Yes, it's really all you need to get started as you can see in these live and interactive demos:

• basic sample
• advanced sample

More Previews

Image full screen preview

Video full screen preview

File Mosaic, FileInputButotn and Avatar preview

DarkMode

License

This project is licensed under the terms of the MIT license.