How to upload an image and get it's url to an input field?

[liam_rob]

Any luck?

When I use pickfiles in the flow logic, instead of pick images from library, and bind them individually with these two formulas:

{storage: outputs[“Get bucket upload URLs”].files.storageKey}
{downloadUrl: outputs[“Get bucket upload URLs”].files.uploadUrl}

its posts without any data as seen here:

The bottom one is manually through the data configurator (data retained). The top one is through the app (datamissing).

Should you open a ticket? I feel like this is an internal error. Because #1: It works manually through the appgyver data configurator. #2: It is posting in the database using pickfiles (although data is missing) #3. It is not posting at all using pick images (with same logic). #4. Not only does it work through the configurator, but it works in postman and swagger. It has to be an appgyver issue, not a backendless one.

Thank you.

[liam_rob]

here is another view.

this database entry was posted using appgyver data configurator.! Everything seems normal.

this database entry is a view of what happens when we use the app logic as outlined above.

[Mevi]

Hi!

So sorry, I had a busy Friday and couldn’t get to this after all But I had a look now, and adjusted the logic behind the upload photo button. It looks alright to me now, can you check on your end if everything comes through correctly?

[liam_rob]

I did see your post in the database, and I was able to duplicate that post using your formula and the pick files function, but I was not able to to duplicate it with the pick images from library function. I’m curious if you posted using the appgyver app, or if you used postman?

I simply copied and pasted your formula into create record

{storageKey: {storage: outputs["Get bucket upload URLs"].files[0].storageKey, downloadUrl: outputs["Get bucket upload URLs"].files[0].uploadUrl}}

using pick files instead of pick images from library, and that is posting through the appgyver app. But for some reason, the app doesn’t like the pick images from library function.

So for now, I will just proceed with pick files.
Thank you.

[Mevi]

Hi! If you switch between pick images from library and pick files flow function, you have to open all the formulas and other bindings to change to the right output to access. But if the current arrangement works for you, that’s all that’s necessary

[friendly424234]

So for now i re-read this full thred. And i also tried to build the image upload component. But nothing worked for me. So i know that until this, everything works.

But now i have to also add the create record part.
But everything there is incompatible.

And if i try to set it to formula outputs["Get bucket upload URLs"].files.storageKey it doesn’t work, too.

if you look into the object with properties part it says that i need an id and an storagKey. But both are not given or able to receive.

This is how the database looks:

What do i need to do? I hope there is everything on the pictures to understand my problem and to help me to solve it.
For now i only want to be able to upload an image with pick files temporarely to my app page and then if i click on save button it should be uploaded to the database for using it later in my Quizzes. (I know the link is only 15mins available)

[Mevi]

Hi! The problem looks to me that you need to pick which file from the list of files you want to get the storageKey from. Probably the first one, so it would be like

outputs["Get bucket upload URLs"].files[0].storageKey

[friendly424234]

I set a few alerts at my outputs and there is an error at upload files.

But also with outputs["Get bucket upload URLs"].files[0].storageKey i get an error message in formula editor.

If you want to look into my app: ID: 176948 - The “Fragen erstellen” Page, the first upload button. The others have no logic at this time.

[Mevi]

Hi! If there’s an error already at Upload files, then the Create record is not the issue, at least yet. “Unknown type cannot be assigned to object type” doesn’t sound fatal, although it’s a little odd you’re getting it (once the Upload files problem is solved, you could try doing LOOKUP(PICK_ITEM(outputs["Get bucket upload URLs"],0),"storageKey") and see if that fixes it)… What’s the error you get at upload files?

[friendly424234]

I set tried to set the Http method of Upload files to POST and it solved the error.

Then i tried to set your formula to create record, but it only occured more issues.

[Mevi]

Yes, so, here in create record you must be creating an Object with the properties that the record requires (you can see those on the data tab, for example). Here you are getting the storageKey, but that is a text. So you need something more like {storage_key: LOOKUP(PICK_ITEM(...),"storageKey"), ...} with all the rest of the required properties as well.

[Rubem_Andrade]

@liam_rob

uploadUrl

I receive this message error… Some idea?

[Rubem_Andrade]

@friendly424234

storageKey

Using the outputs[“Get bucket upload URLs”].files[0].UploadUrl, I just have this strange link… dont have the link to upload the archive to server… how I can create the link do upload the file to server?

[Rubem_Andrade]

this is formule to send the local link to get url upload… but the upload link return the strange link… dont appear the url with the name of archive to upload… one suggestion ? please?

[Rubem_Andrade]

how I can change this link? please?

[Mevi]

Hi! This is probably related to this issue, no solution at the moment

[Markus_Fischer1]

Hey!

Does the logic block “Get bucket upload URLs” still exist?

Kind regards
Markus

[Dimos_Vamvourellis]

I dont know, but what are you trying to do, maybe we can help?

[Markus_Fischer1]

I want to upload an image taken on the phone to a server

[Markus_Fischer1]

I found a way. I used to logic block “Convert file to base64” to convert my device image into base64 and in addition a JS Block with the following code to create a blob object:

var postRequest = new XMLHttpRequest();

//Add Header Details and Request Method here

const byteCharacters = atob(inputs.Base64URL);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], {type: 'image/jpeg'});

postRequest.send(blob);