I have written ajax code to set request headers in url and convert that to a blob and pass to a function showFile (blob); The blob is then processed and downloaded in pdf format
The blob value obtained in the code is coming as undefined. Can someone please help me to resolve the issue`
var resolved = function (url) {
var showFile = function (blob) {
var newBlob = new Blob([blob], {type:"application/pdf"})
const data = window.URL.createObjectURL(newBlob);
var link = document.createElement('a');
link.href = data;
link.download = options.name;
link.click();
setTimeout(function () {
window.URL.revokeObjectURL(data);
}, 100)
}
var jwtToken = localStorage.getItem("jwtToken");
var headerObj = {"Authorization": "Bearer " + jwtToken}
var xhr = new XMLHttpRequest();
$.ajax({
dataType:'blob',
type:'GET',
url:url
}).done(function(blob){
showFile(blob);
});
};
If you need a blob response from jQuery ajax, set the responseType field of xhrFields to blob.
Since the response will be a blob you don't have to create one.
Also, did you forget to add your auth header to the request?
var resolved = function (url) {
var showFile = function (blob) {
const data = window.URL.createObjectURL(blob);
var link = document.createElement('a');
link.href = data;
link.download = options.name;
link.click();
setTimeout(function () {
window.URL.revokeObjectURL(data);
}, 100)
}
var jwtToken = localStorage.getItem("jwtToken");
var headerObj = {"Authorization": "Bearer " + jwtToken}
var xhr = new XMLHttpRequest();
$.ajax({
xhrFields: {
responseType: 'blob'
}
headers: headerObj,
type:'GET',
url:url
}).done(function(blob){
showFile(blob);
});
};
Related
I want to implement a progress bar which should be started on export and when the export finishes it should be completed.
I am using a third party Nuget package called 'csvreader' to write the data from database to Excel. I am new to C# and I am not sure how to implement the progress bar into this AJAX function - or is there any other option?
$('#csvExportAll').click(function() {
var length = $('#length').val();
$.get("?handler=AllCodes", {
length: length,
__RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val()
}).done(function(data, x, xhr) {
var disposition = xhr.getResponseHeader('Content-Disposition');
var filenameRegex = /filename=["']?(.*?)["']?(;|$)/i;
var fileName = filenameRegex.exec(disposition)[1];
const blob = new Blob([data], {
type: 'text/csv'
});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = fileName;
const clickHandler = () => {
setTimeout(() => {
URL.revokeObjectURL(url);
this.removeEventListener('click', clickHandler);
}, 150);
};
a.addEventListener('click', clickHandler, false);
a.click();
}).fail(function() {})
});
I am trying to covert returned file from server in blob and download it but I am missing smth. file type could be image, pdf or doc.
this is how file response with looks like
$http.get('url', {
headers: {'Content-Type': undefined}
}).then(function (response) {
var blob = new Blob([response.data], { type: 'image' }),
url = $window.URL || $window.webkitURL;
$scope.fileUrl = url.createObjectURL(blob);
}).catch(function(error) {
});
what am I doing wrong and this does not work as expected ?
You just need to use the url directly in an anchor tag
<a ng-href="{{url}}" target='_blank'>Download</a>
If the code above does not work, do this.
function success(response) {
var data = response.data,
blob = new Blob([data], {
type: 'application/octet-stream; charset=UTF-8'
}),
url = $window.URL || $window.webkitURL,
fileUrl = url.createObjectURL(blob);
var anchor = document.createElement('a');
anchor.href = fileUrl;
anchor.target = '_blank';
anchor.download = name;
anchor.style = "display: none";
document.body.appendChild(anchor);
anchor.click();
setTimeout(function() {
document.body.removeChild(anchor);
$window.URL.revokeObjectURL(fileUrl);
}, 100);
}
First convert blob to base64 format
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
console.log(base64data);
}
Then use the base64 to download the file
downloadFile(base64data, type, fileName) {
const file = window.btoa(base64data);
const url = `data:${fileType};base64,` + file;
let a = document.createElement('a');
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}
I know that posts with similar titles exist, but it doesn't work for me its how I try to achieve that:
WebApi
public async Task<HttpResponseMessage> ExportAnalyticsData([FromODataUri] int siteId, [FromODataUri] string start, [FromODataUri] string end) {
DateTime startDate = Date.Parse(start);
DateTime endDate = Date.Parse(end);
using (ZipFile zip = new ZipFile()) {
using (var DailyLogLanguagesCsv = new CsvWriter(new StreamWriter("src"))) {
var dailyLogLanguages = await _dbContext.AggregateDailyLogSiteObjectsByDates(siteId, startDate, endDate).ToListAsync();
DailyLogLanguagesCsv.WriteRecords(dailyLogLanguages);
zip.AddFile("src");
}
using (var DailyLogSiteObjectsCsv = new CsvWriter(new StreamWriter("src"))) {
var dailyLogSiteObjects = await _dbContext.AggregateDailyLogSiteObjectsByDates(siteId, startDate, endDate).ToListAsync();
DailyLogSiteObjectsCsv.WriteRecords(dailyLogSiteObjects);
zip.AddFile("src");
}
zip.Save("src");
HttpResponseMessage result = null;
var localFilePath = HttpContext.Current.Server.MapPath("src");
if (!File.Exists(localFilePath)) {
result = Request.CreateResponse(HttpStatusCode.Gone);
} else {
// Serve the file to the client
result = Request.CreateResponse(HttpStatusCode.OK);
result.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read));
result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
result.Content.Headers.ContentDisposition.FileName = "Analytics";
}
return result;
}
}
AngularJs
$scope.exportData = function () {
apiService.dailyLog.exportAnalyticsData($scope.siteId, $scope.startDate, $scope.finishDate).then(function (response) {
debugger;
var blob = new Blob([response.data], { type: "application/zip" });
saveAs(blob, "analytics.zip");
})
};
function saveAs(blob, fileName) {
var url = window.URL.createObjectURL(blob);
var doc = document.createElement("a");
doc.href = url;
doc.download = fileName;
doc.click();
window.URL.revokeObjectURL(url);
}
And when I download a file I get information that the file is damaged. It only happens when I return zip file. It works well for csv.
After #wannadream suggestions and edited my code
else
{
// Serve the file to the client
result = Request.CreateResponse(HttpStatusCode.OK);
result.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read));
result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
result.Content.Headers.ContentDisposition.FileName = "Analytics";
result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
}
I have such problem when i try to open downloaded zip.
Try accessing the WebAPI controller action through a normal browser, and see if the ZIP it downloads can open. If it can't, then your problem is in your WebAPI.
zip.AddFile("src"); and then zip.Save("src"); ? It does not make sense.
You are zipping 'src' with target name 'src'. Try another name for zip file.
zip.Save("target")
var localFilePath = HttpContext.Current.Server.MapPath("target");
Try set this:
result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
I resolve it by set a type responseType
{ type: "application/octet-stream", responseType: 'arraybuffer' }
and the same thing in my apiService
$http.get(serviceBase + path), {responseType:'arraybuffer'});
This can be done using DotNetZip and set the response type as arraybuffer, check below code for complete understanding.
1.WebApi Controller
[HttpPost]
[Route("GetContactFileLink")]
public HttpResponseMessage GetContactFileLink([FromBody]JObject obj)
{
string exportURL = "d:\\xxxx.text";//replace with your filepath
var fileName = obj["filename"].ToObject<string>();
exportURL = exportURL+fileName;
var resullt = CreateZipFile(exportURL);
return resullt;
}
private HttpResponseMessage CreateZipFile(string directoryPath)
{
try
{
HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
using (ZipFile zip = new ZipFile())
{
zip.AlternateEncodingUsage = ZipOption.AsNecessary;
zip.AddFile(directoryPath, "");
//Set the Name of Zip File.
string zipName = String.Format("Zip_{0}.zip", DateTime.Now.ToString("yyyy-MMM-dd-HHmmss"));
using (MemoryStream memoryStream = new MemoryStream())
{
//Save the Zip File to MemoryStream.
zip.Save(memoryStream);
//Set the Response Content.
response.Content = new ByteArrayContent(memoryStream.ToArray());
//Set the Response Content Length.
response.Content.Headers.ContentLength = memoryStream.ToArray().LongLength;
//Set the Content Disposition Header Value and FileName.
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
response.Content.Headers.ContentDisposition.FileName = zipName;
//Set the File Content Type.
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/zip");
return response;
}
}
}
catch(Exception ex)
{
throw new ApplicationException("Invald file path or file not exsist");
}
}
2.Angular component
function getcontactFileLink(token, params) {
return $http.post('api/event/GetContactFileLink', params, { headers: { 'Authorization': 'Bearer ' + token, 'CultureCode': cc }, 'responseType': 'arraybuffer' }).then(response);
function response(response) {
return response;
}
}
function showcontactfile(item) {
usSpinnerService.spin('spinner-1');
var params = {};
params.filename = item.filename;
EventListingProcess.getcontactFileLink(accessToken, params).then(function (result) {
var blob = new Blob([result.data], { type: "application/zip" });
var fileName = item.filename+".zip";
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display:none";
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
a.remove();
}).catch(function (error) {
vm.message = frameworkFactory.decodeURI(error.statusText);
//frameworkFactory.translate(vm, 'message', error.statusText);
}).finally(function () {
usSpinnerService.stop('spinner-1');
});
}
I am getting below response from AJAX respose:
this is response of zip file.
please let me know how to save this filename.zip in Javascript. Inside the ZIP there is PDF file.
MY code is like this:
$.ajax({
url: baseURLDownload + "/service/report-builder/generateReportContentPDF",
beforeSend: function (xhr) {
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.responseType = 'arraybuffer'
},
type: "POST",
data: JSON.stringify(parameter),
contentType: "application/json",
success: function(result) {
console.log("ssss->"+result);
var base64String = utf8_to_b64(result);
//window.open("data:application/zip;base64,"+base64String); // It will download pdf in zip
var zip = new JSZip();
zip.add("PDFReport.pdf", result);
content = zip.generate();
location.href="data:application/zip;base64," + content;
$.mobile.loading('hide');
},
error: function(xhr){
console.log("Request Status: " + xhr.status + " Status Text: " + xhr.statusText + " " + xhr.responseText);
$.mobile.loading('hide');
showAlert("Error occured. Unable to download Report", "Message", "OK");
}
});
RESPOSE Console.log("ssss->"+result);
PK��Q��F���������������/crt_pdf_10204725.pdf��uX\M�8|p�����݃�;w�#p �ܝBp��݂�;|C�ھ�w������=O���]]�%�N�����#+�reup����������Y������̉�J����3)� O��C����F�M�P�&�����rA�#��7T.��z(%h��x�x0�0Z�-i��%q�e�M�����i�"�c��-/��j��齔/ļL瞄�0� �� >�o��[��6 멆�n��s�$�
�#>˘ '��wT�� ���3�36DK�+�̓�t6 ��r��sA:���x�<>n������'U��RLqA+���ݺ�BM��:4ĞP�}���:�}ߣP����?F)�9-�W0���2�{x��#2v8N.$V�>X=/�+�c}���ּ�\y���\*�J\��
���90�T�L� 3p���*Sfj(���PWWz��O�s�9]&����iO|�9�;�5��ʘdW�cl% �%;����u���%[�5������Q]$��[L>���yXg�9��2+&,iFs�Q�����u�.�E(�>W��+��M ؟E������i|���k�k�c蟴CcG�j��4s|x �F1�}��Y��,29�0M=-O����m\L��y��^On^���\���u��a���F9:zc�Sy�-�g��fu�n�C�T:{
��4&/
��LM9�98�
�&Pnc�!��m�r�~��)74�04��0�0������M�~"��.ikjG��M�-
Finally I got answer of my question:
https://github.com/eligrey/Blob.js/
https://github.com/eligrey/FileSaver.js/
Here is the code:
var xhr = new XMLHttpRequest();
xhr.open("POST", baseURLDownload + "/service/report/QCPReport", true);
xhr.setRequestHeader("Content-type","application/json");
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// alert("Failed to download:" + xhr.status + "---" + xhr.statusText);
var blob = new Blob([xhr.response], {type: "octet/stream"});
var fileName = "QCPReport.zip";
saveAs(blob, fileName);
}
}
xhr.responseType = "arraybuffer";
xhr.send(JSON.stringify(QCPParameter));
No dependancy.
Compatible with IE 10,11, Chrome, FF and Safari:
function str2bytes (str) {
var bytes = new Uint8Array(str.length);
for (var i=0; i<str.length; i++) {
bytes[i] = str.charCodeAt(i);
}
return bytes;
}
var xhr = new XMLHttpRequest();
xhr.open("POST", baseURLDownload + "/service/report/QCPReport", true);
xhr.setRequestHeader("Content-type","application/json");
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// alert("Failed to download:" + xhr.status + "---" + xhr.statusText);
var blob = new Blob([str2bytes(xhr.response)], {type: "application/zip"});
var fileName = "QCPReport.zip";
if (navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(blob, filename);
} else {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display:none";
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
a.remove();
}
}
}
xhr.responseType = "arraybuffer";
xhr.send(JSON.stringify(QCPParameter));
Axios implementation:
const url = 'https://www.example.com/download-zip'
// Payload, eg list of docs to zip
const payload = { documents: ['id1', 'id2', 'id3'] }
// Axios options
const axiosOptions = {
responseType: 'arraybuffer',
headers: {
'Content-Type': 'application/json'
}
}
// Fetch data and save file
axios
.post(url, payload, axiosOptions)
.then((response) => {
const blob = new Blob([response.data], {
type: 'application/octet-stream'
})
const filename = 'download.zip'
saveAs(blob, filename)
})
.catch((e) => {
// Handle error
})
})
Note
saveAs is a function from file-saver package I've been using to handle saving the file.
For those of you using fetch, you can do this doing something like this.
fetch(url, config).
.then((response) => {
return response.arrayBuffer()
})
.then((data) => handleData(data))
In handleData, you will then instantiate the Blob object to handle the zip data.
Here is my Answer
you can avoid using blob and avoid using Filesaver.
This is how i wrote for one of my project using GET Method
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", url, true);
xmlHttp.setRequestHeader("Content-type","application/json");
xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xmlHttp.responseType= 'blob';
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
const downloadUrl = window.URL.createObjectURL(xmlHttp.response);
const link = document.createElement('a');
link.setAttribute('href', downloadUrl);
link.setAttribute('download', `filename.zip`);
link.style.display = 'none';
document.body.appendChild(link);
link.click();
window.URL.revokeObjectURL(link.href);
document.body.removeChild(link);
}
}
xmlHttp.responseType = "arraybuffer";
xmlHttp.send();
I'm using this tool to crop images in my AngularJS app: https://github.com/fengyuanchen/cropper
and then I try to store data to server, but now I send base64 code... How could I send normal cropped image binary code, not as base64? is it real?
my code for uploading is such:
var addImage = function(files) {
var deferred = $q.defer();
var fd = new FormData();
var blob = new Blob([files], { type : "image/png"});
fd.append("file", blob);
$http.post(settings.apiBaseUri + "/files", fd, {
withCredentials: true,
headers: {
'Content-Type': undefined
},
transformRequest: angular.identity
})
.success(function(data, status, headers, config) {
url = data.Url;
deferred.resolve(url);
})
.error(function(err, status) {
});
return deferred.promise;
};
and here I send base64 code:
$scope.photoChanged = function(files) {
$scope.oldImg = angular.element(document.querySelector('#avatar-id'));
$scope.files = files;
var reader = new FileReader();
reader.onload = function(e) {
$scope.imagecontent = e.target.result;
};
reader.readAsDataURL(files[0]);
};
and
$scope.setCroppedData = function(data) {
$('#avatar-id').attr('src', data);
$scope.nImg = new Image();
$scope.nImg.src = data; // data - is base64 image code
}
...
uploaderService.addImage($scope.nImg.src).then(function(url) {
$scope.person.AvatarUrl = url;
$scope.updateContactQuery();
});
...
how could I send like I do without any croping: send image file, so that i could go via link in browser and see image, but not a byte64 code???
You can wrap the base64 data in ArrayBuffer then convert to binary Image data like:
var binaryImg = atob(base64Image);
var length = binaryImg.length;
var arrayBuffer = new ArrayBuffer(length);
var uintArray = new Uint8Array(arrayBuffer);
for (var i = 0; i < length; i++) {
uintArray[i] = binaryImg.charCodeAt(i);
}
I suppose uintArray is what you want.