Upload

import { UploadAvatar } from 'src/components/upload';
 
function App() {
  const [file, setFile] = useState(null);
 
  const handleDrop = useCallback((acceptedFiles) => {
    const file = acceptedFiles[0];
 
    if (file) {
      setFile(
        Object.assign(file, {
          preview: URL.createObjectURL(file),
        })
      );
    }
  }, []);
 
  return (
    <UploadAvatar
      accept="image/*"
      file={file}
      onDrop={handleDrop}
      helperText={
        <Typography
          variant="caption"
          sx={{
            mt: 2,
            mx: 'auto',
            display: 'block',
            textAlign: 'center',
            color: 'text.secondary',
          }}
        >
          Allowed *.jpeg, *.jpg, *.png, *.gif
          <br /> max size of {fData(3145728)}
        </Typography>
      }
    />
  );
}

import { Upload } from 'src/components/upload';
 
function App() {
  const [file, setFile] = useState(null);
 
  const handleDrop = useCallback((acceptedFiles) => {
    const file = acceptedFiles[0];
 
    if (file) {
      setFile(
        Object.assign(file, {
          preview: URL.createObjectURL(file),
        })
      );
    }
  }, []);
 
  return <Upload file={file} onDrop={handleDrop} />;
}

import { Upload } from 'src/components/upload';
 
function App() {
  const [files, setFiles] = useState([]);
 
  const handleDrop = useCallback(
    (acceptedFiles) => {
      const newFiles = acceptedFiles.map((file) =>
        Object.assign(file, {
          preview: URL.createObjectURL(file),
        })
      );
 
      setFiles([...files, ...newFiles]);
    },
    [files]
  );
 
  const handleRemoveFile = (inputFile) => {
    const filtered = files.filter((file) => file !== inputFile);
    setFiles(filtered);
  };
 
  const handleRemoveAllFiles = () => {
    setFiles([]);
  };
 
  return <Upload multiple thumbnail={preview} files={files} onDrop={handleDrop} onRemove={handleRemoveFile} onRemoveAll={handleRemoveAllFiles} onUpload={() => console.log('ON UPLOAD')} />;
}