Uploaded picture can not be displayed before an angular code new compilation or a server reboot

0
votes

I have no clue left...

Context

A 2 pages Angular application :

  • one page to list pictures (pictures files are store in "assets/picture")
  • one page to upload picture, by post them to a node/express API which is in charge to move picture into "assets/picture" angular folder

Issue

Uploaded picture can not be displayed 1 using src="assets/image/fileName.jpg" (got a 404) before an angular code new compilation or a server reboot 1

Note : I can display a picture preview in upload page by using src="data:image/jpeg;base64..." method 2

Intuition : Im afraid I'm not suppose to upload files in Angular assets folder but somewhere else may be at the root of the node server. Here is my current file organization : 3

Code

Node server

to move picture in angular "assets/image" folder pictureFile.mv('src/assets/picture/'+ fileName);

Angular

<img class="picture" src="'src/assets/picture/'{{fileName}}">

Regards, Valink

1
angularcachingcompilationimage-uploadingfile-access

1 Answers

0
votes

your sources of FE application lie under /src folder. it is also a place where you are trying to save pictures. however the "runtime" application lies under /dist folder. You can save your pictures to runtime folder and it will work as you want as long as you dont rebuild your FE application

pictureFile.mv('dist/assets/picture/'+ fileName);

When you rebuild your appliction with this code it will just rewrite the assets folder. You also can make a trick and save one file to /dist and a copy to /src and it will work in all cases of local development. However it won't do if you try to deploy it somewhere (as your local /src will no longer be updated from the remote server). The correct way would be usage of some persistence like gridFS