Uploading Mobile Image Input to google photos

[geoffsharris]

Trying to upload photos to google photos as part of a mobile app.

Id' like to use the Image Input component that allows use of the phone camera.

I've got everything set up to use the Google Photos API and can list the albums, add an album etc.

When I go to try and upload a photo, I'm getting the response file token, but then adding that as media to a photo library fails.

{{ imageInput1.value[0] }} evaluates to a blob blob: https;//orchids.retool.com/94cca069-7192-4216-a3c2-14974e82fbe9

When I try to upload:

I get a return message with the token to then add the media to a photos library.
I've also tried {{ imageInput1.value[0] }} with and without json brackets and as a binary using {{ imageInput1.value[0] }}. They all behave the same and return the token.
Then if I use the add media in any of the above scenarios

I've also tried a json newMediaItems that includes the library I created with retool.

In each case, creating the file has failed. I'm assuming this has something to do with the blob and how it is being handed over in the body of the request. Any help to figure this out out be much appreciated.

{
"newMediaItemResults": [
{
"uploadToken": "CAISiQMAMH1E/8yc7oCboGA63SH71yIMTErnztjA+9nkgwqtPux5pTf0EJFMKjb8pPTaHmreut46Sv3kRNZc/VgngKzER9Kgam4gLt4/TRiFjgq/fKu4Na6DJFRXdDJAkwM3uOcGppfQE1WjHDgJiweTY2uFjaGUAShe6oeqAgPXaKn90EhrVsweo9Lj8Bpn9Qlx+kMtz5y02tqxlty7m5xKFaxtWRGqINXDnVB9qcu6ywQP48QHzyExHws/OuO5r/WG0f203ONC00nchi3PTbUoWBPQh9tgyrEkKTlI0JG+qCOb6R2m4kXYbDuWr0TvkMzMYoyPF9zmOz+C17UjrzWGqpE1mCXptsOkGwo7TPIMC4Vmzzx+kAKJX/sBZSOxmTWgyE1LkbwcoN2Cen2DZhqWYULwq6ATV3kap+bSS49MdOaFSXN7Vd/jepD8nff7qJzTJT3/jLBSFuEH05AePHA56d/K6u1Y+X1VdryRY9NxqCNMIKcP19gfeTDq+0nqwj/JjLVIHr1WGq0fPOo",
"status": {
"code": 3,
"message": "Failed: There was an error while trying to create this media item."
}
}
]
}

[Kabirdas]

Hey @geoffsharris! Can you try using the getDataByObjectURL util mentioned here?

You can try running a JavaScript query on capture that does something like:

const dataURL = await utils.getDataByObjectURL(imageInput1.value[0]);
const base64Data = dataURL.split(",")[1];
return base64Data;

And then upload that data using a binary body type but keeping the same headers:

From there you should be able to run your create media items query.

Let me know if that works!

[geoffsharris]

Thanks for the idea. I tried the url method, but did not use the split. Will give it a try. I have set up a google cloud bucket and can use the BLOB to upload the image, but google photos seems a bit more finicky.