I'm receiving a file object from an MVC controller as FileContentResult:

[HttpPost]
        public IActionResult Export(RequestModel request)
        {
          // Taking file entity fromdb
            var File = _Service.GetFileById(request);
            var cd = new ContentDispositionHeaderValue("attachment")
            {
                FileNameStar = File.FileName
            };
            Response.Headers.Add(Microsoft.Net.Http.Headers.HeaderNames.ContentDisposition, cd.ToString());
            return File(File.FileContent, File.ContentType);
        }
    }

In the client side "React js" I'm enabling the user to download the document directly via saveAs (npm library)

// Ajax request
 ApiClient.post("Api/Export", { id: parseInt(id) }).then(response => {
            var octetStreamMime = 'application/octet-stream';
            var contentType = response.headers['content-type'] || octetStreamMime;
            var data = [response.data]
            var file = new Blob(data, { type: contentType });
            console.log(file)
            var FileSaver = require('file-saver');
            FileSaver.saveAs(file, fileName);
        }).catch( err => console.log(err.response.data));
    }

When I download the file as text it works as expected, however with png/jpg/jpeg files it previews the image with the following error:

My question is, is my data corrupted in this scenario? Or the byte array received from MVC controller needs reformatting?

Thank you