Image URL Links

Ask us anything Tips and Hacks
1

This is just a helpful tip to anyone who might be running into issues with image urls in WeWeb.

When an image or file is uploaded to WeWeb, you would expect that the URL would be formatted in such a way that is compatible with other services.

For instance, if an image on your computer is named “Nice Eiffel Tower Image” and you upload that on WeWeb, the file url would be saved as “https://storage-cdn.weweb.io/4def5e49-d6cc-441a-89b4-6ceb2d3e678e/users-storage/50fc1d05/Nice Eiffel Tower Image.jpg”

!!! Note the spaces in the URL link.
Edit: ^See how even the forum can’t parse the URL properly because of the spaces?

When this is sent to other services via API, like Xano, it would result in an error because it is web standard to have spaces in URLs replaced with encoding (such as “%20”) or some other filler value like “-”. URLs can’t have spaces in them.

2 Likes
2

You can also use the encodeURI() javascript function to encode it so that you have a valid URL.

The resulting encoded URL in your example is https://storage-cdn.weweb.io/4def5e49-d6cc-441a-89b4-6ceb2d3e678e/users-storage/50fc1d05/Nice%20Eiffel%20Tower%20Image.jpg

Not sure if there are any reasons why those wouldn’t be automatically encoded by the platform. Maybe someone from weweb can chime in on that, but it seems to me like it should be the case that provided URLs are always properly encoded.

3

I would expect that as well. :slight_smile:

I implemented encoding on my backend for all file uploads as a result, but it can certainly be done on the frontend as well.

4

I created a Regex replaceAll formula, follow the example
3 Parameters

search text

replacement text
Test value
+

textoOrigem text

JS
let texto = textoOrigem
let textoSubstituido = texto.replaceAll(search,replacement);
return textoSubstituido

component uploadfile
Current value
"https://storage-cdn.weweb.io/75cef5c5-df84-444e-89c8-f3a5d1cc70e9/users-storage/b3906169/Captura+de+img.png "