Trying to display a pdf file in browser - javascript

I am new to js.
I am trying to display a pdf file in browser, however I am continuously getting the same respond 'Cannot GET..."
I've tried it different ways.
router.get("/en/tc", function(req, res){
// res.sendFile("/assets/downloads/TC_TS_eng.pdf", {root: "."});
res.download("./assets/downloads/TC_TS_eng.pdf");
})
As well as via 'fileSend'.
It all works well as long as I run it locally. However as soon as I move it to the server it starts returning the above mentioned response.
Any help will be highly appreciated.

You could do this:
app.get("/", function(req, res){
res.sendFile(__dirname + "/test.pdf");
});
What I did here is quite simple. I sent the file when the user goes to the root directory (/) and send the pdf file. __dirname is directory name, which basically makes sure that even when you host on, say heroku, you can still get the file beacuse it gets the full directory path to the file, and then + the pdf name. Hope this helps! Good luck.

Related

Linking socket.io file to startup file node js

I have my start up file and I linked a socket.io file to it, cause my socket.io file is too large it needed to be separate. Everything works good but I require my socket.io file on connection, and I would only like it to be called once instead of it being called every time a page is refreshed or some one goes to another page on my website.
I am looking for another way to require my socket.io file instead of on connection. Here is my code if someone could help me out with this, it would be greatly appreciated.. Thank you for helping...
socketStart = server.listen(8081, function(){
console.log('listening on *:8081');
});
let connectSocket;
connectSocket = exports.connectSocket = require('socket.io')(socketStart);
connectSocket.use(function(socket, next) {
sessionWare(socket.request, socket.request.res, next);
});
connectSocket.on('connection', require('./socketServer.js'));

image not found / can't get /uploads/image nodejs REST API

I am trying to send an image to client in nodejs/expressjs REST API. What I am trying to do is saving that image url in mongo db database. When user make a get request, I send all the necessary data alongside the image which is basically avatar. Now on the client side I am not able to receive that image. I am keep getting below responses.
in console tab of chrome dev tools I am getting below.
When I see in the network tab I get below response which also has the link to avatar. Everything is perfect here.
Now when I check my uploads folder I do have the image. Check below:
After all this I am still getting these errors and still not sure where exactly am I making mistake. One thing is that maybe the client is trying to make a request to /uploads/image end point which I do not want. I simply want that image to be displayed using the url I am getting on response.
As we do not see the configuration of static files in express, this might be the problem.
To serve static files in your /uploads folder you need to add this line
app.use('/uploads', express.static('uploads'));
The 'uploads' directory will not be accessible from the frontend.
In node, move the uploaded file in to a subdirectory of the public directory of the node app, and set a relative path from there ans the image path.

downloading binary file over REST API

I've got a big system where I need to generate a PDF file. I'd like to access it via REST API and, of course, store the file locally.
The file content depends on many parameters what the content of this file should be, i.e. time: from-to, filters, sorting and many, many more parameters; they form a JSON object which perfectly fits into POST parameters. The parameters cannot go through GET, since they're too big.
There is the FileSaver library that works perfectly fine on modern browsers. I created an online demo. But when I downloaded old browsers - firefox11, firefox12, firefox15, it didn't work at all, even though I included the Blob.js polyfill - it opened a new tab with URL like: blob:457-343457-34574567-4576456 that was unable to be saved. I need to support many browsers, not only the new ones.
The question is - I've got JSON parameters object inside my SPA app - how should I design this PDF binary file download?
I was thinking of 3 approaches:
force browser to create a file on localhost - using FileSaver. WOrks fine for modern browsers, doesn't work for old ones
create downloadable link. I shoot a POST to the REST API, incuding all parameters, the REST API returns something like: {"download": "mysite.com/download/ms2h5d34h53m"}, the response is used to display a link to the user; the user might click the link (with no AJAX) and the server-side API should just return a file like in the old times.
not mine, but somewhere I read I could create an invisible form that shoots a POST to the server, which triggers file download (perhaps this would reduce the step with returning the {"download": "mysite.com/download/ms2h5d34h53m"} JSON)
I need a guidance on how to do that right.
I tried to create a test express.js server below. When I access http://localhost:8081/download directly, I see a PDF file downloaded locally. But when I try to access it via ajax/js:
then the content is fetched as binary stream:
var fs = require('fs');
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World');
});
app.get('/download', function(req, res){
var file = fs.readFileSync(__dirname + '/example.pdf', 'binary');
res.setHeader('Content-Type', 'application/pdf');
res.setHeader('Content-Length', file.length);
res.setHeader('Content-Disposition', 'attachment; filename=new-name.pdf');
res.setHeader('filename', 'sample.pdf');
res.write(file, 'binary');
res.end();
});
var server = app.listen(8081, function () {
var host = server.address().address;
var port = server.address().port;
console.log("Example app listening at http://%s:%s", host, port);
});

How do I send images and javascript files to the browser using Node js

I have created a Node.js server that worked well when the Javascript was part of the HTML page. I moved the JS to another file and added some images. Now it won't load the images or the JS into the browser. However, the web page renders perfectly when I open the web page directly. This is what my server looks like:
app.get('/',function(req,res){
res.end('Hello World!Go to /map to see the google map');
});
app.get('/map',function(req,res){
var conn;
//images must be sent to the client from the server...
res.sendfile(__dirname+'/client/google_maps.html');
//receiving requests from jQuery
});
I am not using the Express project structure or the Express middleware or Express configuration to do this.
If that's all your code, I think the problem you met is reasonable. You didn't tell your server how to respond your images and scripts when browser requested. For example in your google_map.html file you have <script src="myjs.js"></script>, then your browser will ask your node application to give the content of myjs.js but your server don't know how to deal with it.
You could try to add code like below to see if it helps.
app.get('/myjs.js', function (req, res) {
res.sendfile(__dirname + '/myjs.js');
});
As dimadima said, Express provides a module to handle static files that you can use like
app.use(express.static(__dirname + '/public'));

Static image file is invisible in node.js/express

The following code is an exemple of code to serve static files in express on node.js. If I ask the server a .css file there is no problem, but if I ask an image such as a jpg or png, it loads a white page (no /GET error or anything, a simple white page). In my developer tool in my browser I see the following warning: 1Resource interpreted as Document but transferred with MIME type image/jpeg. How can I fix this?
I am using cloud9ide and express 2.4.6
var express = require("express"),
app = express.createServer();
app.use(express.static(__dirname + '/static'));
app.get('/', function(req, res){
res.send('Hello World');
});
app.listen(process.env.C9_PORT);
It looks like the file in question is not in JPEG format. Can you save that URL as a file using wget, curl or similar tools and open that file in a text editor?
A valid JPEG file should look like binary garbage and should have "JFIF" signature string close to the beginning (byte offset 6 I think).
it is possible that the file contains an error message instead of valid JPEG data.
It seems to be a bug from cloud9 ide. I tried my code locally and it worked. There is a ticket open on cloud9ide at: http://cloud9ide.lighthouseapp.com/projects/67519/tickets/390-get-png-image-not-working-in-preview-mode#ticket-390-4

Categories