0

I made an Ajax get request to obtain a file from the API source, and was returned the json data (json data below). The filename and file type are title, and file_type respectively as per the json object returned. How do I transform this into a PNG (as per this json data example), or any other file type for that matter depending on the json data returned. When making the request, I need to be able to transform the json file into its object and download automatically.

I have tried suggestions as per the link below without success: Download JSON object as a file from browser

Thanks,

Sample JSON Data

{
  "body": "iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAeFBMVEUdHRv\/\/\/8AAAALCwfExMQbGxn6+vp\/f37Ly8urq6sUFBH19fW6uroODgsGBgCGhoV2dnbn5+fh4eFVVVT29vazs7Pa2trm5ubR0dFxcXDHx8deXl2Tk5KYmJg2NjVlZWSMjIxBQUAjIyFDQ0IzMzFMTEqioqEtLSvWSZHOAAAJcklEQVR4nO2d22LiIBCGKxGjMYmnaj1rt619\/zdcYnRNOISBkIRx\/a+6a6v5BGaGAYa33rPrresHaFwvQvx6EeLXixC\/XoT49SLErxehMw1m89Wwn2u4ms8GbX1w44TjVXyYLn6JqN\/F9BCvxk0\/QJOEs\/5+l2QsSUTfRNHo+mKw2\/dnDT5FU4Tz0SZijy9F40FT9h1sRvOGnqQJwkE\/ZHSJHq6AyZozmcZNDE7nhO\/LHet5JnRFysXS+bh0TBgzvMiC7i7W9rvY7SO5JFyF9fD+QYYrh0\/ljjD+IkFtvFwB+XTXkI4IB5fEQfM9FJH04MjsOCEc7AmxsS1VooScnVgdB4SDMyGO8XKl5OygHesTHhriy0TIoXPCOGmO78oYLDslXH06H3+8KPms5ztqEYZO7adKEZl2RNgPmu2gD6Wk3wHhYNN4B32IkpO1VbUlHAauAhiYAjJsl3DSYgPmoiRskXB8bGsEFkWOVqkAG8JhKyZUVGRlcCwID6330Lso2bdBeOqih95Fdo0TDjoZgg+l36YTDkPCWZR0CsgGY\/DRJOGqIxtTFCVmcaoR4bozG1MUNXP+JoRbLwCZjLyGAWG\/WxtTlAkinHDrD6ARIphw7RMgQwSPRSjhypcxeBfYogIJZ74BMosK9IswwkHUvR\/kRQNYdAMjPHYdycgUfbsj7DTYVisFheEQwoOfgMzanN0QDn0FhLlFPeHYOzNaENEnNvSEn\/6Z0YcA1kZLOPG3j2bSZ+B0hB4PwlxkW49wYLWrok1RosmGawg37Wa2bRSc6hB6NCVUi1Tvaqgm9L6PZtL000rCEEMTsuitcn2xinCFA1AzV6wi9NrXFxUd7QhjLE3IGrFiO0MFodH2yW5FiQ2ht3MmmSoWpZSEA0yADPHdmPCMizCdmBIia0LWiKq8lIoQWRNWNK...",
  "comments": null,
  "container": "ENC~77-977-977-977-9X--_ve-_vSfvv73vv70V77-9XO-_ve-_vT7DgO-_ve-_vX5-fn9FKQdumeQp5-W6Z1k_WPY=",
  "file_type": ".PNG",
  "is_container": false,
  "last_modified": "2020-01-09T11:37:05",
  "record_number": "00\/11",
  "record_type": "Inwards Document",
  "title": "Test",
  "unique_identifier": "13112318",
  "is_public": true,
  "site": null
}
Jaydeep
  • 1,686
  • 1
  • 16
  • 29
chigz
  • 7
  • 4
  • Cannot say much until we see the code – Vinay Jan 09 '20 at 03:41
  • Ext.Ajax.request({ url: url, success: function (response, opts) { var obj = Ext.decode(response.responseText); if (obj !== null) { var blob = new Blob([obj.body]); var fileName = `${obj.title}${obj.file_type}`; var link = document.createElement('a'); if(link.download !== undefined) { var url = URL.createObjectURL(blob); link.setAttribute('href', url); link.setAttribute('download', fileName); link.style.visibility = 'hidden'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } } }, }); – chigz Jan 09 '20 at 20:40
  • you might want to make the above pretty. The obj.body contains the bytes returned in the jSON. This is part of the initial question. – chigz Jan 09 '20 at 20:49

2 Answers2

0

using JavaScript use:

window.location.href = 'data:image/png;base64,' + body;

using HTML tag:

<a download="photo.png" href="data:image/png;base64,asdasd...">Download</a>

JSFiddle Download

Saiful Islam
  • 1
  • 2
0

dont worry - figured it out..

Although, it does not work for safari. :( 

 Ajax.request({
        url: _url,

        success: function (response, opts) {
            var obj = Ext.decode(response.responseText);
            if (obj !== null) {

                var docName = `${obj.title}${obj.file_type}`;
                var a = window.document.createElement('a');
                //debugger;

                var byteCharacters = atob(obj.body);
                var byteNumbers = new Array(byteCharacters.length);
                for (var i = 0; i < byteCharacters.length; i++) {
                    byteNumbers[i] = byteCharacters.charCodeAt(i);
                }
                var byteArray = new Uint8Array(byteNumbers);

                // now that we have the byte array, construct the blob from it
                var blob1 = new Blob([byteArray], { type: "application/octet-stream" });

                //saveAs(doc, docName);
                a.href = window.URL.createObjectURL(blob1);
                a.download = docName;

                // Append anchor to body.
                document.body.appendChild(a);
                a.click();

                //// Remove anchor from body
                document.body.removeChild(a);
            }
        },

        failure: function (response, opts) {

... } });

chigz
  • 7
  • 4