Upload files directly from Public to AWS S3

Ask the community
,
1

Howdy,

I’ve been trying for some time to use the fetch api to upload a file from an upload button to AWS s3. The files I am uploading are potentially sensitive and I wanted to add more control to them.

The following code should work but I get an empty file in S3 (no content).

fetch(url, {
 method: 'put',
 headers: {
 "Content-type": "application/pdf"
 },
 body: file
})
.then(function (data) {
 console.log('Request succeeded with JSON response', data);
})
.catch(function (error) {
 console.log('Request failed', error);
})

The file object is resolved by $w(“#fileButton”).value[0]
The Url is an s3 presigned url.

The request headers look ok except for the content length. Setting it has not affect and it always gets request with content length of zero.

I’m out of ideas. Does anyone have a suggestion?
Thanks!
Jason

2

Hey Jason,

Welcome to the Wix Code forums. Glad to have you aboard!

When you run the file upload (fetch), what do you get in the console output?

Yisrael

3

Also, what’s the URL?

Let’s make sure that all the pieces are complete and valid. That should get us closer to solving the problem.

4

Thanks for your help, Yisrael.

The success function gets called and I can see ‘Request succeeded with JSON response’ in the console.

The URL is a presigned aws s3 url. It allows specific operations to specific buckets. In this case, it allows a PUT Object request. I have node app that I’m porting to wix that uses the same js to perform the get signed url request and then the http put request so I’m confident it works. The only difference is that my node app uses @angular/http and wix uses fetch-api.
I do get a file created in s3 but it is just an empty file (zero bytes)

I did see in the ‘Accessing 3rd Party Services’ documentation that node-http/s and net modules are available but I haven’t had any luck with importing them.
This is a quote from the docs
" Advanced: Modules available for calling services
In the following examples we use the wix-fetch module to call a service, but the Node.js http , https , and net modules are also available."

Thanks!
Jason

5

Hey Jason,

Unfortunately, I’m not really familiar with the AWS S3 API.

One of my colleagues also suggested that you could perhaps use a $w.HtmlComponent .

Using server-side (backend) code, as described in the Accessing 3rd Party Services article can also be used for REST queries without the complications of importing modules. An important advantage of using server-side code is that it provides an added layer of security by hiding personal codes and API keys. Take a look at the example in that article. You can also see a more robust example in the forum post How to Use Google Maps Services in Wix Code .

BTW - If you want, you can post your URL here so we can take a look at it. (Don’t worry, it can only be accessed by Wix).

Keep us posted on your progress and if we can help in some way.

Yisrael

6

Calling REST API works fine, but I am not able to send file object. Anyone tried sending file to multi-part request using wix-fetch?

7

Hi Emmanuel,
Can you please post a new thread with your question?

Thanks,
Tal.

8

For anyone searching how to manage direct S3 uploads:

We do this with the S3 client side SDK in an iframe. The upload button is in the iframe. You could do this with a custom element as well, but of course that means you’ll need the premium plan attached to the site first, and it takes a bit longer to code out.

The multi-part form Emmanuel mentioned is built into the fetch call.

Call process:
Selector change → details passed to page → page passes to backend → backend presigns request, passes back to page → page passes to iframe → iframe calls scripts below → AWS returns upload res to iframe

This successfully bypasses all of WIX’s backend timeouts and size restrictions.

We’ve used this successfully with multi gb files of all types. No need to manage the multi-part on your own unless you require massive file sizes and have to switch to a different AWS protocol.

This is called in the iframe. We have to remember in these scenarios that Wix-Fetch is WIX’s limited version of fetch compared to options such as node-fetch or standard client side fetch. In the iframe this works as expected. Note no headers in the below for type, and the cors option to manage origin headers for you.

await fetch(dataIn.url, { mode: 'cors', method: 'PUT', body: fileIn });

This post needs to stay open. It has quite a few views, and the details behind it will change as AWS or WIX updates SDKs. We shoot ourselves in the foot every time these are closed off. This is very much a live subject.

9

Thanks for this post - would have been better as new post with a comment in this thread pointing to the new post. New posts get better traction and more attention.

Regarding your point regarding “Wix-Fetch is WIX’s limited version of fetch”… This may be true about the front end wix-fetch API, however backend code is node.js and the backend version of wix-fetch is the appropriate node.js library.

One caveat concerning your method is that by using an iFrame (HtmlComponent), sensitive information is exposed to site visitors since frontend code and its actions can be viewed by site visitors.

10

@yisrael-wix I disagree with all three of your statements :yum:

This doesn’t need a new post. This post has 1.9k views as of today. The status quo in this forum is to lock posts, not remove them. This places posts that are already indexed and searchable on google into a state missing both context and any future edits that keep them up to date with current APIs.

NODEjs doesn’t have fetch out of the box. It has Http(s) functions. Node-fetch is an externally supported module that when installed server side extends back end functionality to allow additional functions not available in Wix-fetch.

No sensitive information is exposed. This is the method as designed and documented by Amazon, with a slight modification to pass a signed url from page to iFrame. You can find more information on it here: Generate a presigned URL in modular AWS SDK for JavaScript | AWS Developer Tools Blog

11

#1 - Old threads that are no longer relevant (deprecated APIs, obsolete code, etc) are often locked. Active threads are left alone, but in fact it’s often according to the discretions of the moderators - a diverse group. For what it’s worth, I’m passing your original comment to the team so that the issue of old and active threads will be considered. Keep in mind that the last comment on this thread was over 3 years ago. For visibility, your original comment deserves its own post - possibly even in the Tips, Tutorials, Examples category.

#2 - I never said that node.js has fetch out of the box. Just pointing out that the Wix backend isn’t a “limited version”. However, the front end fetch is more or less a Wix thing.

#3 - That’s fine - as long as the content that is downloaded isn’t sensitive. I guess it depends on the use case.