Upload image one at a time with preview issue - React Drop zone

Question

  const [files, setFiles] = useState([]);

  const onDrop = useCallback((acceptedFiles) => {
    // Do something with the files
    setFiles(
      acceptedFiles.map((file: File) =>
        Object.assign(file, {
          preview: URL.createObjectURL(file),
        })
      )
    );
  }, []);
  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept: 'image/*',
    multiple: false,
  });


  const thumbs = files.map((file: { [key: string]: string }) => (
    <div className={classes.imagePreview} key={file.name}>
      <img className={classes.image} src={file.preview} alt={file.name} />
    </div>
  ));

  useEffect(() => {
    // Make sure to revoke the data uris to avoid memory leaks
    files.forEach((file: { [key: string]: string }) =>
      URL.revokeObjectURL(file.preview)
    );
  }, [files]);

My HTML

 <div className={classes.imageContainer}>
          {thumbs}
          <div className={classes.borderBox} {...getRootProps()}>
            <input {...getInputProps()} />
            <div>
              <AddIcon />
            </div>
          </div>
        </div>

I am trying to upload via dropzone one at a time however my image gets replaced with the second one.

Answer 1

Fixed it with appending to the state

  const onDrop = useCallback(
    (acceptedFiles) => {
      // Process files
      const oneFile = get(acceptedFiles, '[0]', []);
      Object.assign(oneFile, { preview: URL.createObjectURL(oneFile) });
      setFiles([oneFile, ...files]);
    },
    [files]
  );