Javascript Reactjs-使用redux表单和材质ui-创建拖放组件

我正在尝试配置一个默认的textfield文件类型，以处理拖放文件。

如果是隐藏textfield，但保留/增强拖放UI以处理连接到redux表单中的textfield文件类型。因此，如果HandleFile通过了文件大小、文件类型的文件验证——以编程方式将其附加到textfield文件中

import React, { Component } from "react";
import TextField from "@material-ui/core/TextField";
import FormControl from "@material-ui/core/FormControl";


const imageMimeTypes = [
  "image/webp",
  "image/gif",
  "image/jpeg",
  "image/png",
  "image/svg+xml",
  "image/webp"
];
const pdfMimeTypes = ["application/pdf"];
const isFileImage = (file) => {
  return file && imageMimeTypes.includes(file["type"]);
};
const isFilePdf = (file) => {
  return file && pdfMimeTypes.includes(file["type"]);
};

const isWithinFileLimit = (file, fileLimit) => {
  return file.size <= fileLimit;
};

class renderDragDrop extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      dropArea: React.createRef(),
      gallery: [],
      erroredFiles: [],
      selectedFiles: [],
      isHighlighted: false
    };

    this.highlight = this.highlight.bind(this);
    this.unhighlight = this.unhighlight.bind(this);
    this.handleDrop = this.handleDrop.bind(this);
    this.handleFiles = this.handleFiles.bind(this);
  }

  uploadFiles = () => {
    const { selectedFiles } = this.state;
    let formData = new FormData();
    selectedFiles.forEach((file) => formData.append("file", file));
    this.props.onHandle(this.props.input.name, selectedFiles);
    this.setState({
      gallery: [],
      erroredFiles: [],
      selectedFiles: [],
      isHighlighted: false
    });
  };

  handleFiles = (files) => {
    const localFiles = [];
    const erroredFiles = [];
    Array.from(files).forEach((file) => {
      const imageInstance = isFileImage(file);
      const pdfInstance = isFilePdf(file);
      if (!imageInstance && !pdfInstance) {
        erroredFiles.push({
          reason: "Format not supported",
          name: file.name,
          size: file.size
        });
        return null;
      }
      const fileLimit = this.props.fileLimit || 11148112;
      const allowedSize = isWithinFileLimit(file, fileLimit);
      if (!allowedSize) {
        erroredFiles.push({
          reason: "File exceeds allowed limit",
          name: file.name,
          size: file.size
        });
        return null;
      }
      localFiles.push(file);
      return null;
    });

    this.setState((prevState) => ({
      ...prevState,
      selectedFiles: [...prevState.selectedFiles, ...localFiles],
      erroredFiles: [...prevState.erroredFiles, ...erroredFiles]
    }));
  };

  handleDrop(e) {
    e.preventDefault();
    e.stopPropagation();

    this.unhighlight(e);
    let dt = e.dataTransfer;
    let files = dt.files;

    console.log("files", files);
    this.handleFiles(files);
  }

  highlight(e) {
    console.log("highlight");
    e.preventDefault();
    e.stopPropagation();
    //set highlight true
    this.setState({ isHighlighted: true });
  }

  unhighlight(e) {
    e.preventDefault();
    e.stopPropagation();
    //set highlight false
    this.setState({ isHighlighted: false });
  }

  render() {
    const {
      input,
      rows,
      multiline,
      label,
      required,
      type,
      placeholder,
      fieldRef,
      onClick,
      disabled,
      meta: { touched, error, warning }
    } = this.props;

    delete input.value;

    return (
      <FormControl component="fieldset" fullWidth={true}>
        <TextField
          label={required ? label + " *" : label}
          type={"file"}
          error={touched && (error && error.length > 0 ? true : false)}
          helperText={
            touched &&
            ((error && error.length > 0 ? error : null) ||
              (warning && warning.length > 0 ? warning : null))
          }
          InputLabelProps={{ shrink: true }}
          disabled={disabled}
          {...input}
        />

        <div
          className="dragndrop padded-zone"
          onDrageEnter={this.highlight}
          onDragOver={this.highlight}
          onDragLeave={this.unhighlight}
          onDrop={this.handleDrop}
          ref={this.state.dropArea}
        >
          <div
            className={
              "drop-area " + (this.state.isHighlighted ? "highlight" : "")
            }
          >
            {!this.state.isHighlighted && (
              <div className="drop-zone">
                <p>
                  Drag and drop files of{" "}
                  <span className="highlight-select">
                    <br />
                    PDF or Images
                  </span>
                </p>
              </div>
            )}
            {this.state.isHighlighted && (
              <div className="drop-zone">
                <p className="white">Drop your files here</p>
              </div>
            )}
          </div>
        </div>
      </FormControl>
    );
  }
}

export default renderDragDrop;

import React，{Component}来自“React”；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/FormControl”导入FormControl；
常量imageMimeTypes=[
“图像/webp”，
“图像/gif”，
“图像/jpeg”，
“图像/png”，
“图像/svg+xml”，
“图像/webp”
];
const pdfMimeTypes=[“application/pdf”]；
常量isFileImage=（文件）=>{
返回文件&imageMimeTypes.includes（文件[“type”]）；
};
const isFilePdf=（文件）=>{
返回文件&pdfMimeTypes.includes（文件[“type”]）；
};
const isWithinFileLimit=（文件，文件限制）=>{
返回文件大小{
const{selectedFiles}=this.state；
设formData=new formData（）；
selectedFiles.forEach（（file）=>formData.append（“file”，file））；
this.props.onHandle（this.props.input.name，selectedFiles）；
这是我的国家({
画廊：[]，
错误文件：[]，
所选文件：[]，
石广生：错
});
};
handleFiles=（文件）=>{
const localFiles=[]；
常量erroredFiles=[]；
Array.from（files）.forEach（（file）=>{
const imageInstance=isFileImage（文件）；
const pdfInstance=isFilePdf（文件）；
如果（！imageInstance&&！pdfInstance）{
erroredFiles.push({
原因：“不支持格式”，
name:file.name，
大小：file.size
});
返回null；
}
const fileLimit=this.props.fileLimit | | 11148112；
const allowedSize=IsWithInfidelimit（文件，文件限制）；
如果（！allowedSize）{
erroredFiles.push({
原因：“文件超出允许的限制”，
name:file.name，
大小：file.size
});
返回null；
}
localFiles.push（文件）；
返回null；
});
this.setState（（prevState）=>({
…国家，
selectedFiles:[…prevState.selectedFiles，…localFiles]，
erroredFiles:[…prevState.erroredFiles，…erroredFiles]
}));
};
handleDrop（e）{
e、 预防默认值（）；
e、 停止传播（）；
这是不高的光（e）；
设dt=e.数据传输；
让files=dt.files；
console.log（“文件”，files）；
本文件为.手文件（文件）；
}
亮点（e）{
控制台日志（“突出显示”）；
e、 预防默认值（）；
e、 停止传播（）；
//将高光设置为真
this.setState（{ishighlight:true}）；
}
不高光（e）{
e、 预防默认值（）；
e、 停止传播（）；
//将高光设置为false
this.setState（{ishighlight:false}）；
}
render（）{
常数{
输入，
排，
多行，
标签，
必修的，
类型，
占位符，
fieldRef，
onClick，
残废
meta:{触摸，错误，警告}
}=这是道具；
删除输入值；
返回(
0？对：错）}
帮助文字={
触碰&&
（（error&&error.length>0？错误：null）||
（警告（&warning.length>0？警告：null））
}
InputLabelProps={{shrink:true}
disabled={disabled}
{…输入}
/>
{！this.state.ishighlight&&(

拖放{“”}的文件


PDF或图像

)}
{this.state.ishighlight&&(
将您的文件放到这里
)}
);
}
}
导出默认renderDragDrop；