Skip to content

5. Upload de imagens ImgBB API

Jump to bottom
Isaac Lourenço edited this page Mar 14, 2021 · 3 revisions

Com intuito de não sobrecarregar a aplicação, podemos utilizar uma Interface de programação de aplicações (API) que nos permita enviar as imagens e só nos retorne url's públicas das imagens.

API ImgBB

A API do ImgBB é bastante simples de usar, além de ser bastante rápida no upload.

Como posso testá-la?

Ao criar uma conta em Create Account - ImgBB, acesse API e lá você deverá reconhecer sua "API Key", ou seja, sua chave secreta para utilizar a API.

  • Crie um script PHP contendo:
<?php
$ch = curl_init();

$key = "SUA API KEY";

// como a api aceita fazer upload a partir de um link, vamos usar assim para testar
$linkImg = "https://pbs.twimg.com/profile_images/1568488407/IMG_0053.JPG";

curl_setopt($ch, CURLOPT_URL, "https://api.imgbb.com/1/upload?key=$key&image=$linkImg");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

$response = json_decode(curl_exec($ch));

echo $response->data->url;

Você verá a url retornada pela API! Pronto! Mas pera... E para fazer upload com arquivos via HTML? Vamos lá!

Fazendo upload via formulário

  • Inicialmente, crie o HTML necessário para o envio do arquivo
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>UPLOAD FORM</title>
</head>
<body>
    <form 
        action="upload.php" 
        method="POST"
        enctype="multipart/form-data"
    >
        <input type="file" name="image"/>
        <input type="submit"/>
    </form>
</body>
</html>

Para que possamos enviar um arquivo via formulário, é necessário adicionar o tipo de encriptação dos dados com o atributo enctype="multipart/form-data".

  • Crie o arquivo upload.php

Vamos ignorar as checagens que são necessárias em ambiente de produção (tamanho máximo, tipo de arquivo etc)

$key = "SUA API KEY";
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, "https://api.imgbb.com/1/upload?key=$key");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// vamos enviar a req via POST
curl_setopt($ch, CURLOPT_POST, true);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

// é necessário transformar o conteúdo do arquivo de imagem para base64
$imgBase64 = base64_encode(file_get_contents($image["tmp_name"]));

// por padrão, o name vem com .extensão, ao explodirmos, pegamos só o nome
$imgName = explode(".", $image["name"])[0];

// diferentemente de a imagem por link, agora precisamos enviar um "corpo" de dados para a api
$data = array(
    "image" => $imgBase64, 
    "name" => $imgNome
);

// adiciona a imagem no corpo da requisição
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);

// executa a req, decodifica a resposta para formato json
$result = json_decode(curl_exec($ch));

echo $result->data->url;

Voilá!

Clone this wiki locally