Image Upload to AWS S3

Hi everyone!
I’m trying to upload a photo to my own AWS S3 bucket, but I can’t figure out how I should do it.
Reading through the documentation and the forum posts, I’ve found it seem possible to use the “upload files” flow function, but I couldn’t understand how to generate a proper upload URL.
In particular, I can generate an S3 URL which I should use in a POST call like this:

http_response = requests.post(

AWS_S3_UPLOAD_URL,

data= {

key: "file_name.jpg",

AWSAccessKeyId: "string",

policy: "string",

signature: "string"

},

file:

)

I’ve noticed that the “Upload Files” flow functions works together with the “Get bucket upload URLs” flow function, which gives as an output a URL in this format:

<AWS_S3_URL>/<File_name>?AWSAccessKeyId=“string”&Content-type=“string”&Expires=“string”&Signature=“string”

So my question is: is it possible to arrange the S3 URL I can generate in the same format as the “Get bucket upload URLs” function does, and then use it with the “Upload files”? Or I should follow a different method?

Anyone can help me?

We are using presigned upload URL’s https://docs.aws.amazon.com/AmazonS3/latest/dev/PresignedUrlUploadObject.html
Maybe that helps you figure out how to work with your own bucket?

You really don’t want to store any AWS secret keys etc inside your app bundle if you’re going to distribute it in public.

Hi, I’ve followed your suggestion and made an https request to get a presigned upload URL for my S3 bucket, to use in a PUT request . I’ve tested the upload url outside of the application and it seems to work fine.
Unfortunately, it doesn’t work when I make the PUT request from the “Upload files” flow function, which gives me the error message “Unexpected status 403”, of which I can’t figure out the cause.
Does the flow function enforce particular requirements on the upload URL in order to work?

Hi @Sasu_Makinen,
to better explain my problem, I’m also sending you a screenshot of what I can see from the debugger:

I’d like to know if you can spot an error in how I use the flow function, because I’m stucked.
Unfortunately, it’s difficult for me tto understand what is going on, since in the debugger the flow function has apparently 0 outputs, and the only thing I can get from it is the error message “Unexpected status 403” by printing it in the front-end of the app.
image

Thank you in advance!

You could probably get more relevant information regarding this through your browser’s network console. Also I’d double check that that filepath is correct.

Hi, can you please explain me how can I see more debugging details through my browser network? Where should I use the inspector? If I look at it in the debudder page I can’t see anything interesting.
Regarding the local filepath, it should work, since I can use it as an input for an image component. I obtain it after using the “move/rename file/directory” flow function and pointing to “systemVars.fileSystem.directories.android.downloads” as target directory path.

Hi there,
any news on this?

I’ve tried to debig the app installed on my mobile phone using Android Studio, and, from what I could have seen from the logs, it seems that the API call to the S3 bucket upload url is not sent.
I suspect there’s something wrong happening inside the “upload files” flow function, which unfortunately I don’t know how to investigate.
Can anybody help me?

Is there nothing coming out of the upload files outputs? If you alert on failure and success?
Is there any errors on the browser console? These should be working at least with the latest updates (check that you are using the latest version of upload files, you can update at the marketplace).

Hi,
I’ve tried to bind the output of the function “Upload Files” to a page variable.
The flow never goes into the success output, and from the error output I get:

outputs[“Upload files”].error:
{
“line”: 66,
“column”: 20
}
outputs[“Upload files”].error.message:
“Error: unexpected status 403”

Does it help you spot the problem?
Thank you,
Marco

Status 403 is HTTP code for “forbidden”. It means that whichever resource or url you’re trying to use you are not authorized to use.

Hi,
As I said I’ve already tried to upload a file manually and it worked, so I can’t understand why I have problems using the “upload file” flow function.

What I would like to know is how the flow function “upload files” builds the API call, so that I can see if I do something wrong.
Again, this is what I can see from the debugger, and unfortunately it doesn’t help much.

I need to solve this issue somehow, so if there’s some more information I can give to you in order to better understand the problem, please just ask.

It’s using fetch API with the given HTTP method and as content-type header it’s using file’s mimetype and uploading the file as a blob in the HTTP body. I’d still take a look at the browsers inspector network tab https://developers.google.com/web/tools/chrome-devtools/network.

Are you sure the upload url is still valid when you’re uploading? If the signed upload url is too old it will give 403.

1 Like

Also if you suspect that the Upload files is not working in your case you can always create your own javascript box to handle this.

@Sasu_Makinen Is there any update on this? Does Upload files work with S3 and pre-signed Url’s ?
I’m having problems as well.

Hi,
In the AWS S3 console, pick the can where you need to transfer an article, pick Upload, and afterward pick Add Files. In the record choice exchange box, discover the document that you need to transfer, pick it, pick Open, and afterward pick Start Upload. You can watch the advancement of the transfer in the Transfer sheet.

Hi,

In the AWS S3 console, pick the can where you need to transfer an article, pick Upload, and afterward pick Add Files. In the record choice exchange box, discover the document that you need to transfer, pick it, pick Open, and afterward pick Start Upload. You can watch the advancement of the transfer in the Transfer sheet.