CODEWITHSUNDEEP
node.jsangular
Vishal Wadhawan
Vishal Wadhawan

Reputation: 1085

How to create uploads folder in angular 2 app?

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

Upvotes: 0

Views: 1313

Answers (1)

Bruno João
Bruno João

Reputation: 5525

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-

Upvotes: 1

Related Questions