https://github.com/files-ui/files-ui-react
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. Multilanguage. Server side support.
https://github.com/files-ui/files-ui-react
drag-and-drop dropzone file-upload form-data hacktoberfest hooks javascript localization react react-dropzone react-hooks typescript xhr
Last synced: about 1 month ago
JSON representation
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. Multilanguage. Server side support.
- Host: GitHub
- URL: https://github.com/files-ui/files-ui-react
- Owner: files-ui
- License: mit
- Created: 2022-07-23T23:53:24.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-10-05T17:49:12.000Z (7 months ago)
- Last Synced: 2025-03-07T17:18:20.363Z (2 months ago)
- Topics: drag-and-drop, dropzone, file-upload, form-data, hacktoberfest, hooks, javascript, localization, react, react-dropzone, react-hooks, typescript, xhr
- Language: TypeScript
- Homepage: https://www.files-ui.com
- Size: 25.4 MB
- Stars: 55
- Watchers: 3
- Forks: 15
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
Files ui
UI components for file uploads with [React js](https://react.dev/).
**Files UI** is a complete library for handling files in the UI. You can validate and upload them.
[](https://github.com/files-ui/react/blob/HEAD/LICENSE)
[](https://www.npmjs.com/package/@files-ui/react) [](https://kandi.openweaver.com/typescript/files-ui/files-ui-react) [](http://makeapullrequest.com)
[](https://github.com/files-ui/react)
[](https://github.com/files-ui/files-ui-react)
- :heart: it ?, support us by giving a :star: on :octocat: [Github](https://github.com/dropzone-ui/dropzone-ui) :D
- :zap: Enjoying @files-ui/react? [Please leave a short review on Openbase](https://openbase.com/js/@files-ui/react#rate)
- :eyes: More previews [here](#more-previews).
## Installation
@files-ui/react is available as an [npm package](https://www.npmjs.com/package/@files-ui/react).
```sh
// with npm
npm i @files-ui/react
```
```sh
// with yarn
yarn add @files-ui/react
```
## Usage and examples
Here is a quick example to get you started, **it's all you need**:
```jsx
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 (
{files.map((file) => (
))}
);
}
ReactDOM.render(, 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: | [](https://codesandbox.io/s/basic-demo-js-blssi1?file=/src/App.js) |
| Advanced Sample :hammer: | [](https://codesandbox.io/s/advanced-demo-js-6euo8j?file=/src/App.js) |
## Main Components 💠
- [\](https://www.files-ui.com/components/dropzone)
- [\](https://www.files-ui.com/components/filemosaic)
- [\](https://www.files-ui.com/components/filecard)
- [\](https://www.files-ui.com/components/avatar)
- [\](https://www.files-ui.com/components/fileinputbutton)
- [\](https://www.files-ui.com/components/fullscreen) Image and video
## Full Documentation 📚
You can find the complete documentation and demos for every component on [files-ui.com](https://www.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
[](https://github.com/files-ui/files-ui-react/stargazers)
### :clap: Forkers
[](https://github.com/files-ui/files-ui-react/network/members)
## License
This project is licensed under the terms of the
[MIT license](/LICENSE).
