Recientemente me ha tocado que en una aplicación web en la que estoy trabajando para un cliente necesito subir imágenes desde cierto rol de usuario y estas mismas imágenes se deben poder visualizar.
Recently, I had to upload images from a certain user role in a web application I'm working on for a client, and these same images must be viewable.
https://images.hive.blog/DQmYjnv6KhzUWdA8pYYQock5HcZBwZsCSqAdUMLjqxpAY33/imagen1.jpg
El inconveniente que estábamos afrontando era que no podíamos utilizar el servicio de firebase para almacenar y subir documentos pero por suerte el cliente decidió comprar el servicio y lo estuve implementando en estos días lo cual resultó muy sencillo de aplicar ya que permite utilizar el servicio a través de rutas creadas dentro de carpetas generales.
The problem we were facing was that we couldn't use the Firebase service to store and upload documents. Luckily, the client decided to purchase the service, and I implemented it recently. It turned out to be very easy to implement, as it allows the service to be used through paths created within general folders.
https://images.hive.blog/DQmQS1W1eCk2573EyrSHFb2PmdtE4vH1pf1DgAfn5NAPjA2/imagen3.jpg
Me refiero a que una vez que se sube la imagen se puede crear una url que haga referencia a dónde va a estar alojada esa misma imagen y esa misma URL se puede almacenar como una cadena de texto en la base de datos de manera que lo único que necesito mostrar desde el lado web es la url donde se ubica dicha imagen.
Lo que tuve que implementar en la aplicación web es limitar el tamaño de la imagen y la resolución para no abusar de servicio que nos brindan y evitar que el cliente tenga que pagar mucho más de lo esperado.
What I mean is that once the image is uploaded, a URL can be created that references where that same image will be hosted, and that same URL can be stored as a text string in the database, so that the only thing I need to display on the web side is the URL where the image is located. What I had to implement in the web application is to limit the image size and resolution so as not to abuse the service they provide and prevent the client from having to pay much more than expected.
https://images.hive.blog/DQmdUAE7rfNL7Pb9WQ4riUU2jQhfT69dT95bcpR4mRdwCPs/imagen4.jpg
Estas imágenes lo único que hacen es crear una URL que en un principio lleva el nombre de la sección a la cual están haciendo referencia seguido de la fecha y el nombre actual que conlleva la imagen cuando fue subida desde la computadora del usuario.
These images simply create a URL that initially contains the name of the section they are referencing, followed by the date and the current name of the image when it was uploaded from the user's computer.
https://images.hive.blog/DQmSznjyXakbMLsMKJSGfcXXx5LHYGX9H7kEwQcKEWw4Smr/imagen5.jpg
Por lo demás se encarga firebase y en el código se podrá ver que relativamente es muy sencillo no requiere nada más que instalarlos paquetes que ofrece el mismo firebase y crear las funciones asíncronas para luego guardar la URL dentro de una matriz.
Firebase takes care of the rest, and you can see in the code that it is relatively simple; it requires nothing more than installing the packages offered by Firebase itself and creating the asynchronous functions to then save the URL in an array.