How to make HTTP request to the logic app

Questions about Thunkable Web API's
1

Hi there everyone, i have a question. How to make http request to the logic app which is the azure service while you have http URL and the body content to be in image bas64 format and get response.

2

I HAVE MAKE THE FOLLOWING BLOCKS

CAPTURE 1
CAPTURE 1785×524 23.3 KB

FOR MAKING HTTP REQUEST BUT I AM GETTING ERROR HOW CAN I MODIFY THEM

3

Hello @b511thegoldenboyu0
Please check this post: WEB API Firebase Storage It does not upload the file to the server - Questions about Thunkable / Web API’s - Community

4

Thanks, it has helped me but i have a question how can i use button component to send image to web viewer and get it base64 format without using button from web viewer itself.

1 Like
5

You can this Code for HTML Extension in Web Viewer, Send Image URL by Web Viewer Post Message, and Receive the Base64 by Web Viewer when receiving Message Block.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
<title>Image URL to Base64 Converter</title>
<style>
    body {
        font-family: Arial, sans-serif;
    }
    .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
    }
    #result {
        white-space: pre-wrap;
    }
</style>
</head>
<body>
<div class="container">
    <h1>Image URL to Base64 Converter</h1>
    <button onclick="convertToBase64()">Convert Default Image</button>
    <div id="result"></div>
</div>

<script>
ThunkableWebviewerExtension.receiveMessage(function(message) {
    var imageUrl = message; 
    convertToBase64()
    });
function convertToBase64() {
    var imageUrl = "https://res.cloudinary.com/di751ehfz/image/upload/v1713357051/zpmd4t3bpwklyds6maga.png";
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = this.width;
        canvas.height = this.height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(this, 0, 0);
        var base64 = canvas.toDataURL('image/png');
        document.getElementById('result').textContent = base64;
        ThunkableWebviewerExtension.postMessage(base64);
    };
    img.onerror = function() {
        alert('Error loading the image. Please check the URL.');
    };
    img.src = imageUrl;
}
</script>
</body>
</html>

Want to hire a Certified Thunkable Expert? Whoocoder | Thunkable Expert | Order Now On Fiver!!