Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 8 days 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 (over 2 years ago)
Default Branch: master
Last Pushed: 2024-08-09T14:30:03.000Z (3 months ago)
Last Synced: 2024-10-01T23:18:03.408Z (about 1 month 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: 48
Watchers: 3
Forks: 10
Open Issues: 22
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.



[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/files-ui/react/blob/HEAD/LICENSE)

[![npm latest package](https://img.shields.io/npm/v/@files-ui/react.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/package/@files-ui/react) [![kandi X-Ray](https://kandi.openweaver.com/badges/xray.svg)](https://kandi.openweaver.com/typescript/files-ui/files-ui-react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

[![GitHub Repo stars](https://img.shields.io/github/stars/files-ui/react?label=Star%20me%20please%20:D&style=social)](https://github.com/files-ui/react)

[![Node.js CI](https://github.com/files-ui/files-ui-react/actions/workflows/node.js.yml/badge.svg)](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:      | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/basic-demo-js-blssi1?file=/src/App.js)    |

| Advanced Sample :hammer: | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](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

[![Stargazers repo roster for @files-ui/files-ui-react](https://bytecrank.com/nastyox/reporoster/php/stargazersSVG.php?user=files-ui&repo=files-ui-react)](https://github.com/files-ui/files-ui-react/stargazers)

### :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)](https://github.com/files-ui/files-ui-react/network/members)

## License

This project is licensed under the terms of the

[MIT license](/LICENSE).