Skip to content
Snippets Groups Projects
Select Git revision
  • a07be4c1e06cd31dca7c8a6f8455f92dfc452f1b
  • main default
  • f-publish protected
  • f-remove-googleapi
4 results

indiscale-files-ui-react

  • Open with
  • Download source code
  • Your workspaces

      A workspace is a virtual sandbox environment for your code in GitLab.

      No agents available to create workspaces. Please consult Workspaces documentation for troubleshooting.

  • user avatar
    JinSSJ3 authored
    FIX: ActionButtonItem.disabled not working #28
    a07be4c1
    History

    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

    Verified on Openbase Featured on Openbase Rate this package @files-ui/react Tutorials

    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

    License

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

    Animated footer bars


    Back to top