How can I create a direct download from S3 (PDF Files)

Wappler General How To
#11

I‘m using NodeJS on the backend for uploading the documents. That would really help me a lot.

I just realised that the fallback does not work with Safari for mobile (iPhone, iPad). No Download at all. Could you please also look at this problem?

What I still don‘t understand, why I‘m not able to set CORS correctly. Does it work in your tests and could recommend the correct settings?

1 Like
#12

Could you please also check this problem @patrick? Thank you :slight_smile:

#13

Hi @patrick,
what do you think how long it would take for you to post an update?

#14

The workaround is using creating an a tag with an download attribute to do the download, seems that the download attribute also require CORS but don’t give an error, it then just opens the link in a normal way instead of downloading.

So the only way for you when you can’t get CORS working is setting the correct headers for the file. Will try to post an update for you here today for that.

1 Like
#15

btw. Do you have CDN enabled on your Spaces? If so then you need to Purge the Cache after changing the CORS settings else they don’t work it seems.

#16

No, I don’t have CDN enabled. I already looked at this post from stackoverflow on my search after a solution for my CORS problem. Did you get CORS working in your tests?

#17

Thanks a lot for looking into this. What do you think about the problem with Safari for iPhone and iPad?

#18

I don’t have an iPhone, so can’t test. But does it just like with chrome open the pdf directly or does it just do nothing?

#19

It just does nothing.

#20

Here the updated s3 library. You have to edit the action file by hand since the new options are not available in the UI. Unzip the file in lib/modules.

s3.zip (1.1 KB)

The putFile action has contentType and contentDisposition as extra options, default it will detect the contentType automatically by the file extension. Here my example:

{
    "name": "putFile",
    "module": "s3",
    "action": "putFile",
    "options": {
      "provider": "digitalOcean",
      "bucket": "wapplertest",
      "path": "/public/assets/dummy.pdf",
      "contentDisposition": "attachment",
      "key": "dummy.pdf",
      "acl": "public-read"
    },
    "outputType": "boolean"
  }

I also added a new action to the s3 module, it will allow you to download the file using the server action, this works around the CORS problem. You then use the server connect url instead of the s3 url in the download component.

Usage:

{
    "name": "downloadFile",
    "module": "s3",
    "action": "downloadFile",
    "options": {
      "provider": "digitalOcean",
      "bucket": "wapplertest",
      "key": "dummy.pdf"
    }
  }
1 Like
#21

Thank you! Do I use it like this from the client side?

#22

Yes, you can use it like that

#23

You are genius @patrick!

Thank you so much for this. That was the solution I was looking for. Now @George have to put an UI for the server action and it is ready to go. :+1:

I tested only the new download server action for the moment but will test the putFile action over the weekend.

Could you also add it for the PHP server model?

#24

I will add the options for the putFile to the PHP version also, need to check on how to implement the download action there.

1 Like
#25

I made some tests over the weekend and can confirm that it is working great. It does work with direct route download or with the download component. If I understand S3 correctly it is technically not possible to use the advantages of the download component. For example you can’t use the progress bar.

Did you find a solution for PHP (download action)?

#26

Will this make it to this weeks update? (incl. PHP?)

#27

It should make this weeks update and will include the PHP version.

1 Like
#28

This has been fixed in Wappler 3.7.5

1 Like
#29
#30

This topic was automatically closed after 44 hours. New replies are no longer allowed.