diardo-fileupload

REACT ONLY

File uploader drag & drop using react-dropzone.

will update with crop image feature in future.

Basic use :

import { FileUpload } from 'diardo-fileupload';

function Example () {
  const [files, setFiles] = React.useState([]);

  return (
    <div>
      <FileUpload
        id="file"
        label="Upload File"
        name="file"
        maxSize={5000000}
        maxFiles={0}
        files={files}
        setFiles={setFiles}
        accept=""
        onError={(value) => console.log(value, 'error value')}
        mandatory
      >
        <p>Upload your file / Drop to this box</p>
      </FileUpload>
    </div>
  )
}

the main component is <FileUpload> , and the rest is up to you (how to show the choosen file)

Props and description:

Props	Description
label	Title of the form.
maxSize	Max size in bytes
maxFiles	Max files can be accepted (0 = unlimited)
files	files on local state
setFiles	set files on local state
accept	accepted file format, example: "image/jpg, image/jpeg, image/png"
onError	the values is show error detail

using your custom preview file (disable default preview) :

import { FileUpload } from 'diardo-fileupload';

function Example () {
  const [files, setFiles] = React.useState([]);

	const handleDelete = (indexFile) => {
		const newFiles = files.filter((item, i) => i !== indexFile);
		setFiles(newFiles);
	};

  return (
    <div>
      <FileUpload
        id="file"
        label="Upload File"
        name="file"
        maxSize={5000000}
        maxFiles={0}
        files={files}
        setFiles={setFiles}
        accept="image/jpg, image/jpeg, image/png"
        onError={(value) => console.log(value, 'error value')}
        mandatory
        disablePreview
      >
        <p>Upload your file / Drop to this box</p>
      </FileUpload>

      {files.length > 0 &&
        files.map((item, i) => (
          <div key={i}>
            <div>detail :</div>
            <div>name: {item.name}</div>
            <div>type: {item.type}</div>
            <button onClick={() => handleDelete(i)}>delete</button>
            <hr />
          </div>
      ))}
    </div>
  )
}

of course you can modify as per needed.