5.3. Image field for product

At the moment, when we add a new product, we have to type the name of the product image into a text box. This is not an ideal way to add images, as it can lead to mistakes and isn't very efficient.

To improve efficiency and reduce the potential for errors, it's recommended to utilize a drag-and-drop interface for uploading product images. This way, users can simply drag their image files from their computer and drop them into the designated area on the web page. This approach not only saves time but also enhances the user experience by making the process of adding images to products more intuitive and less prone to mistakes.

In order to do this, we will change the image attribute of the Product class to be a ImageField instead of a CharField like so:

store/models.py

image = models.ImageField(null=True, blank=True)

However, when trying to run the file this error message will appear (if you don't have the pillow library installed):

This occurs we need the pillow library to be installed when utilizing Image Fields on django, so we will install it.

cmd prompt

pip install pillow

After doing so we will migrate the changes made to the main database through the cmd prompt inside the ecommerce folder :

cmd prompt

python manage.py makemigrations

cmd prompt

python manage.py migrate

Upon accessing the Add Product section of the admin page, we now have the convenience of dragging and dropping product images directly from your computer.

Lastly, in order to facilitate the visualization of the product, we will change the display of each added product to show its name, category, type, and price by adding the following code inside the class Product:

models.py

    def __str__(self) :
        return f"Name: {self.name}, Category: {self.category}, Type: {self.product_type}, Price: {self.price}" 	

Now, when adding a new product notice how the name on the title displays its name, category, type, and price