Esse componente foi feito em ReactJS ^18.0.0, e tem como dependência o react-easy-crop.
Basta importar o componente Upload e passar as propriedades necessárias para ele.
| Propriedade | Tipo | Descrição | Obrigatório |
|---|---|---|---|
| type | image ou file | Define o tipo de upload que será feito. | Sim |
| iconSrc | string | Define o ícone que será exibido no botão de upload. | Sim |
| callback | (response: any) => void | É a função que será executada pelo Upload assim que ele enviar para a API o arquivo, o retorno tem o seguinte formato: {file, error, response}; | Sim |
| config | Config | Define as configurações do componente. | Sim |
| Propriedade | Tipo | Descrição |
|---|---|---|
| file | File | É o arquivo que foi enviado para a API. |
| error | any | É o erro que foi retornado pela API. |
| response | any | É a resposta que foi retornada pela API. |
Quando Error tiver valor o Response será null, e vice-versa, file é sempre retornado!
| Propriedade | Tipo | Descrição | Obrigatório |
|---|---|---|---|
| maxZoom | number | Define o zoom máximo que será permitido. | Não |
| aspectRatio | number | Define a proporção da imagem que será editada, precisa ser enviado no formato de uma divisão, 4/3, 16/9. | Não |
Exemplo de utilização:
import React from "react"; import Upload from "./components/Upload"; function App() { const enviarArquivo = (response: any) => { console.log("Resposta do Upload", response); }; return ( <div className="App"> <Upload type="image" iconSrc="https://i.imgur.com/FAh0OcY.png" callback={enviarArquivo} config={{ maxZoom: 10, aspectRatio: 4 / 3, }} /> </div> ); }
