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.
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 :cake: | ![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg) |
Advanced Sample :hammer: | ![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg) |
Main Components 💠
Full Documentation 📚
You can find the complete documentation and demos for every component on files-ui.com
More Previews :eyes:
Image full screen preview 🖼️
![Image full screen preview](https://user-images.githubusercontent.com/43678736/228066199-fb7a5bd3-9c7e-4f72-b0ef-7f11d236d38e.png)
Video full screen preview 🎞️
![Video full screen preview](https://user-images.githubusercontent.com/43678736/228066195-62063300-21e0-48fd-80d8-31b566562fde.png)
FileCard, FileInputButton and Avatar preview 🎴
![Video full screen preview](https://user-images.githubusercontent.com/43678736/228063876-5b6d00fe-f0ba-453f-a7ce-c44ba7444417.png)
DarkMode 🌙 🌞
![darkmode 1 preview](https://user-images.githubusercontent.com/43678736/228063883-569ca6f1-6959-45bc-9882-2c447162a00f.png)
![darkmode 2 preview](https://user-images.githubusercontent.com/43678736/228066720-e0bb96ac-3c00-4aa6-80b9-e0b4d0c5f947.png)
Supporters
Special thanks to these amazing people :star: :
:clap: Stargazers
![Stargazers repo roster for @files-ui/files-ui-react](https://bytecrank.com/nastyox/reporoster/php/stargazersSVG.php?user=files-ui&repo=files-ui-react)
:clap: Forkers
![Forkers repo roster for @dropzone-ui/dropzone-ui-react](https://bytecrank.com/nastyox/reporoster/php/forkersSVG.php?user=files-ui&repo=files-ui-react)
License
This project is licensed under the terms of the
MIT license.