strapi/packages/strapi-plugin-upload/admin/src/components/InputFile/index.js

import React, { createRef, useState } from 'react';
import PropTypes from 'prop-types';
import { Button } from '@buffetjs/core';
import { useGlobalContext } from 'strapi-helper-plugin';
import getTrad from '../../utils/getTrad';
import Cloud from '../../icons/Cloud';
import Label from './Label';
import Input from './Input';
import P from './P';

const InputFile = ({ name, onChange }) => {
  const [isDragging, setIsDragging] = useState(false);
  const { formatMessage } = useGlobalContext();
  const ref = createRef();

  const handleAllowDrop = e => e.preventDefault();

  const handleChange = ({ target: { files } }) => {
    onChange({ target: { name, value: files } });
  };

  const handleDragEnter = () => {
    setIsDragging(true);
  };

  const handleDragLeave = () => {
    setIsDragging(false);
  };

  const handleDrop = e => {
    e.preventDefault();

    setIsDragging(false);
    onChange({ target: { name, value: e.dataTransfer.files } });
  };

  return (
    <>
      <Label
        htmlFor={name}
        isDragging={isDragging}
        onDragOver={handleAllowDrop}
        onDragEnter={handleDragEnter}
        onDrop={handleDrop}
      >
        <Cloud />
        <P>
          <span className="bold">
            {formatMessage({ id: getTrad('input.label-bold') })}&nbsp;
          </span>
          <span>{formatMessage({ id: getTrad('input.label-normal') })}</span>
        </P>
        <Button
          type="button"
          id="button"
          name="button"
          color="primary"
          onClick={() => {
            ref.current.click();
          }}
        >
          {formatMessage({ id: getTrad('input.button.label') })}
        </Button>
        <Input
          ref={ref}
          type="file"
          multiple
          name={name}
          onChange={handleChange}
        />
        {isDragging && (
          <div className="dragzone" onDragLeave={handleDragLeave} />
        )}
      </Label>
    </>
  );
};

InputFile.defaultProps = {
  name: 'files',
  onChange: () => {},
};

InputFile.propTypes = {
  name: PropTypes.string,
  onChange: PropTypes.func,
};

export default InputFile;