I have a web service that generates an dynamic image when /image.gif is called.
How can I get the protractor test to download the file and do an MD5sum on the result?
I had a look at Protractor e2e test case for downloading pdf file but it relies on the browser having a download link to click.
There is no page hosting this image.
I could not get the image to download on my windows setup, using Leo's answer no errors, but I found the following that allowed me to get the base64 data uri which I can "expect" on.
Convert an image into binary data in javascript
it('Image is version1)', function() {
browser.ignoreSynchronization = true
browser.get(targetUrl);
return browser.executeScript(function() {
var img = document.querySelector('img');
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}).then(function (data) {
expect(data).toEqual(base64VersionOfVersion1);
});
});
You should follow my Chrome configuration on that pdf-question link.
Then, instead of clicking something, browser.get('/image.gif'); should trigger the download.
Wait for the download to complete following Stephen Baillie solution or similar.
Finally, NodeJS side of things for the MD5 part, you can use execSync or something more fancy but execSync will do:
var execSync = require('exec-sync');
var md5sum = execSync('md5sum ' + pathToDownloadedFile).split(' ')[0]
// e.g. md5sum //=> "c9b833c49ffc9d48a19d0bd858667188"
Related
This question has been asked a fair bit before, but none of the solutions I've seen seem to work, potentially because of the way I stream the file back to the browser. The CSV I ultimately want is in a private S3 bucket and because of security middleware, I have to get it via a NodeJS endpoint. The code for the API is below.
exports.download = function(req, res) {
var recording = req.vsRecording,
s3 = new AWS.S3();
if(recording.data_uri){
try{
res.set('Content-Type', 'application/octet-stream');
var fileStream = s3.getObject({Bucket: 'processing-dispatched', Key: recording._id + '/aggregated.csv'}).createReadStream();
fileStream.pipe(res);
}
catch(err){
res.status(500).json({error: err});
}
}
else {
res.status(500).json({error: 'Recording does not have a report file.'});
}
};
This works perfectly and I can get the content of the file back to the browser. When it goes wrong is trying to get that content into be opened as a file download. Is there a special way to handle downloading streams?
The closest I've got is this code on the client, which sometimes seems to work on localhost if I turn my adblocker off - but does not work in production.
$scope.download = function(){
Report.download($state.params.recordingId).then(function(data){
var csvContent = "data:text/csv;charset=utf-8," + data.toString();
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
});
Report.download is just an angular service wrapper around my Node endpoint, it returns a promise and resolves the content of the file in the data variable.
reason might be the browser blocking the new window.
Allow all sites to show pop-ups in browser setting.
you can try thing in different ways create a file in node with fs and return url to the Front-end
or
you can Try the following code
$scope.download = function() {
Report.download($state.params.recordingId).then(function(data) {
var csvContent = "data:text/csv;charset=utf-8," + data.toString();
var a = document.createElement('a');
a.href = "data:application/csv;charset=utf-8," + csvContent;
a.setAttribute('download', "abc.csv");
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
}
I'm using MEAN Stack to construct my web application. (Mongo, Express, Angular, NodeJS) I have a server.js file, html file and a css file. My server.js generates a var number which I want to get rendered on the frontend, however I'm having some trouble doing that. Let me explain, on my html there a button I created, whenever the user clicks on that button, I want this specific var to be shown the screen, but it doesn't work.
Here is the code for the creation of the button:
Some Text
Below is the angularjs code for where I use the exact rendering to be occurred:
The Amount:
{{links.amountLinks}}
test this
My server.js code:(Please note I'm using jsdom module)
var jsdom = require("jsdom");
jsdom.env(
url,
["http://code.jquery.com/jquery.js"],
function (err, window) {
// console.log("there have been", window.$("a").length, "io.js releases!");
// alert("there have been", window.$("a").length, "io.js releases!");
console.log(window.$("a").length);
amountLinks = window.$("a").length;
json.amountLinks = amountLinks;
data = amountLinks;
});
Does anyone know how I can fix this?
The code can be fixed as follow:
jsdom.env(
url,
["http://code.jquery.com/jquery.js"],
function (err, window) {
// console.log("there have been", window.$("a").length, "io.js releases!");
// alert("there have been", window.$("a").length, "io.js releases!");
console.log(window.$("a").length);
amountLinks = window.$("a").length;
json.amountLinks = amountLinks;
data = amountLinks;
res.send(JSON.stringify(json, null, 4))
});
}
Here is the thing:-
I have over a thousand images saved locally in my mac. I have a landing page that mocks an ecommerce deal site. It would be tedious to have to manually type in the src url in the img tag for a thousand pictures. Thus, i thought i could somehow have this images dumped in a cloud storage or something and use REST api get method to extract these images in a response.data. Then assign it to a $scope variable and use ng-repeat to bind the images in my landing page view. Is this possible? If not, what are the alternatives? SQL database?
Appreciate your help. P.S. I am totally a beginner at web development.
Install node.js. It's Javascript for a server which should make it pretty easy since you already know Javascript.
On a Mac, you can install node like this:
brew install node
Use this node.js code (credit to codepedia.com, tweaked a little by me):
//include http, fs and url module
var http = require('http'),
fs = require('fs'),
path = require('path'),
url = require('url');
imageDir = './images/';
//create http server listening on port 3333
http.createServer(function (req, res) {
//use the url to parse the requested url and get the image name
var query = url.parse(req.url,true).query;
pic = query.image;
if (typeof pic === 'undefined') {
getImages(imageDir, function (err, files) {
var imageList = JSON.stringify(files);
res.writeHead(200, {'Content-type':'application/json'});
res.end(imageList);
});
} else {
//read the image using fs and send the image content back in the response
fs.readFile(imageDir + pic, function (err, content) {
if (err) {
res.writeHead(400, {'Content-type':'text/html'})
console.log(err);
res.end("No such image");
} else {
//specify the content type in the response will be an image
res.writeHead(200,{'Content-type':'image/jpg'});
res.end(content, "binary");
}
});
}
}).listen(3333);
console.log("Server running at http://localhost:3333/");
//get the list of jpg files in the image dir
function getImages(imageDir, callback) {
var fileType = '.jpg',
files = [], i;
fs.readdir(imageDir, function (err, list) {
for(i=0; i<list.length; i++) {
if(path.extname(list[i]) === fileType) {
files.push(list[i]); //store the file name into the array files
}
}
callback(err, files);
});
}
Run this from the command line to start you new image server (assuming you named the file "server.js"):
node server.js
You should see this text appear on the command line:
Server running at http://localhost:3333/
You can quickly test it by going to this address in your browser and you should see a JSON object showing you an array of all the filenames in the "./images" directory. By the way, this program assumes you're putting the images folder in the same directory as "server.js". You can put the images directory anywhere and just change the path of the variable "imageDir".
Now you can load the list of files from Angular using this code in your controller:
$http.get("http://localhost:3333", function(data) {
$scope.images = data;
});
In your view, you can now use an ng-repeat like this to display all the images:
<div ng-repeat="image in images" style="padding: 8px">
<img src="http://localhost:3333/image={{ image }}">
</div>
Note: this will work if you run it locally on your Mac or if you upload all the images to a server on which you can use Node.js.
I am trying to port a Chrome Extension that programmatically creates and downloads a file to a Firefox WebExtension, using Firefox 45.0.1.
This is the Javascript code:
text = '{"greeting":"Hello, World!"}';
var a = document.createElement('a');
var file = new Blob([text], {type: 'text/json'});
a.href = URL.createObjectURL(file);
a.download = 'hello.world'; // Filename
a.click(); // Trigger download
All lines seem to execute fine, but no file is downloaded (I put a console.log() after the a.click()).
As of now there is no chrome.downloads API in Firefox WebExtensions.
Is there any incompatibility with Firefox in the code above? Is there any other alternative to programmatically download a file using a Firefox WebExtension?
One way to do this, would be to add an event listener to the a tag.
text = '{"greeting":"Hello, World!"}';
var a = document.createElement('a');
var file = new Blob([text], {type: 'text/json'});
a.href = URL.createObjectURL(file);
a.download = 'hello.world'; // Filename
a.addEventListener('click', dlLinkClicked);
function dlLinkClicked(e){
var link = e.currentTarget.href;
var filename = e.currentTarget.download;
/*downloadVidWithChromeApi downloads using the chrome download API,
otherwise returns false and starts downloading the file
using the html5 download - you don't have to do anything else*/
if(downloadVidWithChromeApi(link, filename)){
e.preventDefault();
}
}
function downloadVidWithChromeApi(link, fileName){
if(chrome.downloads && chrome.downloads.download){
chrome.downloads.download({
url: link,
saveAs: false,
filename: fileName // Optional
});
return true;
}else{
return false;
}
}
Notice that I use the downloadVidWithChromeApi function like so, to check if chrome.downloads is supported.
Therefore this code can run in both firefox, chrome, AND opera web extensions AS IS.
I am trying to save a pdf file that is loaded in an iFrame. There is by default a button in the iFrame to save the file but I want an extra button (outside the iFrame) to save the file.
<iframe id="labelFrame" src="loadedFile.pdf"></iframe>
<button id="savePDF">Download File</button>
In javascript:
$('#savePDF').click(function(){
var save = document.getElementById('labelFrame');
//Save the file by opening the explorer for the user to select the place to save or save the file in a default location, how do I do this?
}
What is the best way to reach this?
I needed an answer to this question as well and found a solution.
When displaying a PDF in an IFrame the browser will render it in an <embed> element and from there we cant use it in javascript as far as i know.
We'll need to use XMLHttpRequest to get the PDF from a server as a Blob object only then we can both display it and save it using javascript.
var iframe = document.getElementById('labelFrame'),
saveBtn = document.getElementById('savePDF'),
pdfUrl = 'loadedFile.pdf';
var xhr = new XMLHttpRequest();
xhr.open("GET", pdfUrl);
xhr.responseType = 'blob'; // <- important (but since IE10)
xhr.onload = function() {
var blobUrl = URL.createObjectURL(xhr.response); // <- used for display + download
iframe.src = blobUrl
saveBtn.onclick = function() {
downloadBlob(blobUrl, 'myFilename.pdf');
}
};
xhr.send();
The xhr.onload function will set to src of the iframe and add the onclick handler to the save button
Here is the downloadBlob() function that i've used in the example
function downloadBlob(blobUrl, filename) {
var a = document.createElement('a');
a.href = blobUrl;
a.target = '_parent';
// Use a.download if available. This increases the likelihood that
// the file is downloaded instead of opened by another PDF plugin.
if ('download' in a) {
a.download = filename;
}
// <a> must be in the document for IE and recent Firefox versions,
// otherwise .click() is ignored.
(document.body || document.documentElement).appendChild(a);
a.click();
a.remove();
}