GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - dropzone-ui/dropzone-ui-react: The most complete React Library Component for drag’n’drop files. Image and video previews. File validation. Multilanguage. Server side support.

BranchesTags
Open more actions menu

Latest commit

 

History

329 Commits
329 Commits

Folders and files

NameName
Last commit message
Last commit date
.github
.github
 
 
build
build
 
 
src
src
 
 
stories
stories
 
 
tests
tests
 
 
.gitignore
.gitignore
 
 
.npmignore
.npmignore
 
 
CHANGELOG.md
CHANGELOG.md
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
jest.config.js
jest.config.js
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
rollup.config.js
rollup.config.js
 
 
tsconfig.json
tsconfig.json
 
 

Repository files navigation

🚀 Spanish README

Dropzone UI

license npm latest package Rate on Openbase kandi X-Ray Node.js CI Build Status Known Vulnerabilities Package Quality install size Average time to resolve an issue PRs Welcome GitHub Repo stars

Thank you so much for using dropzone-ui/react ❤️ !

Dropzone UI has grown very fast and has exceeded its original scope. That's why we find reasonable to rebrand it and create a new package taking the best of this one and adding more features and new components. This new package is here and its name is Files UI ⚡. In an very near future we'll stop giving support to dropzone-ui, so we enforce you to upgrade to this new package. In the meanwhile this package will become a wrapper for files-ui.

⚡ Live demos and full documentation : files-ui.com

❤️ it ?, support us by giving a ⭐ on :octocat: Github :D

Important

From now on @files-ui/react is the only dependency. Check out the changelog file to know what's new.

Sample result:

This is a small part of what you can find on files-ui 👀

fui-logo

  • More previews here.

Requirement

@dropzone-ui/react is based on React Hooks. It requires react v16.8+.

Installation

@dropzone-ui/react is available as an npm package.

// with npm
npm i @dropzone-ui/react
// with yarn
yarn add @dropzone-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 "@dropzone-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 🔨
Edit Button Edit Button

API documentation

The complete documentation of every component has been moved to files-ui.com API page.

However if you are still using dropzone-ui version 6.7.0 or lower, you can find the documentation and demos here:

  • ⚡ Samples
  • 📚 Docs.

Supporters

Special thanks to these amazing people ⭐ :

👏 Stargazers

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

👏 Forkers

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

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

License

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

Animated footer bars


Back to top

About

The most complete React Library Component for drag’n’drop files. Image and video previews. File validation. Multilanguage. Server side support.

www.files-ui.com

Topics

axiosdropzone-uifile-uploadformform-dataform-validationfrench-translationhacktoberfestjavascriptlocalizationmaterial-designportuguese-translationreactreact-dropzonereactjsspanish-translationtypescript

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing
Activity
Custom properties

Stars

217 stars

Watchers

4 watching

Forks

24 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.