javascript - Returning a zip file to angularjs for download - Stack Overflow

I have the following angularjs code:

$scope.search = function() {
    creatorService.search($scope.model).then(function(data) {
        saveAs(new Blob([data], { type: "application/octet-stream'" }), 'testfile.zip');
    });
};

(which also uses fileSaver.js)

And then the following method on my webapi2 side:

public HttpResponseMessage Post(Object parameters)
    {
        var streamContent = new PushStreamContent((outputStream, httpContext, transportContent) =>
           {
               try
               {
                   using (var zip = new ZipFile())
                   {
                       zip.AddEntry("test.txt", "test data");
                       zip.Save(outputStream);
                   }
               }
               finally
               {
                   outputStream.Close();
               }
           });
        streamContent.Headers.ContentType = new MediaTypeHeaderValue("application/zip");
        streamContent.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
        {
            FileName = "test.zip"
        };

        var response = new HttpResponseMessage(HttpStatusCode.OK)
        {
            Content = streamContent
        };

        return response;
    }

I got a lot of this from this post, and it uses ZipFile.

Everything seems to be working just perfect, except that when I download the zip file, I can't open it- it is invalid. It has the right size, and appears to have the right content, but I just can't open it.

I can verify that the angularjs code is hitting Post() correctly, parameters are being passed (if I have them) and that the Post() is executing and returning without error. The return content is then properly processed by the fileSaver stuff, and I can save the resulting zip file.

Am I not doing this the right way, or am I doing something wrong?

I have the following angularjs code:

$scope.search = function() {
    creatorService.search($scope.model).then(function(data) {
        saveAs(new Blob([data], { type: "application/octet-stream'" }), 'testfile.zip');
    });
};

(which also uses fileSaver.js)

And then the following method on my webapi2 side:

public HttpResponseMessage Post(Object parameters)
    {
        var streamContent = new PushStreamContent((outputStream, httpContext, transportContent) =>
           {
               try
               {
                   using (var zip = new ZipFile())
                   {
                       zip.AddEntry("test.txt", "test data");
                       zip.Save(outputStream);
                   }
               }
               finally
               {
                   outputStream.Close();
               }
           });
        streamContent.Headers.ContentType = new MediaTypeHeaderValue("application/zip");
        streamContent.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
        {
            FileName = "test.zip"
        };

        var response = new HttpResponseMessage(HttpStatusCode.OK)
        {
            Content = streamContent
        };

        return response;
    }

I got a lot of this from this post, and it uses ZipFile.

Everything seems to be working just perfect, except that when I download the zip file, I can't open it- it is invalid. It has the right size, and appears to have the right content, but I just can't open it.

I can verify that the angularjs code is hitting Post() correctly, parameters are being passed (if I have them) and that the Post() is executing and returning without error. The return content is then properly processed by the fileSaver stuff, and I can save the resulting zip file.

Am I not doing this the right way, or am I doing something wrong?

• javascript
• angularjs
• asp-web-api2
• zip

Share Improve this question Follow edited May 23, 2017 at 12:17 CommunityBot 111 silver badge asked Jun 6, 2014 at 20:46 NicrosNicros 5,2031212 gold badges6161 silver badges102102 bronze badges 4

• You might need to clear the headers at the start. It's something like: streamContent.Headers.Clear(); – Thomas Taylor Commented Jun 6, 2014 at 21:00
• Nope :( tried that no luck. – Nicros Commented Jun 6, 2014 at 21:19
• 1 If you call directly (without using any javascript code) your service, do you get a valid zip file ? I suspect the ajax call to corrupt your file. What is the type of data in your js code ? If this is a string, your browser is maybe applying an utf8 conversion (corrupting your file). In that case, you can ask for an ArrayBuffer when doing your ajax request (xhr.responseType = "arraybuffer";). – David Duponchel Commented Jun 7, 2014 at 19:07
• @DavidDuponchel This was the solution David- can you put it in as an answer? Thanks! – Nicros Commented Jun 9, 2014 at 18:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I'm reposting my ment (because it was the solution) :

If you call directly (without using any javascript code) your service, do you get a valid zip file ? I suspect the ajax call to corrupt your file. What is the type of data in your js code ?

If this is a string, your browser is maybe applying an utf8 conversion (corrupting your file). In that case, you can ask for an ArrayBuffer when doing your ajax request wih xhr.responseType = "arraybuffer";