can not return the link when im trying to do it inside a function

Question

var image = document.getElementById('imageUpload');

image.addEventListener('change', event => {
    var imageData = event.target.files[0];
    imageUpload(imageData);
});


function main(text, image) {
    var text = document.getElementById('reportInput').value;
    if (image === '' || text === '') {
        alert('error');
    } else {
        console.log(text);
        // add here the upload image
    }
}

function apiToJson(link) {
    var parsingData = JSON.parse(link);
    console.log(parsingData.data.link);
}

function imageUpload(data) {

    var myHeaders = new Headers();
    myHeaders.append('Authorization', 'Client-ID 1a21bbf7bb87c77');

    var formdata = new FormData();
    formdata.append('image', data);

    var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: formdata,
        redirect: 'follow'
    }

    fetch("https://api.imgur.com/3/image", requestOptions)
        .then(response => response.text())
        .then(result => apiToJson(result))
        .catch(error => console.log('error', error));
}

so thats my code, and the main function is connected to the html for the click event. when im - console.log(parsingData.data.link); inside the apiToJson() its working. and i dont know how to get the api link inside the main function for the click event. ive tried like 50 other options and i could not get it to work. im a beginner so its probably simple but i cant do it.

thx for the help.

score -1 · Answer 1 · answered Nov 02 '20 at 20:32

Well if your API respond with JSON, just do

 return fetch("https://api.imgur.com/3/image", requestOptions)
.then(response => response.json())

And then

image.addEventListener('change', event => {
    var imageData = event.target.files[0];
    imageUpload(imageData)
    .then(json => console.log(json) )
    .catch( e => console.error(e) )
    ;
});

can not return the link when im trying to do it inside a function

1 Answers1