Блог

Я только что установил (https://www.npmjs.com/package/dropzone-ui) и я действительно вижу, что элементы файла были загружены, и предварительный просмотр значка файла отображается, когда я помещаю некоторые файлы в зону выпадения, но не получаю предварительный просмотр, когда файл представляет собой изображение. Я делаю что-то не так?

проверьте мой код:

 import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";

export default function MyDropzone() {
  const [files, setFiles] = useState([]);
  const [imageSrc, setImageSrc] = useState(undefined);

  const updateFiles = (incomingFiles) => {
    console.log("incoming files", incomingFiles);
    setFiles(incomingFiles);
  };

  const onDelete = (id) => {
    setFiles(files.filter((x) => x.id !== id));
  };

  return (
    <Dropzone
      onChange={updateFiles}
      value={files}
      maxFileSize={40000}
      label="Drag'n drop your files here or click to browse"
      accept="image/*"
      fakeUploading
    >
      {files.map((file) => (
        <FileItem
          {...file}
          onDelete={onDelete}
          info
        />
      ))}
    </Dropzone>
  );
}
 

Вы можете проверить, что у меня есть в пользовательском интерфейсе здесь:
скриншот

Добавить атрибут предварительного просмотра

{файлы.карта((файл) => ( ><файловый элемент {…файл} OnDelete={Файл удаления} информация для предварительного просмотра /> ))}