Save a file with a url

Ionic Framework
1

Super simple question but I’m getting all muddled up. i’m using Ionic 4. CLI 4.5.

Option 1:
I have created a presigned URL in AWS and returned it to my app using http. Now, with this URL, how can I save the file itself to my downloads folder on my PC. I’m talking about running the app in the browser from aws s3. It’s a big nasty data payload, so of zero use on mobile.

Right now I am very very confused at all the contradictory information I’m dredging through… From the documentation File Transfer, cordova file transfer supports the browser, but I’m not sure it does. Several people on forums have said it does not, and when I tried it, it didn’t work (although I’ll stop short of citing that as proof of anything, considering my average success rate with such things)…

Option 2:
Can I present the url as a clickable object on the page that will allow the user to, well… click it. Is there a way I could set the content type of the stored file to initiate a download. The way you download everything else from the internet - you know. It appears in your downloads folder in Windows.

Can anyone share a known approach that will work. It seems like it must be possible, after all it’s a fairly fundamental aspect of interacting with the browser…

Option 3:
If that really isn’t possible. How about allowing me to neatly grab the URL to the clipboard, such that I can paste it into a normal browser and go from there. I don’t care how I get there. I just want to get my file without asking my users to do anything counterintuitive or requiring anything more than average PC literacy.

Thanks all.

2

I am a bit confused here. The file is big enough, so you want it downloaded to the PC and not mobile(okay). So, how did app come into the picture?

3

vivek-23. Serving up the app and running it through a browser. On your PC. No mobile phones in sight.

4

Ok, so you mean the ionic serve we usually do during development. Well, native plugins will work in an emulator or an actual device. You can’t achieve file download through native plugins on a browser. It will probably throw a cordova_not_available error.

5

@vivek-23 No. I do not mean ionic serve. I mean running $ionic build -prod and putting the resulting build on a server. And accessing it through a browser. We are clearly at cross purposes so let’s wrap this up.

6

I might as well post my solution for anyone who finds this thread. I wouldn’t bother reading the remainder of the thread though. As mentioned, really only interested in browser, as downloading a massive csv file onto a mobile would be pretty daft. Here are the steps:

  1. Make sure you set the following on the S3 file when you create it in the back end:
ContentType: 'text/csv',   // associates with excel.
ContentDisposition: 'attachment; filename = "sensornode_report.csv" ',

This ensures that when you request the resource, it knows it’s purpose in life is not to fill your browser with a giant string of csv garbage, but to neatly download a file with the specified name into your downloads folder.

  1. Use an invisible iframe in your html. I know. I know. It’s not the done thing. But it does the job. Then just stick in something like into your ts:

<iframe style="display: none;" name='hiddenIframe' id='hiddenIframe'>You can't see me!</iframe>

 downloadFile() {
    var elem = document.createElement('a');
    elem.href = this.reportUrl;
    elem.target = 'hiddenIframe';
    elem.click();
  }
  1. In my case, I actually initiate the process with a put request to generate the report. When I get a successful request response, including the generated presigned url, I can then run the above code. And Bob’s your uncle. You’re done.