axios POST using blob as responseType

Question

So I am trying to download a file via axios and blob. The problem is I need to pass a password, and for that reason I can't use a "GET" request. For test purposes I still made a "GET" request to get me started. Since the project comes to an end I wanted to finally fix that issue but I can't find a solution.

That is my working code with a "GET" request to give you an idea.

                    axios({
                        url: `/api/download/?uuid=${uuid}&password=${password}`,
                        method: "GET",
                        responseType: "blob",
                    })
                    .then((response) => {

                        var fileURL = window.URL.createObjectURL(
                            new Blob([response.data])
                        );
                        var fileLink = document.createElement("a");

                        fileLink.href = fileURL;
                        fileLink.setAttribute("download", filename);
                        document.body.appendChild(fileLink);

                        fileLink.click();
                        self.showLottie = false;
                    })
                    
                    .catch(function (error) {

                        self.showLottie = false;

                        alert("Download failed");

                    });

can you provide us the backend function? – Henrique Van Klaveren Jul 06 '21 at 17:20 — Henrique Van Klaveren, Jul 06 '21 at 17:20
@HenriqueVanKlaveren here you go – thomalex Jul 07 '21 at 07:29 — thomalex, Jul 07 '21 at 07:29

score 2 · Accepted Answer · answered Jul 08 '21 at 09:31

Ok, so basically all I had to do was putting the uuid and password in a params object.

  axios({
                        url: `/api/download`,
                        method: "GET",
                        responseType: "blob",
                        params: {
                                uuid,
                                password,
                                },
                    })
                    .then((response) => {

                        var fileURL = window.URL.createObjectURL(
                            new Blob([response.data])
                        );
                        var fileLink = document.createElement("a");

                        fileLink.href = fileURL;
                        fileLink.setAttribute("download", filename);
                        document.body.appendChild(fileLink);

                        fileLink.click();
                        self.showLottie = false;
                    })
                    
                    .catch(function () {

                        self.showLottie = false;

                        alert("Download failed");

                    });

Explanation: Are HTTPS URLs encrypted?

axios POST using blob as responseType

1 Answers1