CODEWITHSUNDEEP
angularjsdownload
Mark
Mark

Reputation: 4970

Download a file in Angular Environment

I need to download a file from the server. The file is stored in the database. I have a cs controller that serves a file back to UI. The server GET call looks like this:

http://server/api/controllername/fileid/data

It does work when I run that link in the Browser - the file comes down and goes into the download area (Chrome). But when I send the same command from my Angualar code I dont see any file. The console reports that my request was successful (code 200), but I just dont see anything. Please let me know what code fragments to post to make it easier to help.

Thanks

Upvotes: 0

Views: 209

Answers (3)

bower
bower

Reputation: 166

The file probably downloads correctly as a byte[] to the calling it but that would be useless to the user - as was my problem.

In my case I needed to download a file with a complex set of parameters. This example JavaScript uses a post request and creates a form (and posts it) with any JavaScript object that you give it. This code may help if you simplified it:

private open(verb, url, data, target)
    {
        var form = document.createElement("form");
        form.action = url;
        form.method = verb;
        form.target = target || "_self";
        if (data) {
            this.createFormParameters(form, "", data);
        }

        form.style.display = 'none';
        document.body.appendChild(form);
        form.submit();
    }


    private createFormParameters(form, key, value) {
        // recursive algorithm to add parameters (including objects and arrays of objects) to a custom form

        if (typeof value === "object") {
            for (var item in value) {

                if (Array.isArray(value[item])) {
                    for (var arrayItem in value[item]) {
                        this.createFormParameters(form, (item + "[" + arrayItem + "]."), value[item][arrayItem]);
                    }
                    continue;
                }

                var input = document.createElement("textarea");
                input.name = key + item;
                input.value = value[item];
                form.appendChild(input);
            }
        }
        else
        {
            var input = document.createElement("textarea");
            input.name = key;
            input.value = value;
            form.appendChild(input);
        }
    }

Upvotes: 1

Nagy Nick
Nagy Nick

Reputation: 755

Create a link to the resource, and don't handle it with ajax.

If you make the link open in a new tab, the tab will automatically close after it realises it was just opened to download a file in most modern browsers.

Upvotes: 1

Javier Conde
Javier Conde

Reputation: 2593

Try this code:

var a = document.createElement('a');
a.href = "http://server/api/controllername/fileid/data";
a.click();

You can compose the address concatenating variables and text.

Upvotes: 1

Related Questions