پیاده سازی آپلود چند فایل در جنگو

در برنامه های کاربردی وب مدرن امروزی، توانایی آپلود و مدیریت چندین فایل اهمیت فزاینده ای پیدا کرده است. پشتیبانی از آپلود فایل‌های متعدد، چه به کاربران اجازه آپلود چندین تصویر، اسناد یا فایل‌های رسانه‌ای را بدهد، تجربه کاربر را افزایش می‌دهد و عملکرد غنی‌تری را امکان‌پذیر می‌کند. در این مقاله، نحوه پیاده‌سازی ویژگی بارگذاری چند فایل در جنگو، یک چارچوب وب قدرتمند و پرکاربرد را بررسی خواهیم کرد.

جنگو پایه محکمی برای مدیریت آپلود فایل ها فراهم می کند و با بهره گیری و گسترش قابلیت های آن، می توانیم تجربه ای یکپارچه و کارآمد برای کاربرانی که با برنامه هایمان در تعامل هستند ایجاد کنیم. با اجرای بارگذاری چند فایل، به کاربران این امکان را می‌دهیم که چندین فایل را به‌طور همزمان ارسال کنند، گردش کار آنها را ساده‌تر کرده و در زمان صرفه‌جویی می‌کنیم. این ویژگی به ویژه در سناریوهایی که کاربران نیاز به آپلود چندین تصویر برای یک گالری، ارسال چندین سند برای یک پروژه یا پیوست کردن چندین فایل به یک فرم دارند، بسیار ارزشمند است.

این مقاله به جنبه های مختلف اجرای بارگذاری فایل های متعدد در جنگو می پردازد. پیکربندی مدیریت آپلود فایل، ایجاد نماها و فرم‌های لازم، مدیریت ذخیره‌سازی و سازماندهی فایل، نمایش و دسترسی به فایل‌های آپلود شده، انجام اعتبارسنجی، و رسیدگی به ملاحظات امنیتی را پوشش خواهیم داد.

بیایید به این راه برویم و دانش و مهارت‌هایی را که برای ارتقای برنامه‌های کاربردی وب خود نیاز داریم و تجربه آپلود یکپارچه فایل را برای کاربران خود فراهم کنیم، به دست آوریم.

چرا آپلود چند فایل مهم است؟

شناسایی موارد استفاده خاص برای آپلود فایل های متعدد در تعیین نیاز و اهمیت اجرای این ویژگی در یک برنامه وب بسیار مهم است. در اینجا چند مورد استفاده رایج وجود دارد که در آن پشتیبانی از آپلود چند فایل به ویژه ارزشمند است:

• گالری‌های رسانه: برنامه‌هایی که شامل نمایش مجموعه‌ای از تصاویر، ویدیوها یا رسانه‌های دیگر می‌شوند، اغلب به توانایی آپلود چند فایل به طور همزمان نیاز دارند. این مورد استفاده برای پلت‌فرم‌هایی مانند وب‌سایت‌های اشتراک‌گذاری عکس، سیستم‌های مدیریت محتوا یا سایت‌های تجارت الکترونیکی که به کاربران اجازه می‌دهند چندین تصویر محصول را آپلود کنند، مرتبط است.

• مدیریت اسناد: برنامه‌هایی که با مدیریت اسناد سروکار دارند، مانند ابزارهای مدیریت پروژه یا پلتفرم‌های همکاری اسناد، از قابلیت بارگذاری چند فایل بهره می‌برند. کاربران می‌توانند چندین سند یا فایل مرتبط با یک پروژه یا کار را آپلود کنند و سازماندهی و اشتراک‌گذاری اطلاعات را آسان‌تر کنند.

• ارسال فرم: برنامه های کاربردی وب با فرم های پیچیده اغلب از کاربران می خواهند که چندین فایل را در حین ارسال ضمیمه کنند. به عنوان مثال، فرم های درخواست کار ممکن است درخواست رزومه، نامه های پوششی و اسناد اضافی را داشته باشند. با پشتیبانی از آپلود چند فایل، کاربران می توانند تمام اسناد مورد نیاز را به طور همزمان ارسال کنند و این روند را ساده کرده و تجربه کاربری را بهبود می بخشد.

• پیوست‌ها و اشتراک‌گذاری فایل: برنامه‌هایی که شامل اشتراک‌گذاری فایل هستند، مانند کلاینت‌های ایمیل، پلتفرم‌های پیام‌رسان یا سرویس‌های ذخیره‌سازی فایل، معمولاً برای آپلود فایل‌های متعدد به پشتیبانی نیاز دارند. کاربران می توانند چندین فایل را به ایمیل ها پیوست کنند، آنها را با دیگران به اشتراک بگذارند یا چندین فایل را در حساب های ذخیره سازی ابری آپلود کنند.

• واردات انبوه داده: در برخی از برنامه های کاربردی، کاربران ممکن است نیاز به وارد کردن حجم زیادی از داده ها در قالب فایل داشته باشند. به عنوان مثال، یک پلت فرم تجارت الکترونیک ممکن است به بازرگانان اجازه دهد داده های محصول را با استفاده از یک فایل CSV وارد کنند. پشتیبانی از آپلود فایل های متعدد، فرآیند واردات داده را ساده می کند و کارایی را بهبود می بخشد.

• ایجاد و انتشار محتوا: سیستم های مدیریت محتوا، پلتفرم های وبلاگ نویسی یا پلتفرم های چند رسانه ای اغلب به توانایی آپلود چندین فایل به طور همزمان نیاز دارند. کاربران می توانند تصاویر، ویدئوها یا سایر فایل های رسانه ای را برای ایجاد و انتشار محتوای غنی آپلود کنند.

• پشتیبان‌گیری و بازیابی داده‌ها: برنامه‌هایی که شامل پشتیبان‌گیری یا بازیابی اطلاعات هستند، می‌توانند از آپلود چندین فایل بهره ببرند. کاربران می‌توانند چندین فایل را برای عملیات پشتیبان‌گیری یا بازیابی انتخاب و آپلود کنند، فرآیند را ساده‌تر کرده و مدیریت کارآمد داده‌ها را ممکن می‌سازد.

آپلود فایل‌های متعدد به روش‌های متعددی برای برنامه‌ها و نرم‌افزارها با اهداف و دامنه‌های مختلف مفید است تا فرآیندها را ساده‌سازی کند، در زمان صرفه‌جویی کند و بهره‌وری را افزایش دهد.

پیش نیازها

برای استفاده حداکثری از این مقاله، توصیه می شود؛

• دانش کاری خوبی از زبان برنامه نویسی پایتون داشته باشید
• با استفاده از چارچوب توسعه وب جنگو راحت هستید
• آشنایی اولیه با HTML/CSS داشته باشید
• پایتون 3.10+ را نصب کنید
• Django 4.0+ را نصب کنید
• بالش را نصب کنید

درباره MiniProject ما برای بارگذاری چند فایل

برای اینکه به طور عملی نشان دهیم که چگونه می توان چندین فایل آپلود را در جنگو پیاده سازی کرد، این MiniProject را می سازیم که شامل یک برنامه است. مینی اپ

کاری که این برنامه انجام می دهد این است که شما را قادر می سازد چندین فایل را بارگذاری کنید (برای این مقاله، تصاویر را آپلود خواهیم کرد) و سپس شما را به صفحه ای هدایت می کند که در آن می توانید تمام تصاویری را که آپلود کرده اید مشاهده کنید.

ساده و شیرین، بیایید روی آن بپریم!

مرحله 1: راه اندازی برنامه جنگو

برای شروع، ما یک برنامه اصلی جنگو راه اندازی می کنیم و یک پروژه جنگو جدید را به شرح زیر شروع می کنیم.

django-admin startproject MiniProject

اکنون در دایرکتوری MiniProject جدید یک برنامه جدید ایجاد کنید.

python manage.py startapp MiniApp

در مرحله بعد، در فایل Settings.py MiniProject، MiniApp جدید را اضافه می کنیم.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'MiniApp',
]

اکنون، چند تنظیم دیگر، در پوشه MiniProject، دو پوشه جدید ایجاد کرده و نام آنها را به ترتیب Static و Templates می‌دهیم.

اکنون پوشه “templates” را که در آن قالب های HTML خود را ذخیره می کنیم، به موتور قالب جنگو در فایل Settings.py متصل کنید.

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

مرحله 2: پیکربندی سرویس فایل استاتیک برای فایل های آپلود شده و راه اندازی گزینه های ذخیره سازی فایل های رسانه ای در تنظیمات جنگو

پیکربندی سرویس فایل استاتیک برای فایل های آپلود شده در جنگو برای مدیریت صحیح و دسترسی به فایل های آپلود شده در برنامه وب ما ضروری است.

برای این کار، ما یک STATICFILES_DIR و STATIC_ROOT را علاوه بر STATIC_URL که قبلاً در فایل Setting.py وجود دارد، تنظیم کردیم.

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')

برای افزودن راه‌اندازی ذخیره‌سازی فایل رسانه‌ای برنامه، یک MEDIA_URL و MEDIA_ROOT را در فایل Settings.py اضافه می‌کنیم.

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

مرحله 3: یک مدل برای آپلود فایل و ModelForm ایجاد کنید

اکنون کلاس مدل خود را برای آپلود فایل در MiniApp’s models.py تنظیم می کنیم.

from django.db import models

class Image(models.Model):
    pic = models.FileField(upload_to='MiniApp_Images')

برای ModelForm که برای آپلود فایل ها از قالب های html استفاده می شود
یک فایل forms.py در MiniApp ایجاد کنید.

from django import forms
from .models import Image

class ImagesForm(forms.ModelForm):
    pic = forms.FileField(widget = forms.TextInput(attrs={
            "name": "images",
            "type": "File",
            "class": "form-control",
            "multiple": "True",
        }), label = "")

    class Meta:
        model = Image
        fields = ['pic']

مرحله 4: قالب های HTML را برای استفاده تنظیم کنید

ما 2 قالب html index.html و upload.html ایجاد خواهیم کرد، اولی برای مشاهده خروجی آپلود فایل های ما و دومی برای آپلود خود فایل ها است.

Index.html;

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <link   href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
      rel="stylesheet" 
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
      crossorigin="anonymous">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    .container{
      margin-top: 5rem;
      margin-left: auto;
      margin-right: auto;

    }

    .card{
      margin: auto;
    }
  </style>
  <title>Mini App</title>
</head>
<body>
  <div class="container row">

    {% for image in images %}
      <div class="card col-md-4" style="width: 18rem;">
        <img src="{{image.pic.url}}" class="card-img-top" alt="...">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    {% endfor %}

  </div>

</body>
</html>

Upload.html;

<!DOCTYPE html>
<html>
<head>
    <link   href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
            rel="stylesheet" 
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
            crossorigin="anonymous">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
    .container{
      margin-top: 20rem;
    }
    </style>
    <title>Multiple File Uploads</title>

</head>
<body>

    <div class="container center">

        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="mb-3">
              <label for="formFile" class="form-label">Upload Files Here</label>
              {{form}}
            </div>

            <button type="submit" class="btn btn-outline-primary ">Submit</button>
        </form>

    </div>
</body>
</html>

مرحله 5: نماها و مسیرهای URL لازم را ایجاد کنید

اکنون نماهایی را برای آپلود و مشاهده فایل در MiniApp ایجاد می کنیم

Views.py;

from django.shortcuts import render, redirect
from .forms import ImagesForm
from .models import Image

# Create your views here.
def index(request):
    images = Image.objects.all()
    context = {'images': images}

    return render(request, "index.html", context)

def fileupload(request):
    form = ImagesForm(request.POST, request.FILES)

    if request.method == 'POST':
        images = request.FILES.getlist('pic')

        for image in images:
            image_ins = Image(pic = image)
            image_ins.save()

        return redirect('index')

    context = {'form': form}
    return render(request, "upload.html", context)

در مرحله بعد، یک فایل urls.py جدید در دایرکتوری MiniApp ایجاد می کنیم و مسیرهای URL لازم را ایجاد می کنیم.

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name="index"),
    path('upload', views.fileupload, name = "File_Uploads")
]

برای urls.py MiniProject؛

from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include("MiniApp.urls")),
]

urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

مرحله 6: پایگاه داده را Migrations، Migrate و Runserver برای آزمایش ایجاد کنید.

در این مرحله ششم و آخر، ابتدا انتقال پایگاه داده را انجام می دهیم.

python manage.py makemigrations

سپس مهاجرت خواهیم کرد.

python manage.py migrate

آخرین اما نه کم اهمیت، ما سرور خود را برای آزمایش کد اجرا می کنیم.

python manage.py runserver

خروجی

افکار نهایی

به طور کلی، پشتیبانی از آپلود فایل های متعدد تجربه کاربر را افزایش می دهد، بهره وری را بهبود می بخشد و قابلیت های برنامه های کاربردی وب را گسترش می دهد. انعطاف‌پذیری، راحتی و کارایی را فراهم می‌کند و به کاربران اجازه می‌دهد تا با چندین فایل به طور یکپارچه کار کنند و به آن‌ها قدرت می‌دهد تا وظایف را به طور مؤثرتری انجام دهند.

این ویژگی را در آغوش بگیرید، موارد استفاده مختلف را آزمایش کنید و به ساخت برنامه های استثنایی جنگو ادامه دهید که تجربه کاربری برتری را ارائه می دهند.

برای بررسی بیشتر این ویژگی، ممکن است پیوندهای زیر مفید باشند؛

Django Docs در آپلود فایل
Github Repo از MiniProject
انجمن پشتیبانی جنگو