Deixar o servidor rodando e iniciar a aplicação web com npm start apra ir visualizando todas as alterações

react-dropzone

Vamos utilizar ela para criar uma caixa para poder arrastar os arquivos para dentro

react-dropzone

Essa biblioteca apresenta várias formas de fazer essa funcionalidade e nós vamos utilizar um exemplo bem básico

npm install react-dropzone

Precisamos adicionar essa funcionalidade no nosso componete/rota/página CreatePoint

Vamos começar criando um componente novo Dropzone que iremos inserir dentro de CreatePoint depois. Para isso vamos criar uma pasta /components dentro de /src e o componente Dropzone.

Vamos utiliziar o modelo da documentação da biblioteca. Mas vamos alterar o nome do componente e transformar em uma constante para manter o padrão dos outros componentes que criamos.

Vamos dar um console.log(acceptedFiles ) para vermos qual é o retorno dessa função

import React, {useCallback} from 'react'
import {useDropzone} from 'react-dropzone'

const Dropzone = () => {
  const onDrop = useCallback(acceptedFiles => {
    console.log(acceptedFiles)
  }, [])
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {
        isDragActive ?
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  )
}

export default Dropzone

Agora precisamos importar esse componente Dropzone em CreatePoint e inserir ele no html depois de <h1>

import Dropzone from '../../components/Dropzone'

Veja que já aparece o componente em tela, já conseguimos clicar e aparece a opção para adicionar um arquivo

E para arrastar também já está funcionando