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
Related
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.
Hey so anytime I place something in the "public" dir of my express directory, it automatically has a link on my webpage that I like. For example, going to https://website.com/image.jpg will allow me to download an image, and https://website.com/object.json will allow me to download a JSON file, without me having to do anything aside from place these files in my public folder. This is super convenient since I have another script that could be making a bunch of different things that I won't want to specify by name on my server every time I change something.
What I would like to do is modify this serve command so that when I want to retrieve an image, instead of automatically downloading it, it displays it in the browser. This should be as simple as adding an <html> </html> around anything in the public folder that has the .png file ending. Likewise, I would like to stringify any JSON file so that it comes out in a readable format (JSON.stringify(object,null,2));
Basically, I would like to be able to just put something in my public folder and automatically be able to access it in a desirable way based on its file extension. In these two cases the "desirable" way is not downloading the file, but displaying it in-browser in a human-friendly format.
display of static files in nodejs is not a trivial behavior. you'd usually set a folder as static which becomes public and end url fragment is same as file name. Using Express with Nodejs, it looks like this.
app.use(express.static(path.join('.', 'public')));
Because you don't like default implementation, you can rather parse the url manually, check if a file by that name exists, wrap it around appropriate html, and throw it as response.
var fs = require('fs');
app.use(function(req, res, next){
fileName = req.url.substring('https://website.com/'.length);
if(fs.existsSync('public/'+fileName){
if(fileName.substring(fileName.lastIndexOf('.')+1)=='jpg')
res.send('<html><body><img src="public/'+fileName+'"></img></body></html>')
})
As you can see, all urls are checked for files. You can also use a router while placing all public files under some subdirectory like '/public'
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);
});
I’m having an issue with rendering background images referenced in my CSS.
The following is logged in the web inspector
Resource interpreted as Image but transferred with MIME type text/html.
The background image works fine locally - it’s only when it’s deployed to heroku that it’s not working.
I have my front-end assets in a /public dir.
app.use(express.static(path.join(__dirname, 'public’)));
I am using component to build up my frontend, so I’m referencing my built assets (CSS/JS) from public/build/ which is all working fine.
I’ve looked at express-setting-content-type-based-on-path-file? and How do I set a MIME type before sending a file in Node.js?, but have had no luck.
I’ve also looked at the res.set() api and tried to add this to my router.
// referencing my image build/background/images/my-image.png
app.get('/build/background/images/:file', function(req, res) {
res.set('Content-Type', ‘image/png’);
res.send(req.params.file);
});
The above has in fact changed the content type from ‘text/html’ to ‘image/png’, however the image does not display locally or on heroku.
The thumbnail is also broken in web inspector, yet the path to the image is correct.
In ‘Finder’ if I inspect the image - it’s says it’s kind is 'Alias'.
When you call res.send();, it's sending the literal value of whatever you pass to it. So in this case, you're sending the string 'my-image.png' to the client with Content-Type: image/png. To send the actual contents of my-image.png instead, you might look at using the res.sendfile() method.
Although I've had some great feedback from #mscdex - the issue is a result of the symlinks to background images that are created by component on heroku.
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'));