Angular js way to download file and show loading screen using the $resource

Question

I am using Angular js to show loading screen. It works for all the REST services call except REST service to download the file. I understand why it is not working because for download I am not making any service call using $resource; instead of that I am using normal approach to download the file therefore Angular js code doesn't have any control on start/finish the service request. I tried to use $resource to hit this REST service however I am getting the data from this service and in this case loading screen was working fine however not sure how to use this data to display to user to download in angular way. Following are required details. Please help.

Approach 1 using iframe approach:

 /*Download file */
            scope.downloadFile = function (fileId) {
                //Show loading screen. (Somehow it is not working)
                scope.loadingProjectFiles=true;
                var fileDownloadURL = "/api/files/" + fileId + "/download";
                downloadURL(fileDownloadURL);
              //Hide loading screen
                scope.loadingProjectFiles=false;
            };

            var $idown;  // Keep it outside of the function, so it's initialized once.
            var downloadURL = function (url) {
                if ($idown) {
                    $idown.attr('src', url);
                } else {
                    $idown = $('<iframe>', { id: 'idown', src: url }).hide().appendTo('body');
                }
            };

Approach 2 using $resource (Not sure how to display data on screen to download)

/*Download file */
            scope.downloadFile = function (fileId) {
                //Show loading screen (Here loading screen works).  
                scope.loadingProjectFiles=true;                 
                  //File download object
                    var fileDownloadObj = new DownloadFile();
                 //Make server call to create new File
                    fileDownloadObj.$get({ fileid: fileid }, function (response) {
                        //Q? How to use the response data to display on UI as download popup
                        //Hide loading screen
                        scope.loadingProjectFiles=false;
                    });

            };

Coleslaw

This is basically how I am doing it too, +1 for question. – Mercer

hey Strawberry...are you also facing any problem? Which approach you are taking first or second? – Coleslaw

In approach 1, if you remove scope.loadingProjectFiles = false, will loading screen show up? – Quattlebaum

@DilipKumar I actually misread the question. So you're trying to download a file ti display to a user correct? You said you were able to retrieve the data, but you're not seeing it in the response? Is that the issue here? – Mercer

When i removed scope.loadingProjectFiles = false then i am getting loading screen however after file download it is not going away. – Coleslaw

@Strawberry...in approach2 i am able to get the data as well loading screen works however in this approach i am not sure how to open popup to download file. In approach 1 i am not getting loading screen. – Coleslaw

@DilipKumar That is no surprise to you, isn't it? Approach 1 isn't working because you set loadingProjectFiles = false too soon! You need to find a way to delay it. Take a look at this question, it might help #1106877 – Quattlebaum

Great question. Looking for the same thing. Anyone find a solution yet? – Wagner

At least i am not :-) – Coleslaw

@Coleslaw Good question, did you find a solution to it? – Susannsusanna

not yet...i moved to other work and couldn't spend time more to explore other solution. – Coleslaw

Answer 1

This is the correct pattern with the $resource service:

scope.downloadFile = function (fileId) {
    //Show loading screen (Here loading screen works).  
    scope.loadingProjectFiles=true;                 
    var FileResource = $resource('/api/files/:idParam', {idParam:'@id'});
    //Make server call to retrieve a file
    var yourFile = FileResource.$get({ id: fileId }, function () {
        //Now (inside this callback) the response data is loaded inside the yourFile variable
        //I know it's an ugly pattern but that's what $resource is about...
        DoSomethingWithYourFile(yourFile);
        //Hide loading screen
        scope.loadingProjectFiles=false;
    });
 };

I agree with you that this is a weird pattern and is different of other APIs where the downloaded data is assigned to a parameter in a callback function, hence your confusion.

Pay attention to the names and the cases of the parameters, and look that there're two mappings involved here, one between the caller to the $resource object and the object itself, and another between this object and the url that it contructs for downloading the actual data.

Verecund

To whoever downvoted my answer... Could you explain the reason? – Verecund

Answer 2

Here are some idea's for the second approach, you could present the user with a link after the download has happened:

• With a "data url". Probably not a good idea for large files.
• With a URL like "filesystem:mydownload.zip" You'd first have to save the file with the filesystem API. You can find some inspiration on html5rocks

Fraase