Ayerbe88
commented
2 years ago Image storage and Backend services
As stated in the description of the task, since the MP (Market Place) project already makes use of Azure to host the application, it would be most convenient to make use of the Azure Blob Storage feature, which is specifically designed to store documents, images and media files.
In order to do this an storage account has to be set in Azure, followed by creating a container with public access level set to Blob. After set up, there are several quickstarts, tutorials and examples that can be used to create the service to manage Blobs, connect to the storage container, upload/download. Since this will be independent of the main API, there is no reason why it must be done in java, nevertheless if chosen to implement in java the following guide can be used.
Along with a wide set of samples to do all operations that will be needed.
The processing of the uploaded images won't be necessary for the purpose of MP, if ever needed see section for creating the computer vision service
As for limitations, using azure blob it doesn't seam to be an issue that either container size or image size would not be enough for the purpose of MP, nevertheless it should be agreed on a maximum size of image to allow upload, maximum characters in name of image, and evaluate if also on maximum number of images per ad.
Frontend
From the frontend side can be used ng2-file-upload, which provides functionality to perform the images upload and manage them with things like drag and drop area, list of uploads to be performed with option to cancel and such.
Otherwise it can be implemented without further libraries as for example shown in this tutorial
Also a tutorial for doing the same Vue3 image upload with drag and drop included in Vue3
In either case Styles will have to be implemented, or used from external libraries, in order to present the images to be uploaded and later same component to be used to display images in the detail view. There is a great amount of samples available to use, it's a matter of deciding how we want to present the images. A suggestion for the detail view, and adaptable to the creation view, would be to use a carousel showing the active image (without cycling) and flexible horizontal list of all the images in small thumbnails. See link for example with bootstrap
We have to research how to properly upload images from the user. Apparently the way to best store images is not to save them in the database but save a pointer (i.e. URL) in the database and store the image itself on a hoster. Since we're on the Azure platform, this article might prove useful.
The following points also need to be researched:
The results should be documented as a comment here and a ticket should be created (unless it already exists).
Timeboxed: 1/2 Day