Innovación en Nuevo León y el mundo

Newsletter de Innovación Segunda Edición

A web-based tool with graphical interface to manage bulk images effectively, saving 2-3 hrs. of release time per page update

Author: Sagar Papneja | Nagarro | México



In the uncertain times of this pandemic, retailers are adopting various technological tools to sustain and grow their businesses. The Nagarro Mexico team is working on an innovative tool for a leading market player that allows the end client to compare different options from a specific brand when looking for a new product. This process requires regular content updates and multiple image uploads to the origin API using a curl command. As per the workflow, the development team had to upload each image manually and individually. This made the image uploading time extremely time consuming.


The client wanted to resolve two issues. Firstly, there was no multi-image uploading option and secondly, there was no way to visualize/verify the images to be uploaded by the user. This was posing a problem, especially when bulk images had to be uploaded one by one. It was difficult to keep up and not miss/repeat any of image files.


The Nagarro Mexico team took upon themselves to remedy this scenario by creating a web-based tool that allows easy bulk upload of images in multiple formats. The application uses the existing API to handle all image upload and storage needs. The application uploader, along with an MVC graphical interface is fast and effective, which saves significant time. The process is now faster, accurate, and more intuitive.



The tool allows to complete the task with two views, “list view” and “file view”. The list view has a user-friendly interface for adding images. The images are available in a review list and the tool allows to define the location of the root folder. In this view, the user can upload one or more files in a single location in an easy way.


The file view is a bit more complex. It is inspired by the “Mac OS file Manager”, using a files and folders management interface, where the user can look at the addresses in which the files will be located (once sent). Since the API doesn’t prevent the file to be overwritten, a feature was added to detect the already occupied API addresses. Every time a file is uploaded, the tool makes a HEAD request to the expected final address.

If the file has been used, the tool alerts the user by highlighting the specific file in red color. Once the user presses the submit button, a PUT request is made to the API in parallel (for each file with non-repeated address). The user knows the file’s condition through a notification system, displaying the addresses of the resulting images. These addresses can be used directly in a system to access the images.  


The web-based tool now saves two to three hours of precious time for each upload task, increasing productivity.


Technologies used: React, AWS CloudFont, SPAUTH (to be used only within the client VPN).