Как добавить валидации, такие как высота и ширина, для перетаскивания в загрузочную зону реагирования - PullRequest
Новая
       5

Как добавить валидации, такие как высота и ширина, для перетаскивания в загрузочную зону реагирования

0 голосов
/ 11 марта 2020

Я пытаюсь создать загрузчик с перетаскиванием в react Я пытался использовать dropzone, но он не поддерживает такие параметры, как проверка разрешения файла перед загрузкой

Я изменяю приложение реагирования в Dropzone как согласно моим требованиям 






import React, { Component, Fragment } from "react";
import { render } from "react-dom";

import ReactDropzone from "react-dropzone";
import request from "superagent";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      files: []
    };
  }

  onDrop = files => {
    // POST to a test endpoint for demo purposes
    const req = request.post("https://httpbin.org/post");

    files.forEach(file => {
      req.attach(file.name, file).then(() => {
        console.log("done");
      });
    });

    req.end();
  };

  onPreviewDrop = files => {
    this.setState({
      files: this.state.files.concat(files)
    });
  };

  render() {
    const previewStyle = {
      display: "inline",
      width: 100,
      height: 100
    };

    return (
      <div className="app">
        <h1>react-dropzone Demo</h1>

        <h2>Basic Example</h2>
        <ReactDropzone onDrop={this.onDrop}>
          Drop your best gator GIFs here!!
        </ReactDropzone>

        <h2>Image Previews</h2>
        <ReactDropzone accept="image/*" onDrop={this.onPreviewDrop}>
          Drop an image, get a preview!
        </ReactDropzone>
        {this.state.files.length > 0 && (
          <Fragment>
            <h3>Previews</h3>
            {this.state.files.map(file => (
              <img
                alt="Preview"
                key={file.preview}
                src={file.preview}
                style={previewStyle}
              />
            ))}
          </Fragment>
        )}
      </div>
    );
  }
}

const container = document.createElement("div");
document.body.appendChild(container);
render(<App />, container);
...