Как заставить Previews в реагирующей зоне работать с файлами, отличными от изображений? - PullRequest
Новая
       40

Как заставить Previews в реагирующей зоне работать с файлами, отличными от изображений?

1 голос
/ 14 мая 2019

Мне нужна помощь, чтобы заставить пакет реагировать-dropzone NPM, чтобы загруженные файлы отображали предварительный просмотр файлов, отличных от файлов изображений (* .png, * .jpg / jpeg, * .gif, и т. д. - все они прекрасно генерируют предварительный просмотр)

В настоящее время, когда я использую Dropzone для загрузки сопутствующих файлов в веб-форму, если я загружаю файл изображения (* .png, * .jpg и т. Д.), Настроенный нами предварительный просмотр показывает очень хорошо с небольшим уменьшенным изображением. Загруженного файла. (см. фото ниже)

Однако, если я загружаю другой тип файла, скажем, MS-Outlook * .docx, * .xlsx или Adobe Acrobat * .pdf, он просто дает мне пустое поле с испорченным изображением файла и чем угодно alt="..." текст, который я вставил туда, в данном случае, « Предварительный просмотр загруженного файла ». (см. фото ниже)

Код, который мы используем, был почти дословно скопирован с примера Preview на веб-сайте React Dropzon , так что мне интересно, пропустил ли я что-то здесь?

Вот что я пробовал -

  1. Создайте страницу react-dropzone <Dropzone>, для которой она настроена на прием любого типа файла и дает ей возможность делать предварительный просмотр с кодом из https://react -dropzone. js.org/#previews, с «Preview» <aside> внизу раздела <Dropzone> кода.
  2. Перетаскивание любого файла изображения (* .png, * .jpg или * .jpeg, * .gif и т. Д.).
  3. Посмотрите на предварительный просмотр, который появляется (должно быть в порядке, эскиз файла изображения).
  4. Теперь Перетащите любой другой тип файла ( .doc , .xls , * .pdf и т. Д.) На <Dropzone>.
  5. Посмотрите на предварительный просмотр, который появляется для этого файла (должен быть пустым с изображением «испорченного файла» и любым текстом alt="...", который у вас есть для описания файла).

Dropzone импортируется вверху файла - 

import React, { Component, /* useCallback */ } from "react";
...
import Dropzone from "react-dropzone";
...

Стиль / CSS-код для миниатюр - 

...
const thumbsContainer = {
  display: "flex",
  flexDirection: "row",
  flexWrap: "wrap",
  marginTop: 16
};

const thumb = {
  display: "inline-flex",
  borderRadius: 2,
  border: "1px solid #eaeaea",
  marginBottom: 8,
  marginRight: 8,
  width: 100,
  height: 100,
  padding: 4,
  boxSizing: "border-box"
};

const thumbInner = {
  display: "flex",
  minWidth: 0,
  overflow: "hidden"
};

const img = {
  display: "block",
  width: "auto",
  height: "100%"
};
...

Функция обратного вызова onDrop() - 

...
onDrop = (acceptedFiles, rejectedFiles) => {
  let files = acceptedFiles.map(async file => {
    let data = new FormData();
    data.append("file", file);

    let item = await axios
      .post("form/upload", data, {
        headers: {
          "X-Requested-With": "XMLHttpRequest",
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(response => {
        return Object.assign(file, {
          preview: URL.createObjectURL(file),
          filename: response.data.filename
        });
      })
      .catch(err => {
        let rejects = rejectedFiles.map(async file => {
          let data = new FormData();
          await data.append("file", file);

          console.log("There was an error while attempting to add your files:", err);
          console.log("The files that were rejected were:\n", rejects.join('\n'));
        })
      });
    return item;
  });
  Promise.all(files)
    .then(completed => {
      let fileNames = completed.map(function(item) {
        return item["filename"];
      });
      this.setState({ files: completed, fileNames: fileNames });
    })
    .catch(err => {
      console.log('DROPZONE ERROR:', err);
    });
  };
...

И фактический код JSX с использованием <Dropzone> в React.JS return() - 

...
<Form.Field>
  <label>Upload Files or Screenshots</label>
  <Dropzone accept={acceptedFileTypes} onDrop={this.onDrop}>
    {({ getRootProps, getInputProps, isDragActive }) => {
      return (
        <div
          {...getRootProps()}
          className={classNames("dropzone", {
            "dropzone--isActive": isDragActive
          })}
        >
          <input {...getInputProps()} />
          {isDragActive ? (
            <div>
              <div className="centered">
                <Icon name="cloud upload" size="big" />
              </div>
              <div className="centered">Drop Files Here.</div>
              <div className="centered">
                <Button className="drop-button">
                  Or Click to Select
                </Button>
              </div>
            </div>
          ) : (
            <div>
              <div className="centered">
                <Icon name="cloud upload" size="big" />
              </div>
              <div className="centered">
                Drag and Drop Supporting Files here to Upload.
              </div>
              <div className="centered">
                <Button className="drop-button">
                  Or Click to Select
                </Button>
              </div>
            </div>
          )}
        </div>
      );
    }}
  </Dropzone>
  <aside style={thumbsContainer}>{thumbs}</aside>
</Form.Field>
...

Ожидаемое поведение -

Я бы предпочел всем типам файлов для создания правильного предварительного просмотра.

Мои настройки -

  • MacBook Pro 13-дюймовый 2018
  • 2,7 ГГц Процессор Intel Core i7
  • 16 ГБ, 2133 МГц, оперативная память LPDDR3
  • MacOS версия 10.14.4
  • React & React-DOM версии 16.5.2
  • Node.JS версия 10.15.2
  • версия пряжи 1.15.2
  • React Dropzone версия 10.1.4
  • Google Chrome для Mac OS, версия браузера 74.0.3729.131 (официальная сборка) (64-разрядная версия)
  • Загрузка на сервер-контейнер экземпляра AWS EC2.

... Итак, я делаю что-то не так, чтобы не работали предварительные просмотры других файлов, кроме изображений? Разве это не функция для каких-либо файлов изображений? Пожалуйста, сообщите.

Пара других вопросов -

  1. Если предварительные просмотры не могут быть сгенерированы для файлов, отличных от файлов изображений с react-dropzone, есть ли способ, чтобы файлы изображений генерировали предварительные просмотры, но все остальные файлы просто перечисляют имя загружаемого файла и такие, как в некоторые другие примеры на вашем сайте React Dropzone ? Если это так, как вы переключаетесь между этими двумя, чтобы иметь оба при перетаскивании файлов на <Dropzone>?
  2. В нашем кодекоторый, опять же, мы почти дословно скопировали из ваших примеров на веб-сайте React Dropzone , мы заметили, что когда вы перетаскиваете набор файлов на <Dropzone>, а затем пытаетесь перетаскивать во второй раз это стирает первый набор файлов с загрузки и заменяет их новыми файлами, которые только что были сброшены на <Dropzone>. Есть ли способ, чтобы <Dropzone> кумулятивно добавлять файлы при каждом их удалении, а не просто стирать предыдущие файлы и заменять их новыми? Если да, то какие шаги сделать это, пожалуйста?
  3. Есть ли способ, в случае наличия пустого поля «Просмотр файла» для всех других файлов, избавиться от значка «Сломанный файл»?

Я ценю любой конструктивный ответ, пожалуйста. Заранее спасибо.

...