Search code examples
angularspringfile-upload

How does uploading and serving images work in web application?


Sorry if this is a wide question but I cannot find answer to it anywhere.

For serving images, what I found was to store the image in the assets folder where the front end is, and the image path in the database, and use this path to show the image.

But, if I wanna upload an image, do I save it in that same assets folder, and send the path to that image to the backend, to save it in the database? and when the image needs to be displayed, I get the path from database, and using this path, i access the uploaded image from assets, and show it in the website?

Is it like this, or the uploaded image is sent in some byte stream or something, to the server, where it stores it in some place, or as bytes in database? and then sends it back to the website, when the image is needed to be displayed?

To simplify what I am saying, lets assume I have a grid of items on a shopping website. The admin can add new items to the list, and of course, he will also upload the image of the item. So when he adds a new item, and uploads its image, the image should be saved in the front end's assets folder, or it should be sent to the server, to be saved somewhere else..? and when the customer browses the website, he sees the item with it's uploaded image retrieved from that place. I do not know how it works, can someone please tell?

I am using a spring boot backend and an angular ssr (universal) front end, in my example.

so like the front end and backend are decoupled and will probably be hosted using different websites.

sry add picture on the wrong post..


Solution

  • Your Frontend send the Picture as Bytestream to your BackendService where your BackendService saves this as Picture in a specific folder.

    If you were to save the images in your frontend assets folder, you would have to rebuild the app every time.

    You then save the image path in the database alongside the other information.

    If you now want to load the resource, first ask the database for the information. Then you get the image path in the response, which you then use to load the image from the backend and display it in an img tag [src] ...

    Hope you can understand this, feel free to ask

    diagramm