Bài 22: File Uploads & Media Files

Media Settings

Media Files là files được upload bởi users (images, documents, videos, etc.).

# settings.py # Media files configurationMEDIA_URL = '/media/'  # URL prefix for media filesMEDIA_ROOT = BASE_DIR / 'media'  # Directory to store uploaded files # Example paths:# File path: /path/to/project/media/avatars/user_123.jpg# URL: http://example.com/media/avatars/user_123.jpg # Static vs Media:# STATIC_URL = '/static/'  # Your CSS, JS, images# MEDIA_URL = '/media/'    # User uploaded files # Security note:# Never put MEDIA_ROOT inside STATIC_ROOT!

URL Configuration for Development

# project/urls.pyfrom django.conf import settingsfrom django.conf.urls.static import staticfrom django.contrib import adminfrom django.urls import path, include urlpatterns = [    path('admin/', admin.site.urls),    path('', include('blog.urls')),] # Serve media files in developmentif settings.DEBUG:    urlpatterns += static(        settings.MEDIA_URL,        document_root=settings.MEDIA_ROOT    ) # In production, use web server (Nginx, Apache) to serve media files

Directory Structure

# Project structure:myproject/├── media/                    # MEDIA_ROOT│   ├── avatars/             # User avatars│   │   ├── user_1.jpg│   │   └── user_2.jpg│   ├── posts/               # Post images│   │   ├── post_1.jpg│   │   └── post_2.jpg│   └── documents/           # Documents│       ├── doc1.pdf│       └── doc2.pdf├── static/                   # STATIC_ROOT├── manage.py└── myproject/    └── settings.py

ImageField and FileField

Basic FileField

# models.pyfrom django.db import models class Document(models.Model):    title = models.CharField(max_length=200)    file = models.FileField(upload_to='documents/')    uploaded_at = models.DateTimeField(auto_now_add=True)        def __str__(self):        return self.title # Usage:doc = Document.objects.create(    title='Report',    file='path/to/file.pdf') # Access file:print(doc.file.url)   # /media/documents/file.pdfprint(doc.file.path)  # /path/to/project/media/documents/file.pdfprint(doc.file.name)  # documents/file.pdfprint(doc.file.size)  # File size in bytes # Check if file exists:if doc.file:    print('File exists')

Basic ImageField

# Install Pillow first:# pip install Pillow from django.db import models class Profile(models.Model):    user = models.OneToOneField('auth.User', on_delete=models.CASCADE)    avatar = models.ImageField(        upload_to='avatars/',        blank=True,        null=True    )    bio = models.TextField(blank=True) # ImageField has extra attributes:profile = Profile.objects.get(user=user)if profile.avatar:    print(profile.avatar.url)     # /media/avatars/user.jpg    print(profile.avatar.width)   # Image width in pixels    print(profile.avatar.height)  # Image height in pixels

Dynamic upload_to

# upload_to as function:def user_avatar_path(instance, filename):    """Generate path: avatars/user_<id>/<filename>"""    return f'avatars/user_{instance.user.id}/{filename}' class Profile(models.Model):    user = models.OneToOneField('auth.User', on_delete=models.CASCADE)    avatar = models.ImageField(upload_to=user_avatar_path) # upload_to with date:from datetime import date def post_image_path(instance, filename):    """Generate path: posts/2024/01/15/<filename>"""    today = date.today()    return f'posts/{today.year}/{today.month:02d}/{today.day:02d}/{filename}' class Post(models.Model):    title = models.CharField(max_length=200)    image = models.ImageField(upload_to=post_image_path) # upload_to with UUID:import uuidimport os def unique_file_path(instance, filename):    """Generate unique filename"""    ext = filename.split('.')[-1]    filename = f'{uuid.uuid4()}.{ext}'    return os.path.join('uploads', filename) class Upload(models.Model):    file = models.FileField(upload_to=unique_file_path)

File Field Options

class Document(models.Model):    file = models.FileField(        upload_to='documents/',        max_length=255,          # Max path length (default: 100)        blank=True,              # Optional in forms        null=True,               # Optional in database        default='default.pdf',   # Default file    )        # ImageField additional options:    image = models.ImageField(        upload_to='images/',        width_field='image_width',    # Store width        height_field='image_height',  # Store height    )    image_width = models.IntegerField(null=True)    image_height = models.IntegerField(null=True)

File Upload Forms

ModelForm with FileField

# forms.pyfrom django import formsfrom .models import Profile class ProfileForm(forms.ModelForm):    class Meta:        model = Profile        fields = ['avatar', 'bio'] # views.pyfrom django.shortcuts import render, redirect def update_profile(request):    profile = request.user.profile        if request.method == 'POST':        form = ProfileForm(            request.POST,            request.FILES,  # Important! Include request.FILES            instance=profile        )        if form.is_valid():            form.save()            return redirect('profile')    else:        form = ProfileForm(instance=profile)        return render(request, 'profile_form.html', {'form': form}) # Template: profile_form.html<form method="post" enctype="multipart/form-data">    {% csrf_token %}    {{ form.as_p }}    <button type="submit">Update Profile</button></form>

Regular Form with FileField

# forms.pyclass UploadFileForm(forms.Form):    title = forms.CharField(max_length=200)    file = forms.FileField()        # Or ImageField:    image = forms.ImageField() # views.pydef upload_file(request):    if request.method == 'POST':        form = UploadFileForm(request.POST, request.FILES)        if form.is_valid():            # Handle uploaded file            uploaded_file = request.FILES['file']                        # Save to model:            document = Document.objects.create(                title=form.cleaned_data['title'],                file=uploaded_file            )            return redirect('success')    else:        form = UploadFileForm()        return render(request, 'upload.html', {'form': form})

Multiple File Upload

# forms.pyclass MultipleFileForm(forms.Form):    files = forms.FileField(        widget=forms.ClearableFileInput(attrs={'multiple': True})    ) # views.pydef upload_multiple(request):    if request.method == 'POST':        form = MultipleFileForm(request.POST, request.FILES)        if form.is_valid():            files = request.FILES.getlist('files')                        for file in files:                Document.objects.create(                    title=file.name,                    file=file                )                        return redirect('success')    else:        form = MultipleFileForm()        return render(request, 'upload.html', {'form': form}) # Template:<form method="post" enctype="multipart/form-data">    {% csrf_token %}    <input type="file" name="files" multiple>    <button type="submit">Upload</button></form>

File Validation

Size Validation

# validators.pyfrom django.core.exceptions import ValidationError def validate_file_size(file):    """Limit file size to 5MB"""    max_size_mb = 5    if file.size > max_size_mb * 1024 * 1024:        raise ValidationError(f'File size must be under {max_size_mb}MB') # models.pyclass Document(models.Model):    file = models.FileField(        upload_to='documents/',        validators=[validate_file_size]    ) # Or in form:class UploadForm(forms.Form):    file = forms.FileField(validators=[validate_file_size])

File Extension Validation

# validators.pyimport osfrom django.core.exceptions import ValidationError def validate_file_extension(file):    """Allow only specific extensions"""    allowed_extensions = ['.pdf', '.doc', '.docx']    ext = os.path.splitext(file.name)[1].lower()        if ext not in allowed_extensions:        raise ValidationError(            f'File type not allowed. Allowed: {", ".join(allowed_extensions)}'        ) def validate_image_extension(file):    """Allow only image extensions"""    allowed_extensions = ['.jpg', '.jpeg', '.png', '.gif']    ext = os.path.splitext(file.name)[1].lower()        if ext not in allowed_extensions:        raise ValidationError('Only image files allowed.') # models.pyclass Post(models.Model):    image = models.ImageField(        upload_to='posts/',        validators=[validate_image_extension, validate_file_size]    )

Image Dimension Validation

# validators.pyfrom PIL import Imagefrom django.core.exceptions import ValidationError def validate_image_dimensions(file):    """Validate image dimensions"""    max_width = 4000    max_height = 4000        img = Image.open(file)    width, height = img.size        if width > max_width or height > max_height:        raise ValidationError(            f'Image dimensions must be {max_width}x{max_height}px or less.'        ) def validate_image_aspect_ratio(file):    """Validate image is square"""    img = Image.open(file)    width, height = img.size        if width != height:        raise ValidationError('Image must be square.') # models.pyclass Profile(models.Model):    avatar = models.ImageField(        upload_to='avatars/',        validators=[            validate_file_size,            validate_image_dimensions,        ]    )

Combined Validation

# validators.pydef validate_image(file):    """Comprehensive image validation"""    # Check size    max_size_mb = 5    if file.size > max_size_mb * 1024 * 1024:        raise ValidationError(f'File must be under {max_size_mb}MB')        # Check extension    allowed_extensions = ['.jpg', '.jpeg', '.png']    ext = os.path.splitext(file.name)[1].lower()    if ext not in allowed_extensions:        raise ValidationError('Only JPG and PNG files allowed.')        # Check image validity and dimensions    try:        img = Image.open(file)        img.verify()  # Verify it's an actual image                width, height = img.size        if width > 4000 or height > 4000:            raise ValidationError('Image dimensions too large.')    except Exception:        raise ValidationError('Invalid image file.') # models.pyclass Post(models.Model):    image = models.ImageField(        upload_to='posts/',        validators=[validate_image]    )

Handling Uploaded Files

Accessing File Information

def handle_upload(request):    if request.method == 'POST':        uploaded_file = request.FILES['file']                # File information:        print(uploaded_file.name)          # Original filename        print(uploaded_file.size)          # Size in bytes        print(uploaded_file.content_type)  # MIME type        print(uploaded_file.charset)       # Character encoding                # Read file content:        content = uploaded_file.read()     # Read all                # Or iterate in chunks:        for chunk in uploaded_file.chunks():            # Process chunk            pass

Manual File Saving

import osfrom django.conf import settingsfrom django.core.files.storage import default_storage def manual_file_save(request):    if request.method == 'POST':        uploaded_file = request.FILES['file']                # Save manually:        filename = uploaded_file.name        filepath = os.path.join('uploads', filename)                # Using default_storage:        path = default_storage.save(filepath, uploaded_file)        url = default_storage.url(path)                return JsonResponse({            'path': path,            'url': url        })

Processing Before Save

from PIL import Imagefrom io import BytesIOfrom django.core.files.uploadedfile import InMemoryUploadedFile def process_image_before_save(request):    if request.method == 'POST':        form = PostForm(request.POST, request.FILES)        if form.is_valid():            post = form.save(commit=False)                        # Get uploaded image            image = request.FILES['image']            img = Image.open(image)                        # Convert to RGB (remove alpha channel)            if img.mode in ('RGBA', 'LA', 'P'):                img = img.convert('RGB')                        # Resize if too large            max_size = (1920, 1080)            img.thumbnail(max_size, Image.Resampling.LANCZOS)                        # Save to BytesIO            output = BytesIO()            img.save(output, format='JPEG', quality=85)            output.seek(0)                        # Create new InMemoryUploadedFile            post.image = InMemoryUploadedFile(                output,                'ImageField',                f"{image.name.split('.')[0]}.jpg",                'image/jpeg',                output.getbuffer().nbytes,                None            )                        post.save()            return redirect('post_detail', pk=post.pk)

Image Thumbnails

Generate Thumbnails on Save

from PIL import Imagefrom io import BytesIOfrom django.core.files.base import ContentFile class Post(models.Model):    title = models.CharField(max_length=200)    image = models.ImageField(upload_to='posts/')    thumbnail = models.ImageField(upload_to='thumbnails/', blank=True)        def save(self, *args, **kwargs):        # Generate thumbnail on save        if self.image:            # Open image            img = Image.open(self.image)                        # Create thumbnail            thumb_size = (300, 300)            img.thumbnail(thumb_size, Image.Resampling.LANCZOS)                        # Save to BytesIO            thumb_io = BytesIO()            img.save(thumb_io, format='JPEG', quality=85)                        # Save to thumbnail field            thumb_file = ContentFile(thumb_io.getvalue())            self.thumbnail.save(                f'thumb_{self.image.name}',                thumb_file,                save=False            )                super().save(*args, **kwargs)

Multiple Thumbnail Sizes

class Post(models.Model):    image = models.ImageField(upload_to='posts/')    thumbnail_small = models.ImageField(upload_to='thumbnails/small/', blank=True)    thumbnail_medium = models.ImageField(upload_to='thumbnails/medium/', blank=True)    thumbnail_large = models.ImageField(upload_to='thumbnails/large/', blank=True)        def create_thumbnails(self):        """Generate multiple thumbnail sizes"""        if not self.image:            return                img = Image.open(self.image)                # Define sizes        sizes = {            'small': (150, 150),            'medium': (300, 300),            'large': (600, 600),        }                for size_name, dimensions in sizes.items():            # Create thumbnail            thumb = img.copy()            thumb.thumbnail(dimensions, Image.Resampling.LANCZOS)                        # Save            thumb_io = BytesIO()            thumb.save(thumb_io, format='JPEG', quality=85)            thumb_file = ContentFile(thumb_io.getvalue())                        # Save to appropriate field            field = getattr(self, f'thumbnail_{size_name}')            field.save(                f'{size_name}_{self.image.name}',                thumb_file,                save=False            )        def save(self, *args, **kwargs):        is_new = self.pk is None        super().save(*args, **kwargs)                if is_new and self.image:            self.create_thumbnails()            super().save(*args, **kwargs)

Using easy-thumbnails

# Install:# pip install easy-thumbnails # settings.pyINSTALLED_APPS = [    # ...    'easy_thumbnails',] THUMBNAIL_ALIASES = {    '': {        'small': {'size': (150, 150), 'crop': True},        'medium': {'size': (300, 300), 'crop': True},        'large': {'size': (600, 600), 'crop': False},    },} # models.pyfrom easy_thumbnails.fields import ThumbnailerImageField class Post(models.Model):    image = ThumbnailerImageField(        upload_to='posts/',        resize_source=dict(size=(2000, 2000), crop='smart')    ) # Template:{% load thumbnail %} <img src="{{ post.image|thumbnail_url:'small' }}" alt=""><img src="{% thumbnail post.image 300x300 crop %}" alt=""> # Or in views:from easy_thumbnails.files import get_thumbnailer thumbnailer = get_thumbnailer(post.image)thumbnail = thumbnailer.get_thumbnail({'size': (300, 300), 'crop': True})print(thumbnail.url)

Deleting Files

Delete File with Model

from django.db.models.signals import pre_deletefrom django.dispatch import receiver class Post(models.Model):    image = models.ImageField(upload_to='posts/') @receiver(pre_delete, sender=Post)def delete_post_image(sender, instance, **kwargs):    """Delete image file when post deleted"""    if instance.image:        instance.image.delete(save=False) # Or override delete method:class Post(models.Model):    image = models.ImageField(upload_to='posts/')        def delete(self, *args, **kwargs):        # Delete file        if self.image:            self.image.delete(save=False)                # Delete model instance        super().delete(*args, **kwargs)

Delete Old File on Update

from django.db.models.signals import pre_save @receiver(pre_save, sender=Post)def delete_old_image_on_update(sender, instance, **kwargs):    """Delete old image when new one uploaded"""    if not instance.pk:        return  # New instance        try:        old_image = Post.objects.get(pk=instance.pk).image    except Post.DoesNotExist:        return        # If image changed, delete old one    if old_image and old_image != instance.image:        old_image.delete(save=False)

Bài Tập

Bài 1: User Profile with Avatar

Task: Create user profile with avatar upload:

# Requirements:# 1. Profile model with OneToOne to User# 2. Avatar field with upload_to user-specific directory# 3. Form to upload/update avatar# 4. Validation:#    - Max size: 2MB#    - Only JPG, PNG allowed#    - Max dimensions: 2000x2000px# 5. Generate thumbnail (200x200px)# 6. Delete old avatar when new one uploaded# 7. Display avatar in profile page# 8. Default avatar if none uploaded

Bài 2: Blog Post with Images

Task: Implement blog with image uploads:

# Requirements:# 1. Post model with featured image# 2. Upload form with image preview before upload# 3. Multiple thumbnail sizes (small, medium, large)# 4. Image gallery for each post (multiple images)# 5. Validation:#    - Image files only#    - Max 5MB per image#    - Max 10 images per post# 6. Image optimization (resize if > 1920px width)# 7. Delete images when post deleted# 8. Display images in responsive grid

Bài 3: Document Management System

Task: Create document upload system:

# Requirements:# 1. Document model (title, file, category, uploaded_by)# 2. Support multiple file types (PDF, DOC, DOCX, XLS, XLSX)# 3. Organize by category directories# 4. File size validation (max 10MB)# 5. Generate unique filenames (UUID)# 6. Track download count# 7. Search documents by title/category# 8. Download file view with proper headers# 9. Delete file functionality with confirmation# 10. Admin interface for managing documents

Bài 4: Photo Gallery

Task: Build photo gallery application:

# Requirements:# 1. Album model (title, description, cover_image)# 2. Photo model (album, image, caption, order)# 3. Multiple photo upload (drag & drop)# 4. Auto-generate 3 thumbnail sizes# 5. Image metadata extraction (dimensions, size, format)# 6. Reorder photos (drag & drop in admin)# 7. Lightbox view for full-size images# 8. Lazy loading for thumbnails# 9. Batch operations (delete multiple photos)# 10. Public/private album visibility# 11. Photo tags (ManyToMany)# 12. Performance optimization with select_related/prefetch_related

Tài Liệu Tham Khảo

Previous: Bài 21: Model Relationships | Next: Bài 23: Pagination

#imagefield

Django File Uploads & Media Files