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.
-
❤️ it ?, support us by giving a ⭐ on Github :D
-
⚡ Enjoying @files-ui/react? Please leave a short review on Openbase
-
👀 More previews here.
@files-ui/react is available as an npm package.
// with npm
npm i @files-ui/react
// with yarn
yarn add @files-ui/react
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 🔨 |
- <Dropzone/>
- <FileMosaic/>
- <FileCard/>
- <Avatar/>
- <FIleInputButton/>
- <FullScreen/> Image and video
You can find the complete documentation and demos for every component on files-ui.com
Special thanks to these amazing people ⭐ :
This project is licensed under the terms of the MIT license.