How to download file from bytes by using web api and angular

Question

I have used below code to download file. I have successfully assigned bytearray in web api.

    byte[] bytes = llResponse.FileContent;
    response.Content = new ByteArrayContent(bytes)

But finally i am getting below response my browser console

SyntaxError: Unexpected token � in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:36098:51) at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:9462:31) at Object.onInvokeTask (http://localhost:4200/vendor.js:99246:33) at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:9461:60) at Zone.runTask (http://localhost:4200/polyfills.js:9239:47) at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:9536:34) at invokeTask (http://localhost:4200/polyfills.js:10674:14) at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:10711:21)
message: "Unexpected token � in JSON at position 0

Complete code i have used is as below

angular

 this.appService.DownloadFile(this.filter).subscribe((data) => {  
                
                
                importedSaveAs(data, this.filter.FileName)  

            })



public DownloadFile(obj:liveLinkFilter): Observable<any> {
        var url = this.baseApiUrl + 'RadioLink/DownloadFile';
        var reqHeader = new HttpHeaders({ 'Content-Type': 'application/json' });
        return this.httpService.post(url, obj, { headers: reqHeader, withCredentials: true });
    }

Web Api code

[HttpPost]
        [Route("DownloadFile")]
        public HttpResponseMessage DownloadFile(LiveLinkDocumentBO obj)
        {
            HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
            LLAccessResponse llResponse;

            //GetFileType(lvlnkBo.FileName);
            LLService llservice = new LLService();
            
            llResponse = llservice.FetchDocument(Convert.ToInt32(obj.FileId), obj.LLUserName, obj.FileName);
            //Read the File into a Byte Array.  
            byte[] bytes = llResponse.FileContent;
            response.Content = new ByteArrayContent(bytes);
            //Set the Response Content Length.  
            response.Content.Headers.ContentLength = bytes.LongLength;
            //Set the Content Disposition Header Value and FileName.  
            response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
            response.Content.Headers.ContentDisposition.FileName = obj.FileName;
            //Set the File Content Type.  
            response.Content.Headers.ContentType = new MediaTypeHeaderValue(MimeMapping.GetMimeMapping(obj.FileName));
            return response;
        }

JosephDaSilva · Accepted Answer · 2021-06-21 18:44:09Z

3

Angular's HttpClient assumes that the respose is JSON by default. If the response from your API is a text string, set the responseType property of the HTTP request options (the third argument to httpService.post) to "text". If the response is binary data, set the response type to "arraybuffer" or "blob".

answered Jun 21, 2021 at 18:44

JosephDaSilva

1,2078 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to download file from bytes by using web api and angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related