Dropzone-ui-react NPM

files-ui-react-19

This package is a fork of files-ui/files-ui-react with added support for React 19.

Changes from original

Added support for React 19
Updated testing libraries to latest versions
Improved TypeScript type definitions

Original Package

This is based on the excellent work by JinSSJ3 in the original files-ui-react package. Please check out the original repository for detailed documentation and examples.

Installation

npm install files-ui-react-19

Usage

Use it exactly the same way as the original package. All original features are preserved.

import { Dropzone } from 'files-ui-react-19';

License

MIT - Same as the original package.

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.

:heart: it ?, support us by giving a :star: on :octocat: Github :D
:zap: Enjoying @files-ui/react? Please leave a short review on Openbase
:eyes: More previews here.

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: