I'm trying to develop a file management web app and I want to add an option to preview files before downloading it I'm using Node Js express, is there any way to implement that.
or just a small guide because I tried all the possible solutions on the net but it's not working
Yes you can preview it, you just need to add declaration for your file path and you can access directly from url
const app = express();
const __dirname = path.resolve()
//public is the name of folder where your file is being stored
app.use("preview",express.static(path.join(__dirname,"public")));
So you can directly access the file using url expressurl/preview/filename and preview it wherever you want
You can use the built in node filesystem module fs to read and write to files on the server. So in your case you want to read the content of files, so something like this:
var fs = require('fs');
fs.readFile('my-file.txt', 'utf8', function(err, data) {
if (err) throw err;
console.log(data);
});
Related
I want to get an array of file names from my project public/logos folder. I am using create-react-app template and as you guess, I can not use const fs = require('fs') in browser after project start.
So, is there any way to fill an array right after npm start command and getting file names array from folder or am I out of context?
const fs = require('fs')
const path = require('path')
const appRoot = require('app-root-path').path
const getNames = () => {
fs.readdir(path.join(appRoot, "public", "logos"), (err, files) => {
return files
})
}
Although the Sathishkumar is correct, it's not the only way: having an application server just for reading static images can be too much in many situations.
What you can do is to handle this by change the webpack configuration (this requires you eject first so be really careful).
From webpack you have all of the Nodejs features available but you must make those changes static for the webapp.
An idea:
manually copy with html-copy-plugin every image in the dist folder
read every image file in that folder from node and generate a list of image names
put the list of images as a global variable in your bundle by using webpack DefinePlugin
Now you will be able to read images names from this new global.
Note: this will not be a dynamic read of resources in a folder. If add/remove images you will be forced to repeat the build process of the app.
Yes. It is out of context. Not possible in browser-based JS application. You can't access the file system using Javascript in the browser.
You can use a NodeJS(or any other language for the same) to create a REST API as you mentioned which will return the files list and then can consume it(APIs like fetch or package - axios) in the frontend. This is the preferred way of doing.
If you need to read the files from file system you need to start server, like express, and then read this files on the server by request from frontend or by the link you pasted in your browser address field.
Hello I cannot access this file, I am getting module not found error, I tried both the root and public folder, can please someone assist with that?
app.use(express.static('public'))
var file = require('public/test.png');
require is specific for nodejs modules, and can't be used for static files
app.use(express.static('public')) Make that public folder is now accessible through your API via yourpath/test.png
What you want is to load image, so you can use it inside a function, therefore, you should use fs
fs.readFile('public/test.png', function(err, data) {
if (err) throw err; // Fail if the file can't be read.
//Do whatever you want with 'data'
});
require is a reserved word, intended to load other nodejs modules but not your website' static assets.
If you follow the steps in the docs, once you do app.use(express.static('public')) your app will automatically serve static files under your "public" folder.
If you need to load a file for some reason, take a look at the fs module.
I want to get png image by path like this:
http://127.0.0.1/image/line.png
how do I write the app.get() function to match the path and get the filename, then read the file in location and return it?
I am new to express in node.js.
If you are using ExpressJS 4.0. You can do it by my example below:
app.get('/image/:fileName', function(req ,res) {
var path = require('path');
var file = path.join(PATH_TO_IMAGE_DIRECTORY, req.params.fileName);
res.sendFile(file);
});
Please make note that you should change PATH_TO_IMAGE_DIRECTORY by your image directory location. For example: __dirname, '../upload'
I shared a full post about upload and get the uploaded images with nodejs and expressjs 4.0: HOW TO UPLOAD FILES WITH NODEJS AND EXPRESSJS 4
I am building a node.js application that uses pdf.js to read pdf files, but much like other js, pdf.js does not allow cross origin requests. So, I need a way to save files selected with a file input to my pdf directory. I'm not so great with node so make it as simple as possible if you can.
Here is a basic idea of what you need:
1st, require and use module 'connect-multiparty'. This will expose the req.files object in node.
var multipart = require('connect-multiparty');
app.use(multiparty({});
Then, in your controller method, require the 'fs' module, and use it to save the uploaded file.
var fs = require('fs');
fs.writeFileSync("myFileName", req.files.file.ws.path, function(err) {
if(err) { console.log(err); }
else { console.log("file uploaded"); }
});
Being familiar with node will help, but the two basic libraries you need to perform this are the aforementioned https://www.npmjs.com/package/connect-multiparty and http://nodejs.org/api/fs.html
edit: see the link in the comments below. this answer is incomplete and is better explained in the link
I am trying to configure ExpressJS to accept an incoming XML file for parsing. I have read that bodyParser has deprecated support for xml and I simply can't figure out how to make my application accept an incoming xml and store it.
Since the external server requires my site to be live to send the xml file, I have been building using local testing techniques. Namely, I created an upload form that will successfully do what I want it to do, upload an xml file and store it targeting a url.
When I push these changes to the server and target the same URL with the external server, the xml file gets lost in transit and is never stored.
Am I wrong in assuming that this POST coming from another server would automatically get placed into the faxes directory given this line?
In my Express Configuration
app.use(express.bodyParser( { keepExtensions: true, uploadDir: path.join(__dirname, '/faxes')}));
In express.js v 3+ the file upload middleware is removed you have to handle your file with your own .
Here is an example of formidable to upload file in a custom url path
var formidable = require('formidable')
app.post('/xmlpath' ,req, res, next){
var form = new formidable.IncomingForm();
form.keepExtensions = true;
form.parse(req, function(err, fields, files) {
var tempFilePath = files.file['path'],
userFileName = files.file['name'],
contentType = files.file['type'];
// then read your file with fs
// you can also move your file to another location with fs
// by default file will be place to tempFilePath
fs.readFile( tempFilePath, function(err, file_buffer){
// do what you want to do with your file
});
});
});