@idot-digital/file-selector

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

 

Install

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

Usage

`tsx
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 (





);
};

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

return (
<>

setOpen(true)}>Open

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

);
};
``

License

UNLICENSED © @idot-digital