# 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.

<figure><img src="https://1987892552-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBsBTgwgH8PgXSXzgW9sj%2Fuploads%2Fry9DZEzDWYFwmpXuzwlA%2Fimage.png?alt=media&#x26;token=3b902125-a0f1-48c7-acf1-b29c3d1341e8" alt=""><figcaption></figcaption></figure>

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:

{% code title="store/models.py" %}
```python
image = models.ImageField(null=True, blank=True)
```
{% endcode %}

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

<figure><img src="https://1987892552-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBsBTgwgH8PgXSXzgW9sj%2Fuploads%2FqLoHtJE0L0E88vDlRbWE%2Fimage.png?alt=media&#x26;token=6f16c252-5aea-49f5-bfc4-8fd5c555f582" alt=""><figcaption></figcaption></figure>

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

{% code title="cmd prompt" %}
```
pip install pillow
```
{% endcode %}

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

{% code title="cmd prompt" %}
```
python manage.py makemigrations
```
{% endcode %}

{% code title="cmd prompt" %}
```
python manage.py migrate
```
{% endcode %}

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.

<figure><img src="https://1987892552-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBsBTgwgH8PgXSXzgW9sj%2Fuploads%2FgVtdnUap4AAuAk6Swakx%2Fimage.png?alt=media&#x26;token=90a53aee-c96f-4404-b04b-f0ae78c18f9b" alt=""><figcaption></figcaption></figure>

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:

{% code title="models.py" overflow="wrap" lineNumbers="true" %}
```python
    def __str__(self) :
        return f"Name: {self.name}, Category: {self.category}, Type: {self.product_type}, Price: {self.price}" 	
```
{% endcode %}

<figure><img src="https://1987892552-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBsBTgwgH8PgXSXzgW9sj%2Fuploads%2F1q6P8SgSK7IwR6BtFz4Y%2Fimage.png?alt=media&#x26;token=9bc88fc4-25bd-4f10-aed3-99ee9ecdd588" alt=""><figcaption><p>Now, when adding a new product notice how the name on the title displays its name, category, type, and price</p></figcaption></figure>
