CODEWITHSUNDEEP
javascriptangularjsnode.jsexpress
Berend Berendsen
Berend Berendsen

Reputation: 21

blob shows up as bytestring ( angular + express )

I am trying to pull files from a back-end Node.js / Express server and then display them in a angular front-end. I have tried different approaches but keep on being stuck, the data at the front-end is displayed as a bytestring but displaying it as a Base64 string didn't help (it just displayed the Base64 String).

I think that it is caused by not setting the properties of the window properly which I use to show the file.

My Express Code:

router.get('/api/v1/getupload/:filename', function(req,res){
    res.sendFile(__dirname + '/uploads/' + req.params.filename);
});

My Angular Service code:

(the managedatafactory returns the result of the call to Express)

//get uploaded file
$scope.getUploadFile = function(file) {
    // data is link to pdf
    managedataFactory.getUploadFile(file, {responseType:'arraybuffer'}).success(function(f){
        var blob = new Blob([f]);
        var fileURL = $window.URL.createObjectURL(blob);
        $scope.content = $sce.trustAsResourceUrl(fileURL);
        var w = $window;
        w.open($scope.content);
    });
}

The HTML contains a call with ng-click with the correct filename.

This is the result of the call to the back-end (the newly opened window shows pretty much the same):

`�PNG

���
IHDR����������    �����sRGB@�}����    pHYs�������+���tEXtSoftware�Microsoft Office�5q����IDATx����T������>���J�@HB�����Bp���� etcetcetc`

The result can be either a pdf or an image, so I would have to cater for both. Any help would be very much appreciated as I have been stuck on this issue now for some time and I am starting to losing some hair over it.

Upvotes: 1

Views: 366

Answers (1)

Berend Berendsen
Berend Berendsen

Reputation: 21

In the end, I replaced the angular post with a simple get and that resolves everything.

Upvotes: 1

Related Questions