@idot-digital/file-selector NPM

@idot-digital/file-selector

Upload, delete, filter, and select files, using Material UI's framework

Install

npm install --save @idot-digital/file-selector
yarn add @idot-digital/file-selector

Usage

import React, { Component } from 'react';

import { createTheme, ThemeProvider } from '@material-ui/core';
import { SnackbarProvider } from 'notistack';

import { FileSelector, FileSelectorRaw, FileResponse, FileSelectorLinkSettings } from '@idot-digital/file-selector';

// Wrap ThemeProvider from Material UI around your app -- ability to tweak initial styles
// Wrap SnackbarProvider around your app -- ability to enqueue snackbars
const Index = () => {
  return (
    <ThemeProvider theme={createTheme()}>
      <SnackbarProvider preventDuplicate maxSnack={3}>
        <App />
      </SnackbarProvider>
    </ThemeProvider>
  );
};

const App = () => {
  const [open, setOpen] = React.useState(false);
  const [files, setFiles] = React.useState<string[]>([]); // Currently selected files (paths)

  return (
    <>
      <div onClick={() => setOpen(true)}>Open</div>
      <FileSelector
        // Fetch settings
        links={{
          get: {
            url: 'URL for specific request',
            method: 'Method for specific request',
            settings: {
              // Custom settings only for "get"
            },
          },
          rename: {
            //Settings as in get
          },
          delete: {
            //Settings as in get
          },
          upload: {
            //Settings as in get
          },

          // Next applies to all requests
          settings: {
            // General settings
          },
          url: 'General api URL',
          root: 'Root image URL',
        }}
        // Callback functions
        callback={(file) => console.log(file)}
        callbackDone={(files) => {
          console.log(files);
          setFiles(files.map((file) => file.path));
          setOpen(false);
        }}
        // Controlled prop to manage currently selected files
        pickedFiles={files}
        // Change link of previewed images in order to fetch low res variants
        previewImage={(filePath) => filePath.replace('...', '...')}
        // Material UI default dialog props
        open={open}
        onClose={() => setOpen(false)}
        // Custom props
        fullWidth
        maxWidth="xl"
      />
    </>
  );
};