Path where I store profile pictures is unreachable in production mode
My goal is to upload a profile picture. I did this in development mode using multer in Node.js. Multer asks for a path where to save the new picture.
In development mode, my Angular frontend and my Node.js backend were in the same file (see below for the project structure). The destination path used in Multer worked for development mode.
I then deployed my backend and frontend separately and now this path doesn't work. How can I make sure that the uploaded profile pictures end up in the same map as it did in development?
This is the structure in development mode. SRC map contains the Angular frontend code and backend contains the Node.js backend.
This is the path I used to store uploaded profile pictures with Multer. The problem now is that I deployed my backend and frontend separately to Heroku and so this path doesn't work anymore.
How can I change my path so that my uploaded profile pictures still get added to this assets/images/profile-pictures map?
node.js angular heroku multer
edited Nov 11 at 23:30
Chris
53.9k17114113
asked Nov 11 at 21:46
tilly
304113
add a comment |
My goal is to upload a profile picture. I did this in development mode using multer in Node.js. Multer asks for a path where to save the new picture.
In development mode, my Angular frontend and my Node.js backend were in the same file (see below for the project structure). The destination path used in Multer worked for development mode.
I then deployed my backend and frontend separately and now this path doesn't work. How can I make sure that the uploaded profile pictures end up in the same map as it did in development?
This is the structure in development mode. SRC map contains the Angular frontend code and backend contains the Node.js backend.
This is the path I used to store uploaded profile pictures with Multer. The problem now is that I deployed my backend and frontend separately to Heroku and so this path doesn't work anymore.
How can I change my path so that my uploaded profile pictures still get added to this assets/images/profile-pictures map?
node.js angular heroku multer
edited Nov 11 at 23:30
Chris
53.9k17114113
asked Nov 11 at 21:46
tilly
304113
1
If you deployed them to separate instances, you can't. How come you want them in the assets folder?
– user184994
Nov 11 at 21:55
Well, I don't know how else I could display them in my angular front end. What are my options?
– tilly
Nov 11 at 21:56
1
Store them in a folder somewhere on that server, and use express or whatever web framework you're using to expose any images within that folder. You can then use that URL instead, i.e. from angular you will have<img src="http://yourbackend.com/yourfolder/yourimage.png" />
– user184994
Nov 11 at 22:05
Ok, I'll give it a shot
– tilly
Nov 11 at 22:30
Unfortunately, that's not going to work on Heroku. Please see my answer for details.
– Chris
Nov 11 at 23:28
add a comment |
My goal is to upload a profile picture. I did this in development mode using multer in Node.js. Multer asks for a path where to save the new picture.
In development mode, my Angular frontend and my Node.js backend were in the same file (see below for the project structure). The destination path used in Multer worked for development mode.
I then deployed my backend and frontend separately and now this path doesn't work. How can I make sure that the uploaded profile pictures end up in the same map as it did in development?
This is the structure in development mode. SRC map contains the Angular frontend code and backend contains the Node.js backend.
This is the path I used to store uploaded profile pictures with Multer. The problem now is that I deployed my backend and frontend separately to Heroku and so this path doesn't work anymore.
How can I change my path so that my uploaded profile pictures still get added to this assets/images/profile-pictures map?
node.js angular heroku multer
edited Nov 11 at 23:30
Chris
53.9k17114113
asked Nov 11 at 21:46
tilly
304113
My goal is to upload a profile picture. I did this in development mode using multer in Node.js. Multer asks for a path where to save the new picture.
In development mode, my Angular frontend and my Node.js backend were in the same file (see below for the project structure). The destination path used in Multer worked for development mode.
I then deployed my backend and frontend separately and now this path doesn't work. How can I make sure that the uploaded profile pictures end up in the same map as it did in development?
This is the structure in development mode. SRC map contains the Angular frontend code and backend contains the Node.js backend.
This is the path I used to store uploaded profile pictures with Multer. The problem now is that I deployed my backend and frontend separately to Heroku and so this path doesn't work anymore.
How can I change my path so that my uploaded profile pictures still get added to this assets/images/profile-pictures map?
node.js angular heroku multer
node.js angular heroku multer
edited Nov 11 at 23:30
Chris
53.9k17114113
asked Nov 11 at 21:46
tilly
304113
edited Nov 11 at 23:30
Chris
53.9k17114113
asked Nov 11 at 21:46
tilly
304113
edited Nov 11 at 23:30
Chris
53.9k17114113
edited Nov 11 at 23:30
Chris
53.9k17114113
edited Nov 11 at 23:30
Chris
53.9k17114113
53.9k17114113
asked Nov 11 at 21:46
tilly
304113
asked Nov 11 at 21:46
tilly
304113
asked Nov 11 at 21:46
tilly
304113
304113
1
If you deployed them to separate instances, you can't. How come you want them in the assets folder?
– user184994
Nov 11 at 21:55
Well, I don't know how else I could display them in my angular front end. What are my options?
– tilly
Nov 11 at 21:56
1
Store them in a folder somewhere on that server, and use express or whatever web framework you're using to expose any images within that folder. You can then use that URL instead, i.e. from angular you will have<img src="http://yourbackend.com/yourfolder/yourimage.png" />
– user184994
Nov 11 at 22:05
Ok, I'll give it a shot
– tilly
Nov 11 at 22:30
Unfortunately, that's not going to work on Heroku. Please see my answer for details.
– Chris
Nov 11 at 23:28
add a comment |
1
If you deployed them to separate instances, you can't. How come you want them in the assets folder?
– user184994
Nov 11 at 21:55
Well, I don't know how else I could display them in my angular front end. What are my options?
– tilly
Nov 11 at 21:56
1
Store them in a folder somewhere on that server, and use express or whatever web framework you're using to expose any images within that folder. You can then use that URL instead, i.e. from angular you will have<img src="http://yourbackend.com/yourfolder/yourimage.png" />
– user184994
Nov 11 at 22:05
Ok, I'll give it a shot
– tilly
Nov 11 at 22:30
Unfortunately, that's not going to work on Heroku. Please see my answer for details.
– Chris
Nov 11 at 23:28
1
1
If you deployed them to separate instances, you can't. How come you want them in the assets folder?
– user184994
Nov 11 at 21:55
If you deployed them to separate instances, you can't. How come you want them in the assets folder?
– user184994
Nov 11 at 21:55
Well, I don't know how else I could display them in my angular front end. What are my options?
– tilly
Nov 11 at 21:56
Well, I don't know how else I could display them in my angular front end. What are my options?
– tilly
Nov 11 at 21:56
1
1
Store them in a folder somewhere on that server, and use express or whatever web framework you're using to expose any images within that folder. You can then use that URL instead, i.e. from angular you will have
<img src="http://yourbackend.com/yourfolder/yourimage.png" />– user184994
Nov 11 at 22:05
Store them in a folder somewhere on that server, and use express or whatever web framework you're using to expose any images within that folder. You can then use that URL instead, i.e. from angular you will have
<img src="http://yourbackend.com/yourfolder/yourimage.png" />– user184994
Nov 11 at 22:05
Ok, I'll give it a shot
– tilly
Nov 11 at 22:30
Ok, I'll give it a shot
– tilly
Nov 11 at 22:30
Unfortunately, that's not going to work on Heroku. Please see my answer for details.
– Chris
Nov 11 at 23:28
Unfortunately, that's not going to work on Heroku. Please see my answer for details.
– Chris
Nov 11 at 23:28
add a comment |
1 Answer
1
active
oldest
votes
The filesystem that Heroku provides is ephemeral: any changes you make to it will be lost the next time your dyno restarts. This happens frequently (at least once per day).
Instead of storing uploaded files on the local filesystem, Heroku recommends storing them on a third-party service like Amazon S3. The multer-s3 library should let you do that fairly easily.
Once the files have been stored you can access them via Amazon's SDK or, if you've configured your uploads accordingly, via HTTP. Regular HTTP access can be authenticated or anonymous.
answered Nov 11 at 23:27
Chris
53.9k17114113
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253568%2fpath-where-i-store-profile-pictures-is-unreachable-in-production-mode%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The filesystem that Heroku provides is ephemeral: any changes you make to it will be lost the next time your dyno restarts. This happens frequently (at least once per day).
Instead of storing uploaded files on the local filesystem, Heroku recommends storing them on a third-party service like Amazon S3. The multer-s3 library should let you do that fairly easily.
Once the files have been stored you can access them via Amazon's SDK or, if you've configured your uploads accordingly, via HTTP. Regular HTTP access can be authenticated or anonymous.
answered Nov 11 at 23:27
Chris
53.9k17114113
add a comment |
The filesystem that Heroku provides is ephemeral: any changes you make to it will be lost the next time your dyno restarts. This happens frequently (at least once per day).
Instead of storing uploaded files on the local filesystem, Heroku recommends storing them on a third-party service like Amazon S3. The multer-s3 library should let you do that fairly easily.
Once the files have been stored you can access them via Amazon's SDK or, if you've configured your uploads accordingly, via HTTP. Regular HTTP access can be authenticated or anonymous.
answered Nov 11 at 23:27
Chris
53.9k17114113
add a comment |
The filesystem that Heroku provides is ephemeral: any changes you make to it will be lost the next time your dyno restarts. This happens frequently (at least once per day).
Instead of storing uploaded files on the local filesystem, Heroku recommends storing them on a third-party service like Amazon S3. The multer-s3 library should let you do that fairly easily.
Once the files have been stored you can access them via Amazon's SDK or, if you've configured your uploads accordingly, via HTTP. Regular HTTP access can be authenticated or anonymous.
answered Nov 11 at 23:27
Chris
53.9k17114113
The filesystem that Heroku provides is ephemeral: any changes you make to it will be lost the next time your dyno restarts. This happens frequently (at least once per day).
Instead of storing uploaded files on the local filesystem, Heroku recommends storing them on a third-party service like Amazon S3. The multer-s3 library should let you do that fairly easily.
Once the files have been stored you can access them via Amazon's SDK or, if you've configured your uploads accordingly, via HTTP. Regular HTTP access can be authenticated or anonymous.
answered Nov 11 at 23:27
Chris
53.9k17114113
answered Nov 11 at 23:27
Chris
53.9k17114113
answered Nov 11 at 23:27
Chris
53.9k17114113
answered Nov 11 at 23:27
Chris
53.9k17114113
53.9k17114113
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253568%2fpath-where-i-store-profile-pictures-is-unreachable-in-production-mode%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
If you deployed them to separate instances, you can't. How come you want them in the assets folder?
– user184994
Nov 11 at 21:55
Well, I don't know how else I could display them in my angular front end. What are my options?
– tilly
Nov 11 at 21:56
1
Store them in a folder somewhere on that server, and use express or whatever web framework you're using to expose any images within that folder. You can then use that URL instead, i.e. from angular you will have
<img src="http://yourbackend.com/yourfolder/yourimage.png" />– user184994
Nov 11 at 22:05
Ok, I'll give it a shot
– tilly
Nov 11 at 22:30
Unfortunately, that's not going to work on Heroku. Please see my answer for details.
– Chris
Nov 11 at 23:28