upload base64 encoded image data

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

upload base64 encoded image data

Matt Maier
I'm trying to connect my desktop app to my Bubble.is app. They have a way
to build APIs.

https://bubble.is/reference#API.sending_data

I've got text uploading working. As in, I can upload text from the desktop
and work with it in the web app.

I've also got image URLs working. As in, I can include the URL of an image
that's already hosted somewhere online and the image will be pulled into
Bubble so I can work with it.

What's not working is uploading image data from the desktop app to the web
app.

I've formatted the body of the POST like this, which as far as I can tell
is what they want:
first=some thing&second=another
thing&third={"private":false,"filename":"some_filename.jpg","content":"a
string of base64 encoded image data"}

Since Bubble isn't returning any errors, but also isn't putting the
uploaded image data into the database as an image, I wondered if maybe I'm
doing something wrong on the Livecode side. I used this to process the
image data:

start using stack "easyJSON"
   put "C:\Users\some-image.jpg" into tFile
   put URL ("binfile:" & tFile) into tImage
   put base64encode(tImage) into tImage64
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
hh
Reply | Threaded
Open this post in threaded view
|

Re: upload base64 encoded image data

hh
You could try two things after "put base64encode(tImage) into tImage64":
replace newlines in the encodedData and give a data-header.
Both is needed when setting HTML5 attributes, may be also in your case.

[1] replace numToChar(10) with empty in tImage64
[2] "content": "data:image/png;base64," & tImage64 & quote

Probably both png and jpg are supported, may be png is the default.
Please tell us if you found a solution.

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: upload base64 encoded image data

Matt Maier
Thanks. I might not have done it correctly, but neither 1 nor 2 made a
noticeable difference.

I am a little confused by this. I tried copying out the base64 data to put
it into a different API testing app and it looks way too short. I'm not
familiar with how much text it takes to describe an image, but this doesn't
look like enough.

This also doesn't have the closing JSON tags like quotes and brackets. Is
the variable watcher just cutting off the content or is the content going
out to the API truncated like this?

uno=uno is 1&dos=dos is
2&tres={"private":false,"filename":"NK_Exoskeleton_B.jpg","content":"\/9j\/4AAQSkZJRgABAgEBLAEsAAD\/4RPHRXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAcAAAAcgEyAAIAAAAUAAAAjodpAAQAAAABAAAApAAAANAALcbAAAAnEAAtxsAAACcQQWRvYmUgUGhvdG9zaG9wIENTMyBXaW5kb3dzADIwMTA6MDU6MjcgMDE6MTk6NTgAAAAAA6ABAAMAAAAB\/\/8AAKACAAQAAAABAAACgKADAAQAAAABAAADwAAAAAAAAAAGAQMAAwAAAAEABgAAARoABQAAAAEAAAEeARsABQAAAAEAAAEmASgAAwAAAAEAAgAAAgEABAAAAAEAAAEuAgIABAAAAAEAABKRAAAAAAAAAEgAAAABAAAASAAAAAH\/2P\/gABBKRklGAAECAABIAEgAAP\/tAAxBZG9iZV9DTQAB\/+4ADkFkb2JlAGSAAAAAAf\/bAIQADAgICAkIDAkJDBELCgsRFQ8MDA8VGBMTFRMTGBEMDAwMDAwRDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAENCwsNDg0QDg4QFA4ODhQUDg4ODhQRDAwMDAwREQwMDAwMDBEMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM\/8AAEQgAoABrAwEiAAIRAQMRAf\/dAAQAB\/\/EAT8AAAEFAQEBAQEBAAAAAAAAAAMAAQIEBQYHCAkKCwEAAQUBAQEBAQEAAAAAAAAAAQACAwQFBgcICQoLEAABBAEDAgQCBQcGCAUDDDMBAAIRAwQhEjEFQVFhEyJxgTIGFJGhsUIjJBVSwWIzNHKC0UMHJZJT8OHxY3M1FqKygyZEk1RkRcKjdDYX0lXiZfKzhMPTdePzRieUpIW0lcTU5PSltcXV5fVWZnaGlqa2xtbm9jdHV2d3h5ent8fX5\/cRAAICAQIEBAMEBQYHBwYFNQEAAhEDITESBEFRYXEiEwUygZEUobFCI8FS0fAzJGLhcoKSQ1MVY3M08SUGFqKygwcmNcLSRJNUoxdkRVU2dGXi8rOEw9N14\/NGlKSFtJXE1OT0pbXF1eX1VmZ2hpamtsbW5vYnN0dXZ3eHl6e3x\/\/aAAwDAQACEQMRAD8A9BCmEMKYSUyCcFRTpKZp1EFV87JZj0++xtIfM2OJEAfym+\/3ucxntSU2H21VgmyxrAJkucBEc\/SUmua5rXtIcx4DmuBkEH6LmuH0mrzfrHUeidPbcbKn5eSwB\/p40YoG0F7HWbWn0va79D\/2q9P+dV76ofXJ3UOqM6dT0z7M3Le529l7n49bK2vtt9LEc1v2d9u32ek7ZZY\/1f8ABo1v4IB0B77Pdp0ySCWaSiCnSUySTJ5SU\/\/Q9ACkFAFSBSUyBTqI8BqVzvUPrpVjW5bMLEdm14BDb79+2veXbHMr2te97W7b2+p+fbi5P\/GWJT0wWR9ZcjFrx2NfZSbazufjPewWOqeNrnV1WPa52xzG2M\/fVCvq2fgvysvqmW0Uj20VODg7cRuA9Da1v6PdRZX6HsfX\/hlzj\/rd1Ymxpyg\/GyJbeNraza1zG0PsrY3HsdTua39F+s\/ovTRojVXhurqvQMnquE3qfS2NyMm903ei8Ope3Vn2it9xZstZsr9Wr+v+fUrn1H6D1Dp\/Wq35QFbCy20Vbg53qBvob2el6jG1Obb+e+v9IuayOlZD7LMrF34zm7S63FcdwrL2+teX0mnfsp3\/AJm9710OL9aust6rj\/Y6aH4FzHY2Pl345FoFTWPs+1vpd6v6V231nt\/Rer\/g2IWBsKVZO76KkqPSuqDqDHywMsqDdxadzCTua703H6W1zf8Apq8kpdJMkkpkCnUZSSU\/\/9HvQpAqAUkVNfq17cfpGfe+w1NqxrXGwCS2GO1a3Tc5cD0K6mhteNk0n16cqzJyA1oLS7HH2fE2uf8ASY3Mttynu\/Pvu\/m11v1y3n6sZ7W\/nNDSfAE+2f8ArnprgK+sUUN6ja8ND8iwV1OYwOsc03HKucHuNe2qltddn0\/5yzE\/4RLoro1vrD1TNvzcm7NcSd7rIbIBred1Tq9znOazb+j9Pf8Ao9npq70i99eIaa21\/pRtAtDT7HH1G+m6321vbbvVrG+r4+teM5+OHHFxAd9xaWOfYQ3bg1l3u\/R+3KyfZZ\/gavpqrjVuyGCumix9gBaDjtcSwgAej+ja6tv\/AFxLiJAtQb+FkZmO8spcxotb6bm7mO3NJ27OXfSd+4tv6l4XTM2lubZURlWMdTadzgGva79L6dW7ZX6np1ud7VytNPo5jarLdtrdSGWers7TfbXto9v59dNlv+j9T1FpdAz76Oo5FLfc\/wBW2zIbVY7FMS5js2qu716vptZ6nv8AQZ\/OZH6H1npqaeq6jmXVfWmrpGE403HEZk72NaQKy\/JZkfo7Guq\/SXVYdOz\/AIf2fzS1OgdWHWOlVZ21rHultrWSW7h3Zu9zWun6D\/5r+a\/MXn1PU81n14+0WudabXCqm3O\/R2iqpllfoWGqprKW22v9T9HT6X+G\/T+yxbH1T61UzrLun0+rUzJe45GNe0tLLSXQ+o7rGu\/wdXqMs\/WqP0vpV21p2qnuUkySCF0kySSn\/9LuwpKAKlKKEWeahgZPrND6TW5tjHDc0td7HNcz85vuXmX1k6Lj1VZGRTUMZ1Bc99TOC07fe6qfTZtr+j6C9D69m2YXSMi+okWwGscGh4aXH3ve2z2emyptm\/d\/59XJdCpH1gyXYmbbU7bacm4U8W44eb214+7dvoblOroe\/wD0FqGtrgN\/APXdB6W7D+qeJ0zaRacI+oyYPq3sddcNxH0vWu2rzh32xlVbmPJNtbmtAdp6bHvbUzaC1rHMx3NpfX\/gl6T1vrRwjTTWS3KyXS14EhrRO57d3te9j\/R\/Rf6N64frPS3YuUwOpcx8Ov6hVWWuLST9mrvaxgf+jv8AQtssZR\/N\/uInbVF04Jb6drZcdznDawagD81ztp97v3GLc6Yx76Lsusn1se95ocx3M7vY11v8zk7Dv9N7\/Rzaf+E\/SLIbZjMskWGqtpB9XbuLavFux22v\/hLNnqf8Kuj6G6h1BqsssyWOyn0uLa5b6e6XN+0+9vovssbazGfTk\/pf5r0P09iYlP8AXX6q2\/sjp+fiw63Cx6aMot9o2tY1jMjTb+jb\/Nv\/AJHoqv03p+IL+kZ1Wa9zbqX4NJudstp6iweo2rZUfb61Psou2ZH+B\/n\/ALTSt76r29Xzn15OVl\/asJ9dlT69zTTZGnqMpc39LV+k+zutZZ6W+v8A0axPrR9Q6ensf1bpl1rcWpwdk1QX2Y9O9r\/WwbG+\/ZhO\/TbLP5uv9Jv\/AEKfdirUDWr6FTYLaWWjUPEyOJ\/O\/wCkpFcL0L6ymnKaHfpcXJuua7Irg+sT62RSyjCc+u7HzLrPUs9Fnr+p6\/ps9f8AM7LDzcTPxa8zCtbkY1w3V2s4Pi0g+5ljPo2VP\/SVv\/nEEGumrYlOopJIf\/\/T7kFSQwVIFFCPNYy3Dure0Oa9haQ4bhqRG5ss\/wCqXI\/Vnp1v1c6kLbXi\/C6gfspyQ3b6Ty9ppa9nu+z+rkPZW\/Y\/0b\/0S6rqN1VWDcbHuZuY5rNgBsL9rntZQx5ayy\/2foq\/8IuQ6Psv+tDcLMreK6yx7Krp9X1ml2ThMOyXfo3U\/aLbXO\/4Oz9H6iGqqb31s6fdkddwTbeK8W01bixzm21Cp+tj2tG11T7X+lv+n7\/U\/wC065rM6rZidRyrMcTR697DUOwaRsfV+56Vr7bGbPZ713WdVTk5D7zaGl5bSywtJAYw66j+U61\/9dcz9a+g4bcerN6RXGY17vXrY4+nc3bue9tDt36497a\/fV\/O\/wCFQ4rNUiySdNtnnHvde

On Mon, Dec 19, 2016 at 5:04 PM, hh <[hidden email]> wrote:

> You could try two things after "put base64encode(tImage) into tImage64":
> replace newlines in the encodedData and give a data-header.
> Both is needed when setting HTML5 attributes, may be also in your case.
>
> [1] replace numToChar(10) with empty in tImage64
> [2] "content": "data:image/png;base64," & tImage64 & quote
>
> Probably both png and jpg are supported, may be png is the default.
> Please tell us if you found a solution.
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
hh
Reply | Threaded
Open this post in threaded view
|

Re: upload base64 encoded image data

hh
In reply to this post by Matt Maier
Because "+/=" is possibly in the encoded data:
Did you already try the following?

put urlEncode(base64encode(myImg)) into tImage64
put quote& "data:image/jpg;base64," & tImage64 &quote into myContent
post ... "content": & myContent ...

The image size will increase by a factor of 3 to 4 using base64.
There is also a server side post_max_size, but this is usually
announced (some online converter have this around 20 MByte).


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
hh
Reply | Threaded
Open this post in threaded view
|

Re: upload base64 encoded image data

hh
In reply to this post by Matt Maier
Moreover it is possible that they expect JSON-Base64 (without saying it).
Then instead of urlencoding the base64 code the following should work.

put base64Encode(myImg) into tImage64
replace numToChar(10) with empty in tImage64 -- doesn't harm
replace "+" with "-" in tImage64
replace "/" with "_" in tImage64
replace "=" with empty in tImage64 (the zero to two trailing "=")
put "\n" after tImage64

[See https://jb64.org/specification/]

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode