Old Drag drop
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
JavaScript
import React, { Component, createRef } from "react";
import Avatar from "@material-ui/core/Avatar";
import "../home.css";
import CloseIcon from "@material-ui/icons/Close";
import ErrorIcon from "@material-ui/icons/Error";
import FileCopyIcon from "@material-ui/icons/FileCopy";
import PropTypes from "prop-types";
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;
};
/**
* Takes in a file limit prop and a submit prop
* the submit prop is a function that recieves form data containing
* the selected images
*/
class RenderDragDrop extends Component {
constructor(props) {
super(props);
this.state = {
dropArea: createRef(),
gallery: [],
erroredFiles: [],
selectedFiles: [],
isHighlighted: false
};
}
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
});
};
componentDidUpdate(prevProps, prevState) {
const prevSelectedFiles = prevState.selectedFiles;
const nextSelectedFiles = this.state.selectedFiles;
if (prevSelectedFiles.length !== nextSelectedFiles.length) {
this.previewFiles();
}
}
handleFiles = (files) => {
const localFiles = [];
const erroredFiles = [];
Array.from(files).forEach((file) => {
const imageInstance = isFileImage(file);
const...