Path where I store profile pictures is unreachable in production mode












0














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
















0














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














0












0








0







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.9k17114113




53.9k17114113










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














  • 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


















3














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


    }
    });














    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









    3














    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


























      3














      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
























        3












        3








        3






        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.9k17114113




        53.9k17114113






























            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

            Full-time equivalent

            さくらももこ

            13 indicted, 8 arrested in Calif. drug cartel investigation