Lesson 33 - Image Upload

LEARN

Office Hours

• If you need help please attend office hours
• MWF 1:30-2:30 by Zoom
• Zoom: https://unco.zoom.us/j/99180652183
• Email: mark.seaman@unco.edu

Today

• Uploading Images
• Create Image Objects
• Using Images
  • Author profile photo
  • Book cover
  • Images in Chapters
• Superhero images

How To Video

by John Elder

This is the fastest way to build an image upload utility.

Code For Image Upload

Django model ImageField is used to upload images

book/models.py

python class Image(models.Model): image = models.ImageField(null=True, blank=True, upload_to="images/") title = models.CharField(max_length=200)

Settings for Storage

Set upload directory and URL

python MEDIA_URL = '/media/' MEDIA_ROOT = BASE_DIR / "media"

Generate Code for Image

• Run the code cloner to produce image files.
• Delete views and templates for Detail and Edit

Form For Image Upload

Django model ImageField is used to upload images

templates/image_add.html

```html

{% csrf_token %} {{ form.media }} {{ form.as_p }} Save Record

```

Views For Image Upload

Add and list but no edit view

book/views_image.py

```python class ImageListView(ListView): template_name = 'image_list.html' model = Image

class ImageCreateView(LoginRequiredMixin, CreateView): template_name = "image_add.html" model = Image fields = ['image', 'title']

class ImageDeleteView(LoginRequiredMixin, DeleteView): model = Image template_name = 'image_delete.html' success_url = reverse_lazy('image_list') ```

URLs For Image Upload

Django model ImageField is used to upload images

book/urls.py

python path('image/', ImageListView.as_view(), name='image_list'), path('image/add', ImageCreateView.as_view(), name='image_add'), path('image/<int:pk>/delete', ImageDeleteView.as_view(), name='image_delete'),

Views For Image Display

Django model ImageField is used to upload images

templates/image_list.html

```html

{% for image in object_list %} {% endfor %}

{{ image.image.url }}

Delete

```

BUILD

Demo Code

• Demo Code
• Follow along with my source code
• Clone my repo and edit the code

Final Project

• Due on December 3
• Requirements for Projects 10, 11, 12, 13, 14
• Partial Credit will be given

New Features

• Upload images to use for Superhero profile photos
• Display the photos
• Add images to Investigator profile