Send a zipped post request from angularjs using $http

Question

I'm using $http on angularjs, and I have a fairly big request to send.

I'm wondering if there a way to do something like this:

content = "I'm a very long content string!"
$http.post content, url, 'gzip'

and have the post request content auto-gzipped and add an appropriate request header, so the server will know to unzip the content and pass it correctly to the controller

I can gzip the content on my side, and re-open it manually on the server, but I thought there should be some way to do it automatically. Is there?

Would this work for your purposes? http://onehungrymind.com/zip-parsing-jszip-angular/ Here is jszip: https://stuk.github.io/jszip/ — Boris, Jun 28 '15 at 07:26
It's a cool package, but it's about opening a zip on the client, and I want my text to be zipped on the post request to the server — Yossale, Jun 28 '15 at 07:29
Ok that makes sense; perhaps js-deflate might work: https://github.com/dankogai/js-deflate It seems others are interested in this as well but the client-server communication does not make it easy: https://stackoverflow.com/questions/424917/why-cant-browser-send-gzip-request — Boris, Jun 28 '15 at 07:36
did you ever solve this issue as I'm in a similar situation? — Rich, Dec 10 '15 at 12:39
have a look at the following answer which goes into great detail on this topic: [http://stackoverflow.com/a/34252371/6462840](http://stackoverflow.com/a/34252371/6462840) — lcs.bdr, Aug 09 '16 at 12:02

score 0 · Answer 1 · answered Jan 09 '17 at 17:25

See this post, like that you could give a parameter on the model so the server can decide if the content is a file and if the file should be unziped first

function Ctrl($scope, $http) {

    //a simple model to bind to and send to the server
    $scope.model = {
        gzip: true,
        file: true
    };

    //an array of files selected
    $scope.files = [];

    //listen for the file selected event
    $scope.$on("fileSelected", function (event, args) {
        $scope.$apply(function () {            
            //add the file object to the scope's files collection
            $scope.files.push(args.file);
        });
    });

    //the save method
    $scope.save = function() {
        $http({
            method: 'POST',
            url: "/Api/PostStuff",
            //IMPORTANT!!! You might think this should be set to 'multipart/form-data' 
            // but this is not true because when we are sending up files the request 
            // needs to include a 'boundary' parameter which identifies the boundary 
            // name between parts in this multi-part request and setting the Content-type 
            // manually will not set this boundary parameter. For whatever reason, 
            // setting the Content-type to 'false' will force the request to automatically
            // populate the headers properly including the boundary parameter.
            headers: { 'Content-Type': false },
            //This method will allow us to change how the data is sent up to the server
            // for which we'll need to encapsulate the model data in 'FormData'
            transformRequest: function (data) {
                var formData = new FormData();
                //need to convert our json object to a string version of json otherwise
                // the browser will do a 'toString()' on the object which will result 
                // in the value '[Object object]' on the server.
                formData.append("model", angular.toJson(data.model));
                //now add all of the assigned files
                for (var i = 0; i < data.files; i++) {
                    //add each file to the form data and iteratively name them
                    formData.append("file" + i, data.files[i]);
                }
                return formData;
            },
            //Create an object that contains the model and files which will be transformed
            // in the above transformRequest method
            data: { model: $scope.model, files: $scope.files }
        }).
        success(function (data, status, headers, config) {
            alert("success!");
        }).
        error(function (data, status, headers, config) {
            alert("failed!");
        });
    };
};

Send a zipped post request from angularjs using $http

1 Answers1