Image from Python to JS to Firebase Storage

[mark.breuss]

Hi there,

I want to save an image to Firebase storage.
I have a JS function that does that, however I cannot get the media object from Python to JS.
Also I don’t want to go to the server, since it should be as fast as possible.

I’ve tried to send the Media Object as js_call function parameter -> didn’t work

I’ve tried to convert it to a base 64:

self.call_js('"save_img","data:image/png;base64," + base64.b64encode(self.image))

Didn’t work:

To sum it up, I need to get an Image from a Fileloader to a JS Blob Media.
Which I can then upload to FS.

I’d appreciate any help on this!

cheers,
Mark

[meredydd]

Hi Mark,

Could you provide a bit more context (perhaps a clone link for an app? Don’t worry, the Secrets are cleared when the app is cloned, so your Firebase keys are safe ).

In particular, it looks like this error is occurring in side your save_img() function in Javascript, but you haven’t provided the code for that function, so it’s rather difficult to see what’s going wrong!

[mark.breuss]

Hi @meredydd,

I’ve put together a minimal sample app of the problem:
https://anvil.works/build#clone:VNX4PCDGEVBSDD37=NP5ADWE5WTJVRGRIUVRTGEWY

The connection works fine if you presss the button “upload” on the sample app it does create a file with the correct filename.
However the file is some strange octet-stream with just 9Byte

I think the problem is that although i pass the image onto the js function it is not serialized into something that firebase can work with.

As I mentioned, I tried to convert it to a base 64 but couldnt get it to work.

(I could of course just send it to the server and store it from there with a python library but then I’d lose the serverless Architecture as well as some performance)

Any help is appreciated!
Best, Mark

[mark.breuss]

Hi @bridget,

Above I tried to use your code to convert an image to a base 64 String Client Side.

How to get base64 string from database media object

Hi @Agobin, Base64 encoding has a length limit so you may want to use the Media object’s url property in your html instead. To do that, you can just change your client code to the following: def retrieve_and_show_url_img(self): image = app_tables.images.get(number = 1234)[‘media’] url = image.url html = '<img src="{0}"/>'.format(url) self.call_js('printPage', html) If you do want to use Base64 encoding, I think you’re just missing the closing quote from the src attribute in yo…

I found out that your Clone link on the post above works fine for python2, however it breaks when switching to python 3. Can you reproduce the issue?

I cannot find anything different for the base 64 library on pyhton3 so i guess I’m either on the wrong path entirely or maybe there is something wrong with the base 64 Lib on Skulpt?

Either way I’d appreciate the help on the matter!

[stucork]

@mark.breuss - I can reproduce - it looks like this is an issue with the client side base64 implementation in python3 mode. I’ll add this to our list.

as a temporary workaround you could do the base64 conversion on the server
(until this gets updated on the client)

@anvil.server.callable
def get_b64_str(img):
    import base64
    b = img.get_bytes()
    b = base64.b64encode(b)
    return b.decode() # return the str

[mark.breuss]

Hi @stucork,

sorry for the late reply!

I will use the workaround thank you very much.

cheers,

Mark

[stucork]

@mark.breuss: update - the base64 library should now work on the client in python3 mode