response-dropzone - доступ к файлам, добавленным по клику, не отбрасывается - PullRequest
Новая
       6

response-dropzone - доступ к файлам, добавленным по клику, не отбрасывается

0 голосов
/ 28 мая 2020

Я использую пример react-dropzone basi c ( react-dropzone basi c) 

import React from 'react';
import {useDropzone} from 'react-dropzone';

function Basic(props) {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();

  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

<Basic />

Это работает, как ожидалось, пока я не нажму кнопку click метод добавления файла. При добавлении файла с помощью кнопки acceptedFiles не регистрируйте файл (я добавил обработчик onChange, и event.target.files показывает файл, поэтому он определенно добавляется к общему FileList).

Из-за этого я не могу отобразить файл, добавленный с помощью подробностей щелчка в Files <ul>, как я бы с перетаскиваемым файлом. Я предполагаю, что то же самое будет верно для fileRejections, но я еще не реализовал это.

Надеюсь, мне не хватает чего-то очевидного, поскольку я предполагаю, что dropzone обрабатывает и перетаскивание, и поведение щелчка?

Оцените, что кто-то указал мне правильное направление, если возможно.

Ответы [ 2 ]

1 голос
/ 28 мая 2020

В вашем коде нет ничего плохого. Вам просто нужно правильно щелкнуть div.

Просто добавьте немного стиля в область перетаскивания, чтобы зона перетаскивания была свободна как для перетаскивания, так и для щелчка.

рабочая демонстрация здесь 

export default function Basic(props) {
  const { acceptedFiles, getRootProps, getInputProps } = useDropzone();

  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <section className="container">
      <div
        style={{
          cursor: "pointer",
          background: "gray",
          height: "200px",
          border: "2px dashed blue"
        }}
        {...getRootProps({ className: "dropzone" })}
      >
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}
1 голос
/ 28 мая 2020

Приведенный выше код обрабатывает как перетаскивание, но он дает вам только последние добавленные файлы, а не весь список загруженных файлов.

Для правильной реализации вы можете поддерживать состояние и добавлять функцию onDrop использовать Dropzone, в котором вы будете добавлять файлы и обновлять состояние 

function Basic(props) {
  const [files, setFiles] = React.useState([]);
  const onDrop = React.useCallback(acceptedFiles => {
    setFiles(prev => [...prev, ...acceptedFiles]);
  }, []);
  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  const fileList = files.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <section className="container">
      <div {...getRootProps({ className: "dropzone" })}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{fileList}</ul>
      </aside>
    </section>
  );
}

Рабочая демонстрация

...