ImgBB Uploader Js

gistfile1.txt

<h1>Test</h1>

<input type="file" id="input_img" accept="image/*">
<button class="btn-upload">Upload</button>
<div class="message"></div>
<div class="output"></div>

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>

$('.btn-upload').click(function(){

    $('.message').html('Processing ..<br/>');

    var file = document.getElementById('input_img');
    var form = new FormData();
    form.append("image", file.files[0])

    var settings = {
        "url": "https://api.imgbb.com/1/upload?key=762894e2014f83c023b233b2f10395e2",
        "method": "POST",
        "timeout": 0,
        "processData": false,
        "mimeType": "multipart/form-data",
        "contentType": false,
        "data": form
    };

    $.ajax(settings).done(function (response) {
        $('.message').html('Done ..<br/>');
        let data = JSON.parse(response);
        $('.output').html(`<img src="${data.data.display_url}" />`);
        console.log(data);
    });

    return false;
});
</script>