I'm uploading files from Angular 2 with ngx-uploader and storing them on backend (nodejs/feathers) with multer. Now I'm having trouble to reach and display them, for now im just trying to display image, but actually i just need to see how paths work so i can reach the .pdf files.
As a file path im getting this: resources\\uploads\\quality-docs\\FILENAME so i tried to reach them like this: http://localhost:3030/resources/uploads/quality-docs/FILENAME but it doesnt work, it gives me 404. Just realised when i put files in static, public folder, i can reach it like http://localhost:3030/FILENAME ... but is there a way for it to not be in public?
This is how my backend structure looks like:
Any ideas/sugestions are welcome, is this even a right way to go? Plus if any of you have idea how to delete files from server?
Assuming that you are using express in your node app, you need to include a static route to the resources/uploads directory (express static routes) like the following:
app.use(express.static('resources/uploads'))
For deleting files from a node application use unlink fs.unlink
Related
I am building a React application which needs to display images dynamically which are stored, by the thousands, on a server-side file system. All of my attempts to successfully implement this have failed, including many which were taken from responses to similar questions.
Some details:
I used create-react-app to initialize my application. I am running in development mode (have not run npm-build). I'm using Express.js (Node.js) as a web-server, which I interact with through a proxy (only '/api' http requests use the proxy). My js code which attempts to 'require' the images is in the 'src' folder. The images are located in an 'images' folder in the default 'public' folder.
I thought I had found the solution when reading this page from create-react-app, as it states to use the public folder when 'You have thousands of images and need to dynamically reference their paths'. The page further instructs to use '%PUBLIC_URL%' or 'process.env.PUBLIC_URL' to access the 'public' folder. When using either of these I receive an 'Error: Cannot find module' message. Upon checking I notice that 'process.env.PUBLIC_URL' contains an empty string, and quickly notice that PUBLIC_URL is ignored in development mode.
I find this to be tremendously confusing, given that the 'Using the Public Folder' page is apparently describing the development phase of production, and yet it advises the use of something which is meaningless during development. Adding to my confusion, it appears as if the contents of that page resolved the issue for nearly all of those who have encountered a similar requirement in the past (example: 1, example: 2; both fail for me). Likewise, all attempts to to construct relative paths to the 'public' folder from the 'src' folder have yielded error messages. Failed code example:
let img = process.env.PUBLIC_URL + '/images/Team.jpg';
<img src={require(`${img}`)} alt="X" />
Error: Cannot find module '/images/Team.jpg'
I never imagined showing images in React would be so difficult. Any help is truly very much appreciated.
I think you are correct, you just don't need the require, return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; as you can see their docs
If you open in your browser http://localhost:PORT/images/Team.jpg that should open.
That's the reason process.env.PUBLIC_URL is empty in development, because they resolve everything inside this folder directly.
It's a first time I'm doing this so got some trivial (I think) problems with files upload.
I have a pair: Angular 7 app + NodeJS (express) backend. I successfully uploading files (images) through the Angular page, NodeJS save it with correct format, but I don't know what can I do to be able to target just uploaded images in my web-service and where should I store new files. Should it be : src/app/uploads or only src/app ? Can someone explain the idea behind.
Do I need to do any extra actions in Angular? Because it shows me 404 page if I try to target something out of scope of the app.
Thanks!
I think that src directory should store only source code (or something change when you update your version of code)
In my opinion, uploaded file shouldnt be stored in src directory.
Maybe
Root dir
- docs
- migrations
- node_modules
- src
- tmp
- uploaded
.......
I am setting up a Node.JS application using express, and I want domain.tld/hey to serve the public/index/index.html folder on the server (also containing other files such as .css or .js files).
However, I DO NOT want domain.tld/hey/ to work (the / at the end is a problem for me) and in this case, I want to display a custom error page located at public/error/index.html on the server.
Finally, when accessing domain.tld or domain.tld/, I want to display a custom homepage located at public/home/index.html on the server.
To summerize:
domain.tld or domain.tld/ serves public/home/index.html
domain.tld/something serves public/index/index.html
domain.tld/something/ or domain.tld/some/thing serves public/error/index.html
I already tried using express.static('folder', { redirect: false }) but it doesn't display the index.html file and I can't get the other things to work.
I really don't know how to do it!
I fortunately don't have any code to show you guys as this is more a theorical problem, since I am beggining with expressjs.
Thank you very much in advance for your answers, and please don't hesistate to ask for more details if you need some!
I know there are a bunch of questions on this topic but none seem to directly answer my problem.
I am trying to static serve images from NodeJS using ExpressJS. I've already successfully statically served a CSS file using:
this.app.use(express.static(path.join(__dirname, "style")));
and accessing the file at URL/file.css. However when I try and do something similar for images using:
this.app.use('/images', express.static(path.join(__dirname, "images")));
and I try and access the file using URL/images/file.jpg - I just get an error saying
Cannot GET /images/file.jpg
I've also tried variants without the /images/ similar to the way I've done style and get the same problem. Unsure where I'm going wrong.
The answer was obvious but subtle. I was compiling typescript from ./ and putting it into /dist and sass from /style into /dist/style so I put my images folder at the root level, rather than inside dist. Problem solved.
i have set the static web directory for use in my nodejs app:
app.use express.static(process.cwd(), 'www')
This brings up all the static files like css, images etc, when im in the root it works
http://localhost:8124/
however if i go to somewhere like /tags, it deosnt bring up the static files:
http://localhost:8124/tags/
i get 404 error on the console because its trying to access the www folder
with
/tags/www/ ....
im not sure how to solve this problem, thanks
It looks like you're referring to static assets, without leading /, this results in appending relative asset address to the current URL. Instead refer to your static assets with leading /
eg. /www/style.css rather than www/style.css