/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.

Primary LanguageTypeScriptMIT LicenseMIT

fui-logo

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.

license npm latest package kandi X-Ray PRs Welcome GitHub Repo stars Node.js CI

fui-logo

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 🍰 Edit Button
Advanced Sample 🔨 Edit Button

Main Components 💠

Full Documentation 📚

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

More Previews 👀

Image full screen preview 🖼️

Image full screen preview

Video full screen preview 🎞️

Video full screen preview

FileCard, FileInputButton and Avatar preview 🎴

Video full screen preview

DarkMode 🌙 🌞

darkmode 1 preview

darkmode 2 preview

Supporters

Special thanks to these amazing people ⭐ :

👏 Stargazers

Stargazers repo roster for @files-ui/files-ui-react

👏 Forkers

Forkers repo roster for @dropzone-ui/dropzone-ui-react

License

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

Animated footer bars


Back to top