I am trying to send a directory full of files to the client. So far, I have been trying to use the Express JS helper function res.download(). However that is only working for single files. How can I send a full directory from my Node server to the client?
// works when path includes file inside /files
router.get('/points-stats-csv', function(req, res, next) {
var dir = '../public/files/'
res.download(dir, 'points-stats.csv')
})
You can't send a directory.
Directory is a file system structure, and the contents are index and locations on the disk of the files in that folder.
So, like written in the comments, you need to pack (zip) all the files pointed by that folders into a single file, and then send that single file.
Related
Problem: When I try to upload files using postman, files get uploaded to the destination folder. But I want to upload files in destination folder in controller function after performing some operation
How can I store files in the destination folder?
In controller function when I console.log(req.files) I get:
What did I do:
I use multer.memoryStorage() to store files in memory not in destination folder.
And In controller function I get files in req.files
What I want to do:
save each files to destination folder (upload/files)
I have a code that allows me to send files to server folder uploads using multer from react client side the process of sending data to server works perfectly and also getting back the file from server works perfectly.
The client side is running under 3000 and the server is running under 4000 .
the problem that I'm facing right now is displaying the file on the front part for ex an img
<img
src={`http:\\localhost:4000\\server\\${text}`}
className="messageText colorWhite"
alt="img"
/>
the image of the error is below
the text contains uploads/image1.jpg
when I inspect the content I found this
which mean that the image is well called from server side
Could it be possible to help me on this?
Best Regards,
The upload folder which contains the files is not being served up by the server at localhost:4000.
You must server the files in the uploads folder first. For eg in an express server you can access the files by specifying this route
app.get('/uploads/:filename', (req, res) => {
res.sendFile(req.params.filename, {root: path.join(__dirname, '/uploads')});
})
Now setting src=http://localhost:4000\uploads\img.png would get the image img.png stored in the uploads folder
As an alternative solution, you can server up the entire uploads folder by
app.use(express.static("uploads"));
Make sure you specify the full path in "uploads"
In my project I need to store some text files dynamically and end user should be able to download them from browser. I know the best way is using object store like MINIO or S3 but unfortunately the only way I have is to use in memory storage. So what I am trying to do is: I made a public folder and I exposed it using the following code:
var express = require('express');
var app = express();
//setting middleware
app.use(express.static( 'public')); //Serves resources from public folder
var server = app.listen(5000);
it is as simple as that. Then for testing just to make sure I can download and reach a file I created a public folder with t.txt file in it and when I try:
http://localhost:5000/public/t.txt
I get
So why am I not getting it? Also is what I am trying to achieve will be a good match to scenario and is it doable at all?
When you're not specifying a path in app.use(), your app will serve the contents of the directory you're pointing to in express.static() on the root path. Try this:
http://localhost:5000/t.txt
That said, if you want it to be accessible at /public/t.txt, just specify the path:
app.use('/public', express.static('public'))
At first use the following line of code:
app.use(express.static(__dirname+'/public'));
This means that your home directory for static HTML pages is in the "public" folder. Note that the "__dirname" points to the directory of the current js file.
After that, call the following URL from the browser or POSTMAN:
http://localhost:5000/t.txt
As you can see, there is no need to write http://localhost:5000/public/t.txt referring to the "public" folder because you have already specified that in the app.use line.
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.
I am having a hard time to pass a .vtt file from my express server to my react client.
In my express server, I am downloading a subtitle file formated in .srt, I then convert this .srt file to .vtt file, which is the subtitle format that can be read by HTML5.
However, I am wondering what is the best practice to pass this .vtt file to my client. I could have the .vtt file converted to base64, then pass it to my client as a string, OR I could store the .vtt file in my server, and pass its absolute path to my client. What is the best solution? And the more efficient in the point of view of storage?
For the latter solution, I have no idea how to do, especially how to grant my client access to a specific folder, let's say /subs/, located in my backend...
Thanks in advance.
You can use express static to serve subs folder from your server. Take a look at following commands which will serve subtitles folder at /subs.
app.use('/subs', express.static(path.resolve(__dirname, 'path to your subtitle folder')));
The path that you provide to the express.static function is relative
to the directory from where you launch your node process. If you run
the express app from another directory, it’s safer to use the absolute
path of the directory that you want to serve.
Documentation link