Save image from dynamic url from API

Wappler General
1

Hi,
I am calling an API and receiving some data
one of the objects is a img url for example “https://webiste.com/products/product1/image.jpg”
i would like to save that image in the assets folder.
I have tried load image / save image action but it gives me an error
“!Invalid Path! https://webiste.com/products/product1/image.jpg” (the error returns correct url to the image i want to save)

Server action looks something like this

-API Action
-Repeat (repeating API results)

So a this point i tried to load an image (using image url from API results)
and then i tried to use save image action

Still i am getting !invalid path error,
bare in mind that the images Im trying to save are hosted on different server / domain
than my wappler website.
Is it even possible to download image from external source?

Thanks for help!

1 Like
2

This currently doesn’t work. You can use a dropzone photo upload and then click in the box and when it pops up paste the URL in and it will upload the image. Other than that I haven’t found a way to do this.

3

+1 for this
I’m interested too in a solution to download images/files on a server folder from a URL.
Thank you ! :slight_smile:

4

I haven’t spent too much time with flows yet. But wondering if there might be a way to implement it by using a flow?

5

I desperately need a better solution that what I am using. although it works, it could be way more efficient.

6

Any update on this topic?
Is there a reason why this is not possible?

7

did you work out a way to do this? I have a project that I am working on that I could really do with this

8

Hi. Has anybody discovered any way to do this? Just found this thread…
thanks!

9

I’m trying to figure this out now too - anyone out there know how to do it?

10

do you want to do it directly using a SA and a URL or manually via a component such as dropzone?

1 Like
11

Directly using a SA, I need to make it seamless for the end users.

Its a QR code API:
https://api.qrserver.com/v1/create-qr-code/?size=370x370&data=example

12

OK, just its easy from a file input or dropzone. I seem to recall an extension to download a file from a url, let me search, see if i can find it

13

Maybe my mind is failing, cant find it.

so what will be the workflow. User adds path to image into input, submits form , SC API uploads and processes?

14

User clicks a button ‘create QR for image watermark’

SC adds the path to https://api.qrserver.com/v1/create-qr-code/?size=370x370&data=https://www.example.com
SC then saves the image returned from the API above to a folder on the server
Imagepath is recorded to the db so we can pull it out anytime after.

This qr code than then be used at a later date to use as a dynamically created watermark on another image (thats the easy bit)

15

Ah, i see.

Battled with a similar problem myself a few years ago with the same API. My solution was, rather than store the QR code, i simply recreate it each time it needed to be displayed.

So an image link became like this:


<img  dmx-bind:src="'https://api.qrserver.com/v1/create-qr-code/?size=150x150&amp;data=https://mysite.com/admin/ticketdetail.php?basket_id='+serverconnect1.data.query[0].basket_id" class="img-fluid img-thumbnail">

I played about with variants of this but never got it to work

16

looks interesting

1 Like
17

Knew i had seen something in the past

1 Like
18

Thanks for that update, I’ve spent a fair bit of time on that too - I am already loading live from the API in an <img> tag but I need it to save as I’m using dynamic image rendering by the excellent www.cloudimage.io - the main image is resized and optimised using dynamic urls, they work perfectly, but adding a qrcode as a watermark is problematic as the url for cloudimage needs an actual file and not a generated one from an API.

On the page, I’m using this to resize/optimise image:
<img alt="image" title="image" dmx-bind:src="'https://xxxxxxxxx.cloudimg.io/toms-url.com'+imgFile+'?func=crop&amp;width=300'" id="aa">

to add the qr code watermark, I’d need to use the URL of a file (this can be dynamically generated, same as the image url above), it looks something like this:
<img alt="image" title="image" dmx-bind:src="'https://xxxxxxxxx.cloudimg.io/toms-url.com'+imgFile+'?func=crop&amp;width=300&wat=1&wat_url=http://sample.li/qr-code-image-link-here.png&wat_scale=45&wat_gravity=southeast&wat_pad=15'" id="aa">

Its working great for logos, but I really need a QR code in there as well.

19

I’ll get a look at this ASAP…

20

I know with PHP you fetch a file from a URL and then save it… im just passing some ideas… maybe generate the qr code first… and then import the image…

<?php
// URL of the QR code
$url = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Example';

// Get the QR code image
$qr_code = file_get_contents($url);

if ($qr_code !== false) {
    // Save the image
    file_put_contents('qr_code.png', $qr_code);
    echo 'QR code saved successfully as qr_code.png';
} else {
    echo 'Failed to retrieve QR code';
}
?>