I am building an app using angular2 and I want to keep a folder named as 'uploads' at the root of my application. However since in angular the current root is 'src' it does not let me access images inside the uploads folder.
If I try to keep 'uploads' directory inside the src folder then everytime I upload a file to it, it rebuilds the application and refreshes the page. I would want to keep it in suchaway that angular cli doesnt refresh the application in case file upload happens.
I want to access the url like : http://localhost:4200/uploads/xyz.jpg in angular2 app
Thank you
The angular app is a front-end app. It is not meant to be used as file storage. The file storage should be done by a back-end app that will serve the uploaded files to the front-end app.
Using your Front-end
Angular-cli does not compile any folder outside app or assets, so, you need to place the folder inside app or assets.
To access directly, place inside assets and access like localhost:4200/assets/uploads/xyz.jpg.
Remember that you need to be careful because if you use a git versioning system, when you make a pull in your production env, every file uploaded inside assets/uploads will be overwritten by the new version.
Using your Back-end
Put the upload file outside the angular app so when you build or update the angular app nothing will be lost. And use a back-end to serve the files.
You should place the upload folder outside the angular app and serve it using your nodeJs app. Use the static feature of expressJs to serve your file in some endpoint like localhost/uploads/xyz.jpg (if your nodejs is in localhost). So, you don't touch the angular-
Related
Hi I implemented an image upload system on my website but now I don't know how to link to that image.
My root directory has a client folder, for my vuejs app, and a server folder, for the back end logic.
When users upload a file, the file goes to a public folder under the server folder. This is where I got stuck.
How do I then link to that uploaded image from my vuejs app that is in the client folder.
Keep in mind that my express app is running on port 5000 while my vuejs app is running on port 8080.
In my img tags I tried linking to the image by using "http://localhost:5000/public/image/imagename" and "http://localhost:5000/image/imagename" but no luck
In your express.js logic you should expose your public folder
app.use('/public', express.static(`${__dirname}/public/`));
I'm supposing your express entry point is in the same backend folder as '/public/ folder.
And then you can just access it like you've tried before on: http://localhost:5000/public/image/imagename
I am creating an react app using create-react-app for school management system. I had used node js for creating api end point. I am able to store student detail and can fetch it back to display in react.
I had created an endpoint for uploading student images, which is also working perfect.
I had stored the image on node js server public folder. I know it should be on client public folder but if another application for example android or angular or vue application tries to call the same image will not get as it will be stored in react public folder.
So how could I solve the image problem?
You've done all the logic right, just add image URL to user profile, for example :
imageUrl: 'https://{your API URL}'
or the better way to upload all images on file server like S3 or Google Cloud Storage, and save only link to image on user profile
I am new to hosting and it would be of immense help to me if somebody can explain in very detail.
I have following questions:
I have front end using react app and backend using expressjs and mysql. i have a working simple application in my computer . I start backend and front end using local host and they work perfect . when I bought hosting which supports nodejs , I don't know where to place the front end file and backend file .
npm run build - > builds a react app . in cpanel - file manager , which file I should place in public html . front end code or backend express code
I placed html code in public_html but how to start interacting with server.
When I used fetch("http://lcoalhost:30000") to fetch I couldn't get the app.get("/",(req ,resp)) working ..
I am really confused . if somebody can explain in detail how to start uploading both the react and express file and the location to place these files.
Upload your react app build files inside public_html. Don't forget to change the localhost url to your express app to your actual url.
Create a folder outside public_html and upload your express app in it.
Create a nodejs app (using cPanel, if it has). Use the express folder and a url different from home (like /api) during creation.
I am working on my first ever MERN stack web app. I finished development and trying to host in VPS.
Everything working fine. But, I am not able to view the uploaded images. I share you the few details about the project structure.
React app is build for production and kept in public folder.
Upload folder is created where user uploaded images are kept and its location is stored in DB. (ex: /uploads/user1/img1.jpg). Using Multer to handle image upload.
This is the folder structure of my Express server which also servers static files.
-MAIN_EXPRESS_APP_FOLDER
------Routes
------Public
------Uploads
------package.json
To make public and upload static, following codes are added in Server.js file:
app.use(express.static(path.join(__dirname,'/public')));
app.get('/*',(req,res)=>{
res.sendfile(path.join(__dirname='public/index.html'));
})
app.use('/uploads', express.static('uploads'))
I am able to access my web app and also i can insert data in DB. Image upload is working as expected. But, Express not serving uploaded images.
What could be problem?
As for static content you set the folder to be public now what i think is you should move your uploads folder inside public and try to access the images hope they will be served currently your application is not allowing to server data else then public directory hope it will help you
I work on an webapp which use REACT JS (with NODE, port 3000) and an API (with NODE JS, port 3100).
All requests made by client passing throught my API.
In this app, client could be able to listen mp3s downloaded and stored into my API. I made different schemas but I don't know which one can work.
SCHEMA 1.
REACT send parameters to API
API download the file and store it on a temporary directory
API send the URL (like : http://localhost:3100/sound/exemple.mp3) to REACT
REACT use that URL in 'src' of the AudioPlayer
Temporary files are delete with a CRON setting up on API server
I tried that solution but I have an error when I want to play the sound
(error: Can't GET /URL)
SCHEMA 2.
REACT send parameters to API
API download the file and store it on a temporary directory
REACT download the file from API and store it into public directory (by using express static)
REACT use that URL in 'src' of the AudioPlayer
Delete the file twice (API and REACT)
Another solution is to download the file directly from my source on REACT. But I need to hide the URL of the source (that why I pass throught my API).
Maybe there are others solutions ?