sessionstate

Install

npm i dropzone-react-tailwind

In your tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...
  content: [
    ...
    'node_modules/dropzone-react-tailwind/*.{js,ts,jsx,tsx,mdx}',
    'node_modules/dropzone-react-tailwind/components/**/*.{js,ts,jsx,tsx,mdx}'
  ],
}

Description

This component is designed to work with files and then send them to the server or database, it includes functionality such as: Canceling downloads, deleting downloaded files, adding files by selecting or moving them. This component uses tailwind classes.

Usage

const DropZoneConfigure = {
    localization: {
        hintWithoutUploadedFiles: undefined,
        uploadedDocuments: undefined,
        deleteAll: undefined,
        confirmationOfFileDeletion: undefined,
        confirmationOfFileDeletion_description: undefined,
        cancel: undefined,
        delete: undefined,
        dropzoneHintText: undefined
    }
}

const Example = ({supabase}) => {
  const [selectedFiles, setSelectedFiles] = useState((downloadableFiles??[]).filter(doc=>doc.id))
  const [uploadedFiles, setUploadedFiles] = useState([])
  const [DragAndDropIsLoading, setDragAndDropIsLoading] = useState(false)

  return (
    <div>      
      <DropZoneComponent
          configure={DropZoneConfigure}
          onDeleteAll={
              ()=>{
                  setUploadedFiles([])
              }
          }
          filesMap={
              (file, idx) => {
                  return <FileCard autoScroll type={file?.type} key={idx} loading={false} deleteOverlay fileName={file?.name} onClick={() => {
                      setUploadedFiles(files=>files.filter(_file=>_file!==file))
                  }}/>
              }
          }
          cardLoadersMap={
              (file, idx) => <FileCardLoader autoScroll={false} key={idx}/> 
          }
          uploadedFiles={uploadedFiles}
          setUploadedFiles={setUploadedFiles}
          dropzone={{
              filesMap: (file, idx)=>{
                  return(
                      <FileCard autoScroll={false} type={file.type} disabled={false} key={idx} deleteOverlay={!DragAndDropIsLoading} loading={DragAndDropIsLoading} fileName={file.name} onClick={() => {                                                
                            setSelectedFiles(currentFiles=>currentFiles.filter(selectedFile=>selectedFile!=file))
                      }}/>
                  )
              },
              filesUnloadedMap: (file, idx)=>{
                  return(
                          <FileCard autoScroll={undefined} type={file.type} disabled={DragAndDropIsLoading} key={idx} deleteOverlay={!DragAndDropIsLoading} loading={DragAndDropIsLoading} fileName={file.name} onClick={() => {
                              setSelectedFiles(currentFiles=>currentFiles.filter(selectedFile=>selectedFile!=file))
                          }} />
                  )
              },
              selectedFiles: selectedFiles,
              setSelectedFiles: setSelectedFiles,
              loading: DragAndDropIsLoading 
          }}
      />
      <Button onClick={()=>{
          setDragAndDropIsLoading(true)
          setUploadedFiles(selectedFile)
          setSelectedFiles([])
          setDragAndDropIsLoading(false)
      }}>Загрузить файлы.</Button>
    </div>
  )
}

Feedback

If you find a bug or a flaw in the code, please email me: [email protected].

Thanks you!

License

MIT © BEISER901