Very simple image uploader

ImageUploader.tsx

import React, { useCallback } from 'react';
import { useState } from 'react';

interface ImageUploaderProps {}

const ImageUploader: React.FC<ImageUploaderProps> = () => {
  const [imageUrl, setImageUrl] = useState('');

  const handleDrop = useCallback((event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    const { dataTransfer } = event;
    let file: File | undefined;
    for (let i = 0; i < dataTransfer.items.length; i++) {
      const f = dataTransfer.items[i].getAsFile();
      if (f) file = f;
    }
    if (!file) return;
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      if (typeof reader.result === 'string') {
        setImageUrl(reader.result);
      }
    };
  }, []);

  const handleDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
    event.stopPropagation();
    event.preventDefault();
  }, []);

  return (
    <div>
      <div
        style={{
          width: '240px',
          height: '120px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          border: '1px solid',
          borderRadius: '8px',
        }}
        onDrop={handleDrop}
        onDragOver={handleDragOver}
      >
        Drag & Drop your image here
      </div>
      {imageUrl && <img src={imageUrl} alt="uploaded" />}
    </div>
  );
};

export default ImageUploader;