Path where I store profile pictures is unreachable in production mode











up vote
0
down vote

favorite












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.



enter image description here



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.



enter image description here



How can I change my path so that my uploaded profile pictures still get added to this assets/images/profile-pictures map?










share|improve this question




















  • 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















up vote
0
down vote

favorite












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.



enter image description here



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.



enter image description here



How can I change my path so that my uploaded profile pictures still get added to this assets/images/profile-pictures map?










share|improve this question




















  • 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













up vote
0
down vote

favorite









up vote
0
down vote

favorite











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.



enter image description here



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.



enter image description here



How can I change my path so that my uploaded profile pictures still get added to this assets/images/profile-pictures map?










share|improve this question















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.



enter image description here



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.



enter image description here



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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 11 at 23:30









Chris

53.2k17112112




53.2k17112112










asked Nov 11 at 21:46









tilly

282113




282113








  • 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




    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












1 Answer
1






active

oldest

votes

















up vote
3
down vote













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.






share|improve this answer





















    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',
    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
    });


    }
    });














    draft saved

    draft discarded


















    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








    up vote
    3
    down vote













    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.






    share|improve this answer

























      up vote
      3
      down vote













      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.






      share|improve this answer























        up vote
        3
        down vote










        up vote
        3
        down vote









        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.






        share|improve this answer












        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.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 11 at 23:27









        Chris

        53.2k17112112




        53.2k17112112






























            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            Guess what letter conforming each word

            Port of Spain

            Run scheduled task as local user group (not BUILTIN)