Displaying pdf from arraybuffer - javascript

I am returning stream data from laravel dompdf from this code
$pdf = \App::make('dompdf.wrapper');
$pdf->loadHTML("<div>This is test</div>");
return $pdf->stream();
And this is my JS ajax code
$.ajax({
type:"GET",
url: "/display",
responseType: 'arraybuffer'
}).done(function( response ) {
var blob = new Blob([response.data], {type: 'application/pdf'});
var pdfurl = window.URL.createObjectURL(blob)+"#view=FitW";
$("#pdfviewer").attr("data",pdfurl);
});
Here is HTML to display pdf after ajax
<object id="pdfviewer" data="/files/sample.pdf" type="application/pdf" style="width:100%;height:500px;"></object>
I am getting below error
Failed to load PDF document
Please help to fix this. How to display pdf file.

jQuery.ajax() does not have a responseType setting by default. You can use a polyfill, for example jquery-ajax-blob-arraybuffer.js which implements binary data transport, or utilize fetch().
Note also, chrome, chromium have issues displaying .pdf at either <object> and <embed> elements, see Displaying PDF using object embed tag with blob URL, Embed a Blob using PDFObject. Substitute using <iframe> element for <object> element.
$(function() {
var pdfsrc = "/display";
var jQueryAjaxBlobArrayBuffer = "https://gist.githubusercontent.com/SaneMethod/"
+ "7548768/raw/ae22b1fa2e6f56ae6c87ad0d7fbae8fd511e781f/"
+ "jquery-ajax-blob-arraybuffer.js";
var script = $("<script>");
$.get(jQueryAjaxBlobArrayBuffer)
.then(function(data) {
script.text(data).appendTo("body")
}, function(err) {
console.log(err);
})
.then(function() {
$.ajax({
url: pdfsrc,
dataType: "arraybuffer"
})
.then(function(data) {
// do stuff with `data`
console.log(data, data instanceof ArrayBuffer);
$("#pdfviewer").attr("src", URL.createObjectURL(new Blob([data], {
type: "application/pdf"
})))
}, function(err) {
console.log(err);
});
});
});
Using fetch(), .arrayBuffer()
var pdfsrc = "/display";
fetch(pdfsrc)
.then(function(response) {
return response.arrayBuffer()
})
.then(function(data) {
// do stuff with `data`
console.log(data, data instanceof ArrayBuffer);
$("#pdfviewer").attr("src", URL.createObjectURL(new Blob([data], {
type: "application/pdf"
})))
}, function(err) {
console.log(err);
});
plnkr http://plnkr.co/edit/9R5WcsMSWQaTbgNdY3RJ?p=preview
version 1 jquery-ajax-blob-arraybuffer.js, jQuery.ajax(); version 2 fetch(), .arrayBuffer()

I like guest271314 answer a lot, especially the second version using fetch, but I wanted to add a solution that does not use a polyfill or an experimental technology like fetch.
This solution uses the native XMLHttpRequest API to create the request. This allows us to change the responseType to arrayBuffer.
var xhr = new XMLHttpRequest();
var pdfsrc = "https://upload.wikimedia.org/wikipedia/en/6/62/Definition_of_management.pdf";
xhr.open('GET', pdfsrc, true);
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", function (evt) {
var data = evt.target.response;
if (this.status === 200) {
$("#pdfviewer").attr("src", URL.createObjectURL(new Blob([data], {
type: "application/pdf"
})));
}
}, false);
xhr.send();
I forked guest271314s plnkr to show this method in action:
http://plnkr.co/edit/7tfBYQQdnih9cW98HSXX?p=preview

From my tests the responce is in response not response.data, so the following should work:
$.ajax({
type:"GET",
url: "/display",
responseType: 'arraybuffer'
}).done(function( response ) {
var blob = new Blob([response], {type: 'application/pdf'});
var pdfurl = window.URL.createObjectURL(blob)+"#view=FitW";
$("#pdfviewer").attr("data",pdfurl);
});
Although it seems JQuery is doing something with the responce causing a blank PDF output... (PDF is blank when downloading using javascript). This will work:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'test.pdf', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if (this.status == 200) {
var blob=new Blob([this.response], {type:"application/pdf"});
var pdfurl = window.URL.createObjectURL(blob)+"#view=FitW";
$("#pdfviewer").attr("data",pdfurl);
}
};
xhr.send();

Related

Uploading file to google drive via drive API messes up umlauts

I am uploading a file to Google Drive with the following code snippet using the Drive API, but when I look at the contents of the file in Google Drive, the umlauts are messed up.
chrome.identity.getAuthToken({ interactive: true }, token => {
var metadata = {
name: 'testname.json',
mimeType: 'application/json'
};
var fileContent = {
title: "Test Title",
notes: "Ää",
last_changed: "1641862146889",
url: "https://www.example.org",
poster_url: "https://www.example.org"
};
var file = new Blob([JSON.stringify(fileContent)], { type: 'application/json' });
var form = new FormData();
form.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
form.append('file', file);
for (var pair of form.entries()) {
console.log(pair[0], pair[1].text());
}
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.responseType = 'json';
xhr.onload = () => {
var fileId = xhr.response.id;
/* Do something with xhr.response */
console.log(xhr.response);
};
xhr.send(form);
});
Messed up umlauts(notes property):
{"title":"Test Title","notes":"Ää","last_changed":"1641862146889","url":"https://www.example.org","poster_url":"https://www.example.org"}
Does someone know how to prevent this from happening? After some troubleshooting, I also think it is possible that the problem has something to do with Blob or FormData.

How to Upload txt file with Cypress for API Testing - XMLHTTPRequest?

I'm trying to test an endpoint which will upload a file and give 200 response status code in cypress. As per some research cy.request cannot be used to upload a file for multipart/form-data so we need to use XMLHttp to upload such files. I have created below file to test the api but it doesn't work. Can someone please help what's wrong with my code ? Thank you.
Added below code under support/commands.ts(I will require a header to pass token from auth endpoint)
// Performs an XMLHttpRequest instead of a cy.request (able to send data as FormData - multipart/form-data)
Cypress.Commands.add('multipartFormRequest', (method,URL, formData,headers, done) => {
const xhr = new XMLHttpRequest();
xhr.open(method, URL);
xhr.setRequestHeader("accept", "application/json");
xhr.setRequestHeader("Content-Type", "multipart/form-data");
if (headers) {
headers.forEach(function(header) {
xhr.setRequestHeader(header.name, header.value);
});
}
xhr.onload = function (){
done(xhr);
};
xhr.onerror = function (){
done(xhr);
};
xhr.send(formData);
})
Test file to call multipartFormRequest:
const fileName = 'test_file.txt';
const method = 'POST';
const URL = "https://fakeurl.com/upload-file";
const headers = api.headersWithAuth(`${authToken}`);
const fileType = "application/text";
cy.fixture(fileName, 'binary').then((res) => {
const blob = Cypress.Blob.binaryStringToBlob(res, fileType);
const formData = new FormData();
formData.append('file', blob, fileName);
cy.multipartFormRequest(method, URL, headers, formData, function (response) {
expect(response.status).to.equal(200);
})
})
I'm getting this error message:-
Now, I'm getting status code as 0.
describe("Upload image", () => {
it("upload first image", () => {
const fileName = "image.jpeg";
const method = "POST";
const url = "https://api-demo.com/1";
const fileType = "image/jpeg";
cy.fixture(fileName, "binary")
.then((txtBin) => Cypress.Blob.binaryStringToBlob(txtBin))
.then((blob) => {
const formData = new FormData();
formData.append("image_data", blob, fileName);
formData.append("image_format", "jpeg");
cy.form_request(method, url, formData, function (response) {
expect(response.status).to.eq(200)
}
);
})
});
});
Cypress.Commands.add('form_request', (method, url, formData, done) => {
const xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader("device", "331231");
xhr.setRequestHeader("city", "bangalore");
xhr.onload = function () {
done(xhr);
};
xhr.onerror = function () {
done(xhr);
};
xhr.send(formData);
})
Use
const blob = Cypress.Blob.binaryStringToBlob(res, fileType);
and remove the .then().
See Cypress.Blob
History
Version 5.0.0
Changes:
Return type of arrayBufferToBlob, base64StringToBlob, binaryStringToBlob, and dataURLToBlob methods changed from Promise<Blob> to Blob

File upload using fetch instead of XHR

I am trying to upload an image using fetch instead of xhr. My request works successfully when I use xhr. My xhr request object is the following
var data = new FormData();
var photoObject = {
uri: uriFromCameraRoll,
type: 'image/jpeg',
name: 'photo.jpg'
};
data.append("photos", photoObject);
var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", function () {
if (this.readyState === 4) {
console.log(this.responseText);
}
});
xhr.open("POST", "http://localhost:3000/api/v1/");
xhr.send(data);
Now I am trying to use fetch like following
fetch('http://localhost:3000/api/v1/', {
mode: 'no-cors',
method: 'POST' ,
body: data
}).then(function(response) {
console.log(response.status)
console.log(response)
})
But in my sever I am not receiving the file. Can anyone help me resolve this issue?

Saving blob (might be data!) returned by AJAX call to Azure Blob Storage creates corrupt image

If I post a PDF to my vendors API, they return me a .png file as a blob (see update 2 as I am now unsure if they are returning blob data).
I would like to push this into Azure Blob Storage. Using my code listed below, it pushes something in, but the file is corrupted. Example: downloading the .png from Azure Blob Storage and trying to open it with Paint gives the following error:
This is not a valid bitmap file, or its format is not currently
supported.
I have verified that the image is sent to me correctly as the vendor is able to open the .png on their side. I am wondering if I need to convert this to base64 or save it to a local Web directory before uploading it to Azure Blob Storage.
Here is my Angular front end Controller that calls my Node/Express backend for uploading to Azure once it receives the returned "image":
$.ajax({
url: 'http://myvendorsapi.net/uploadPDF,
type: "POST",
data: formdata,
mimeType: "multipart/form-data",
processData: false,
contentType: false,
crossDomain: true,
success: function (result) {
var containerName = 'container1';
var filename = 'Texture_0.png';
var file = result;
$http.post('/postAdvanced', { containerName: containerName, filename: filename, file: file }).success(function (data) {
console.log("success!");
}, function (err) {
//console.log(err);
});
},
error: function (error) {
console.log("Something went wrong!");
}
})
}
Here is my Node/Express backend that uploads the blob to Azure Blob Storage. It gives no error, but the file can't be opened/gives the error stated above when opened in Paint:
app.post('/postAdvanced', function (req, res, next) {
var containerName = req.body.containerName;
var filename = req.body.filename;
var file = req.body.file;
blobSvc.createBlockBlobFromText(containerName, filename, file, function (error, result, response) {
if (!error) {
res.send(result);
}
else {
console.log(error);
}
});
})
Update 1: The answer provided here allows me to pass in the URL of the vendors API for some endpoints: Download file via Webservice and Push it to Azure Blob Storage via Node/Express
It works as it writes the file at the endpoint to a temp folder. In my current scenario, I upload a PDF file and it returns an image file that I need to upload to Azure Blob Storage. Is there a way to use the answer here, but adjust it for a file that I already have (since it is returned to me) versus file streaming from a URL?
Update 2: In console logging the returned "file", it looks like it may be data. I am not sure, it looks like this:
Is this actually data, and if so, how do I make this into a file for upload?
UPDATE 3:
Since it appears that jQuery AJAX can't manage binary returns. I am able to "open" the blob using XMLHTTPResponse as follows, but I can't seem to push this into Azure as it gives me the following error:
TypeError: must start with number, buffer, array or string
Here is my request. Note that the file opens properly:
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function (ev) {
var oData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open("POST", "http://myvendorsapi/Upload", true);
xhr.onload = function (oEvent) {
if (xhr.status == 200) {
var blob = new Blob([xhr.response], { type: "image/png" });
var objectUrl = URL.createObjectURL(blob);
window.open(objectUrl);
console.log(blob);
var containerName = boxContainerName;
var filename = 'Texture_0.png';
$http.post('/postAdvanced', { containerName: containerName, filename: filename, file: blob }).success(function (data) {
//console.log(data);
console.log("success!");
}, function (err) {
//console.log(err);
});
} else {
oOutput.innerHTML = "Error " + xhr.status + " occurred when trying to upload your file.<br \/>";
}
};
xhr.send(oData);
ev.preventDefault();
}, false);
createBlockBlobFromText will work with either string or buffer. You might need a buffer to hold the binary content due to a known issue of jQuery.
For a workaround, there are several options:
Option 1: Reading binary filesusing jquery ajax
Option 2: Use native XMLHttpRequest
Option 3: Write frontend with Node as well and browserify it.
Your frontend code may look like:
var request = require('request');
request.post('http://myvendorsapi.net/uploadPDF', function (error, response, body) {
if (!error && response.statusCode == 200) {
var formData = {
containerName: 'container1',
filename: 'Texture_0.png',
file: body
};
request.post({ uri: '/postAdvanced', formData: formData }, function optionalCallback(err, httpResponse, body) {
if (err) {
return console.error('upload failed:', err);
}
console.log('Upload successful! Server responded with:', body);
});
} else {
console.log('Get snapshot failed!');
}
});
Then the backend code may look like:
app.post('/postAdvanced', function (req, res, next) {
var containerName = req.body.containerName;
var filename = req.body.filename;
var file = req.body.file;
if (!Buffer.isBuffer(file)) {
// Convert 'file' to a binary buffer
}
var options = { contentType: 'image/png' };
blobSvc.createBlockBlobFromText(containerName, filename, file, options, function (error, result, response) {
if (!error) {
res.send(result);
} else {
console.log(error);
}
});
})
Below I have the code to upload the image as binary in angular using FormData.
The server code will be the code to handle a regular file upload via a form.
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function (ev) {
var oData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open("POST", "http://vendorapi.net/Upload", true);
xhr.onload = function (oEvent) {
if (xhr.status == 200) {
var blob = new Blob([xhr.response], { type: "image/png" });
//var objectUrl = URL.createObjectURL(blob);
//window.open(objectUrl);
//console.log(blob);
var formData = new FormData()
formData.append('file', blob);
formData.append('containerName', boxContainerName);
formData.append('filename', 'Texture_0.png');
$http.post('/postAdvancedTest', formData, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function (data) {
//console.log(data);
console.log("success!");
// Clear previous 3D render
$('#webGL-container').empty();
// Generated new 3D render
$scope.generate3D();
}, function (err) {
//console.log(err);
});
} else {
oOutput.innerHTML = "Error " + xhr.status + " occurred when trying to upload your file.<br \/>";
}
};
xhr.send(oData);
ev.preventDefault();
}, false);
I have solved the issue (thanks to Yang's input as well). I needed to base64 encode the data on the client side before passing it to node to decode to a file. I needed to use XMLHTTPRequest to get binary data properly, as jQuery AJAX appears to have an issue with returning (see here: http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/).
Here is my front end:
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function (ev) {
var oData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open("POST", "http://vendorapi.net/Upload", true);
xhr.onload = function (oEvent) {
if (xhr.status == 200) {
var blob = new Blob([xhr.response], { type: "image/png" });
//var objectUrl = URL.createObjectURL(blob);
//window.open(objectUrl);
console.log(blob);
var blobToBase64 = function(blob, cb) {
var reader = new FileReader();
reader.onload = function() {
var dataUrl = reader.result;
var base64 = dataUrl.split(',')[1];
cb(base64);
};
reader.readAsDataURL(blob);
};
blobToBase64(blob, function(base64){ // encode
var update = {'blob': base64};
var containerName = boxContainerName;
var filename = 'Texture_0.png';
$http.post('/postAdvancedTest', { containerName: containerName, filename: filename, file: base64}).success(function (data) {
//console.log(data);
console.log("success!");
// Clear previous 3D render
$('#webGL-container').empty();
// Generated new 3D render
$scope.generate3D();
}, function (err) {
//console.log(err);
});
})
} else {
oOutput.innerHTML = "Error " + xhr.status + " occurred when trying to upload your file.<br \/>";
}
};
xhr.send(oData);
ev.preventDefault();
}, false);
Node Backend:
app.post('/postAdvancedTest', function (req, res) {
var containerName = req.body.containerName
var filename = req.body.filename;
var file = req.body.file;
var buf = new Buffer(file, 'base64'); // decode
var tmpBasePath = 'upload/'; //this folder is to save files download from vendor URL, and should be created in the root directory previously.
var tmpFolder = tmpBasePath + containerName + '/';
// Create unique temp directory to store files
mkdirp(tmpFolder, function (err) {
if (err) console.error(err)
else console.log('Directory Created')
});
// This is the location of download files, e.g. 'upload/Texture_0.png'
var tmpFileSavedLocation = tmpFolder + filename;
fs.writeFile(tmpFileSavedLocation, buf, function (err) {
if (err) {
console.log("err", err);
} else {
//return res.json({ 'status': 'success' });
blobSvc.createBlockBlobFromLocalFile(containerName, filename, tmpFileSavedLocation, function (error, result, response) {
if (!error) {
console.log("Uploaded" + result);
res.send(containerName);
}
else {
console.log(error);
}
});
}
})
})

iOS upload file to service with xmlHttpRequest (cordova platform)

I am trying to upload a xlsx file in document directory of iphone to a service.
I am using xmlHttpRequest to load file from directory as arraybuffer
Converting the array buffer as Uint8Array
Create a formData object and append the Uint8Array array object to it
Send a ajax post request to upload service
When I do this, I get response as Status code 414 and error message as Unsupported media type. I believe this is due to the file that I am uploading and it is not in proper format as required.
Can any help me in identifying where I am going wrong or is there any alternative approach for doing same?
var serverUrl = "http://3.1.177.75/ExcelIO/xsapi/import/";
var request = new XMLHttpRequest();
var classRoot = this;
var xlsxFile = 'points to document directory of iphone where xlsx file is present';
request.open("GET", xlsxFile, true);
request.responseType = "arraybuffer";
request.onload = function(e) {
var arraybuffer = request.response;
var filedata = new Uint8Array(arraybuffer);
var formData = new FormData();
formData.append("ExcelOpenFlags", excelOpenFlags);
formData.append("file", filedata);
$.ajax({
url: serverUrl,
type: 'POST',
success: function completeHandler(data, textStatus, jqXHR) {
if (successCallback) {
alert("success");
}
},
error: function errorHandler(jqXHR, textStatus, errorThrown) {
alert("error "+JSON.stringify(jqXHR) + " -- "+errorThrown);
},
data: formData,
cache: false,
contentType: false,
processData: false,
headers: {
"Accept": "application/json"
}
});
};
request.send();

Categories