ajax - How to upload an image to ImgBB API using Javascript in a firefox addon - Stack Overflow

admin管理员组

文章数量:1290202

Info on the API can be found here. It does not give any details for using with Javascript, only with curl.

Have tried numerous different methods from old posts on here but this is the closest I have got so far.

function main() {
    var ul = document.querySelector('.redactor_toolbar')

    if(ul != null)
    {
        var new_li = document.createElement('li')
        var new_a = document.createElement('a')
        new_li.appendChild(new_a)
        ul.appendChild(new_li)

        new_a.addEventListener('click', function() {
            var input = document.createElement('input');
            input.type = 'file';

            input.onchange = e => {
                uploadImage(e.target.files[0])
            }

            input.click();
        })
    }
 }

 async function uploadImage(img)
 {
    var form = new FormData();
    form.append('image', img)

    var url = '' 

    const config = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Connection': 'keep-alive',
            'Content-Type': 'application/json',
        },
        body: form
    }

    const response = await fetch(url, config)
    const json = await response.json()

    console.log(response)
 }

The JSON response:

Info on the API can be found here. It does not give any details for using with Javascript, only with curl.

Have tried numerous different methods from old posts on here but this is the closest I have got so far.

function main() {
    var ul = document.querySelector('.redactor_toolbar')

    if(ul != null)
    {
        var new_li = document.createElement('li')
        var new_a = document.createElement('a')
        new_li.appendChild(new_a)
        ul.appendChild(new_li)

        new_a.addEventListener('click', function() {
            var input = document.createElement('input');
            input.type = 'file';

            input.onchange = e => {
                uploadImage(e.target.files[0])
            }

            input.click();
        })
    }
 }

 async function uploadImage(img)
 {
    var form = new FormData();
    form.append('image', img)

    var url = 'https://api.imgbb./1/upload?key=8d5867a9512390fb5e5dc97839aa36f6' 

    const config = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Connection': 'keep-alive',
            'Content-Type': 'application/json',
        },
        body: form
    }

    const response = await fetch(url, config)
    const json = await response.json()

    console.log(response)
 }

The JSON response:

• javascript
• ajax
• firefox
• xmlhttprequest
• firefox-addon

Share Improve this question Follow asked Mar 23, 2020 at 7:48 NOP da CALLNOP da CALL 93122 gold badges1010 silver badges1717 bronze badges 1

• does this api have any usage limitations or hidden charges? – Sujith S Manjavana Commented May 19, 2022 at 7:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

is the same problem for mi application.

Create

<input type="file" id="input_img" onchange="fileChange()" accept="image/*">

The code javascript

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

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


$.ajax(settings).done(function (response) {
  console.log(response);
  var jx = JSON.parse(response);
  console.log(jx.data.url);


});

}

This work for me

本文标签： ajaxHow to upload an image to ImgBB API using Javascript in a firefox addonStack Overflow