Получение ответной-дропзоны для принятия * всех * файлов - PullRequest
Новая
       8

Получение ответной-дропзоны для принятия * всех * файлов

0 голосов
/ 07 мая 2019

Я унаследовал кодовую базу, которая является React.JS на внешнем интерфейсе и Node.JS / Express.JS на внутреннем сервере на сервере экземпляров AWS EC2. Код, который я использую, реагирует на dropzone (https://react -dropzone.js.org / ) и был создан для перетаскивания файлов изображений. Владелец продукта для проекта, над которым я сейчас работаю, хочет, чтобы он принимал все файлы (* .pdf, * .docx, * .xlsx и т. Д.).

Мне интересно, как заставить его принимать все файлы? Я просмотрел документы по реакционной зоне и пока не нашел ни одного примера, чтобы показать, как заставить его принимать все типы файлов? Это так же просто, как установить accept="..." с accept="image/*" на accept="*/*"? может ли строка для accept="..." быть массивом, например: accept=["image/*","text/*",...] и т. д.? Как правильно заставить реагирующую дропзону принимать файлы любого типа?

Вот код моего onDrop обратного вызова - 

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

        let item = await axios
          .post("triage/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 => {
        console.log("completed", completed);
        let fileNames = completed.map(function(item) {
          return item["filename"];
        });
        this.setState({ files: completed, fileNames: fileNames });
      })
      .catch(err => {
        console.log('DROPZONE ERROR:', err);
      });
    };

... и вот код самого <DropZone> в том же файле - 

              <Dropzone accept="image/*" 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>

Ответы [ 2 ]

0 голосов
/ 25 июня 2019

У меня была точно такая же проблема.

react-dropzone использует attr-accept для обработки принимаемых файлов.Давайте посмотрим на исходный код последнего. 

* @param file {File} https://developer.mozilla.org/en-US/docs/Web/API/File
 * @param acceptedFiles {string}
 * @returns {boolean}

...

export default function(file, acceptedFiles) {
  if (file && acceptedFiles) {
    ...
  }
  return true
}

Чтобы получить возвращаемое значение true, просто введите ложное строковое значение, то есть ''

0 голосов
/ 07 мая 2019

Вы можете просто использовать как с обычным input, так что вы можете сделать несколько типов файлов, таких как: image/*,.pdf.

Ссылка здесь .

...