0

Can't download and rename a jpg image.Instead it downloads a corrupted jpg file, that if you change the extension to ".txt" you can see the path of the image in there.

The original code that I had working was the following:

function downloadImg(id){
    var deferred = $q.defer();
    $http({
        method: 'GET',
        url: API_URL + 'image/' + id
    }).then(function(res){
        console.log(res.data);
        if(res.data && res.data.length > 0){
            window.location.href = res.data;
        }
        deferred.resolve();
        }, function(err){
            console.log(err);
            deferred.reject();
        })
    return deferred.promise;
    }

So, I just want to rename the image before or after download it. I end up with this code, that the only thing that is doing is setting the image path into a file or in this case [object Object] in the file(depending on the code I'm using I endup with object... or the image path...).

function downloadImg(id){
    var deferred = $q.defer();
    $http({
        method: 'GET',
        url: API_URL + 'image/' + id,
        responseType: 'blob'
    }).then(function(res){
        console.log(res.data);
        var file = new Blob([res], {type: 'image/jpeg;charset=UTF-8'});
        var fileURL = URL.createObjectURL(file);
        var a = document.createElement("a");
        a.href = fileURL;
        a.download = "newName.jpg";
        a.click();

        deferred.resolve();
    }, function(err){
        console.log(err);
        deferred.reject();
        })
    return deferred.promise;
    }

Also I tried setting responseType:'arraybuffer'and blob as well as tried to using FileSaver.saveAsand tried to create a blob from base64 found at : http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript

My image url is something like (I replace some things with "personalName" because I can't share the image): https://personalName.personalName.com/component/get?id=cbd6a354-1700-11e8-b451-0a540af4044a&username=personalName&apiKey=a393ceba-1350-11e6-9382-f23c91df2143

I expected to have the original jpg image, but with the new name.

Thanks.

ktmlleska
  • 9
  • 7
  • You seems to do the right things so my only suggestion is maybe a working codepen/jsfiddle would help to investigate further. – elpddev Jun 06 '19 at 17:41
  • Avoid the [deferred anti-pattern](https://stackoverflow.com/questions/30750207/is-this-a-deferred-antipattern). – georgeawg Jun 06 '19 at 17:48
  • Sorry @georgeawg but the link that you set as duplicated, doesn't fix my problem. (At least I can't fix it with that.) Could you give me little more information? I already tried to set the `response type: blob`... – ktmlleska Jun 07 '19 at 09:33
  • Maybe it is because I don't have the part that he named as "service method" that starts with the code ```@GetMapping("/downloadFile") @Timed public ResponseEntity downloadFile```` on the first message. Because it looks like there he is encoding the image... But I don't even have the `FileInputStream` module, because it is from java. – ktmlleska Jun 07 '19 at 09:50
  • When downloading binary files, it is important to set the `responseType`. If the responseType is omitted the XHR API defaults to converting UTF-8 encoded text to DOMString (UTF-16) which will corrupt PDF, image, and other binary files. – georgeawg Jun 07 '19 at 11:04
  • Hi @georgeawg, Thanks, But I'm already trying it with the `responseType` as `blob`, but isn't working anyway. I'm editing the original message to add the response type there, but please reopen the question or help me find a solution, as I think it is not the same problem so it is not duplicated, it is still not working. Thanks. – ktmlleska Jun 07 '19 at 15:36
  • I think I should modify the headers, but don't know how and which headers? – ktmlleska Jun 07 '19 at 18:20

0 Answers0