Software: Apache/2.4.41 (Ubuntu). PHP/8.0.30 

uname -a: Linux apirnd 5.4.0-204-generic #224-Ubuntu SMP Thu Dec 5 13:38:28 UTC 2024 x86_64 

uid=33(www-data) gid=33(www-data) groups=33(www-data) 

Safe-mode: OFF (not secure)

/var/www/html/wincloud_gateway/plugins/content-export-import/admin/src/components/DropFileZone/   drwxr-xr-x
Free 13.21 GB of 57.97 GB (22.78%)
                            Encoder    Tools    Proc.    FTP brute    Sec.    SQL    PHP-code    Update    Self remove    Logout    

Viewing file:     index.js (1.8 KB)      -rw-r--r--

import React, { useState } from "react";
import PropTypes from "prop-types";

import DragAndDropIcon from "./DragAndDropIcon";
import { Label, P } from "./styles";

function DropFileZone({
  acceptMimeTypes,
  acceptFilesTypes,
  onUploadFile,
  onUploadError,
}) {
  const validateFile = (file) => {
    if (acceptMimeTypes.includes(file.type)) {
      onUploadFile(file);
    } else {
      onUploadError();
    }
  };

  const handleFileChange = ({ target: { files } }) => validateFile(files[0]);

  const [isDragging, setIsDragging] = useState(false);
  const handleDragEnter = () => setIsDragging(true);
  const handleDragLeave = () => setIsDragging(false);
  const stopDragEvent = (ev) => ev.preventDefault() && ev.stopPropagation();
  const handleDrop = (ev) => {
    ev.preventDefault();
    setIsDragging(false);

    const { files } = ev.dataTransfer;
    validateFile(files[0]);
  };

  return (
    <Label
      isDragging={isDragging}
      onDrop={handleDrop}
      onDragEnter={handleDragEnter}
      onDragOver={stopDragEvent}
    >
      <DragAndDropIcon />
      <P>
        <span>
          Drag & drop your file into this area or{" "}
          <span className={"underline"}>browse</span> for a file to upload
        </span>
      </P>
      {isDragging && (
        <div onDragLeave={handleDragLeave} className="isDragging" />
      )}
      <input
        onChange={handleFileChange}
        type="file"
        accept={acceptFilesTypes.join()}
        hidden
      />
    </Label>
  );
}

DropFileZone.defaultProps = {
  acceptMimeTypes: [],
  acceptFilesTypes: [],
  onUploadFile: () => {},
  onUploadError: () => {},
};

DropFileZone.propTypes = {
  acceptMimeTypes: PropTypes.array,
  acceptFilesTypes: PropTypes.array,
  onUploadFile: PropTypes.func,
  onUploadError: PropTypes.func,
};

export default DropFileZone;