Files ui

UI components for file uploads with React js.

Files UI is a complete library for handling files in the UI. You can validate and upload them.

• :heart: it ?, support us by giving a :star: on :octocat: Github :D

• :zap: Enjoying @files-ui/react? Please leave a short review on Openbase

• :eyes: More previews here.

Installation

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

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

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

Usage and examples

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

1import * as React from "react";
2import ReactDOM from "react-dom";
3import { Dropzone, FileMosaic } from "@files-ui/react";
4
5function App() {
6  const [files, setFiles] = React.useState([]);
7  const updateFiles = (incommingFiles) => {
8    setFiles(incommingFiles);
9  };
10  return (
11    <Dropzone onChange={updateFiles} value={files}>
12      {files.map((file) => (
13        <FileMosaic {...file} preview />
14      ))}
15    </Dropzone>
16  );
17}
18
19ReactDOM.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 :cake:
Advanced Sample :hammer:

Main Components 💠

• <Dropzone/>
• <FileMosaic/>
• <FileCard/>
• <Avatar/>
• <FIleInputButton/>
• <FullScreen/> Image and video

Full Documentation 📚

You can find the complete documentation and demos for every component on files-ui.com

More Previews :eyes:

Image full screen preview 🖼️

Video full screen preview 🎞️

FileCard, FileInputButton and Avatar preview 🎴

DarkMode 🌙 🌞

Supporters

Special thanks to these amazing people :star: :

:clap: Stargazers

:clap: Forkers

License

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