Django

Handle MultipleUpload file uploads with Django using request.FILES and function-based views. This guide covers both standard multipart uploads and chunked uploads.

Dependencies

pip install django django-cors-headers

Settings

Add CORS support in settings.py.

# settings.py
INSTALLED_APPS = [
 # ...
 "corsheaders",
]

MIDDLEWARE = [
 "corsheaders.middleware.CorsMiddleware",
 # ... other middleware
]

CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_HEADERS = [
 "content-type", "x-upload-id", "x-chunk-index",
 "x-chunk-count", "x-file-name", "x-file-size",
]

FILE_UPLOAD_MAX_MEMORY_SIZE = 200 * 1024 * 1024 # 200 MB
DATA_UPLOAD_MAX_MEMORY_SIZE = 200 * 1024 * 1024

URL Configuration

# urls.py
from django.urls import path
from . import views

urlpatterns = [
 path("api/upload", views.upload_file, name="upload"),
 path("api/upload-chunk", views.upload_chunk, name="upload_chunk"),
]

Multipart Form Upload

The view receives the file through Django's request.FILES dictionary and saves it with a unique GUID.

# views.py
import os
import uuid
import shutil
import json
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from django.views.decorators.http import require_POST
from django.conf import settings

UPLOAD_DIR = os.path.join(settings.BASE_DIR, "uploads")
CHUNK_DIR = os.path.join(UPLOAD_DIR, "chunks")
os.makedirs(UPLOAD_DIR, exist_ok=True)


@csrf_exempt
@require_POST
def upload_file(request):
 uploaded_file = request.FILES.get("file")
 if not uploaded_file:
 return JsonResponse({"success": False, "error": "No file uploaded"}, status=400)

 file_guid = str(uuid.uuid4())
 ext = os.path.splitext(uploaded_file.name)[1]
 dest_path = os.path.join(UPLOAD_DIR, file_guid + ext)

 with open(dest_path, "wb") as dest:
 for chunk in uploaded_file.chunks():
 dest.write(chunk)

 return JsonResponse({
 "success": True,
 "fileGuid": file_guid,
 "fileName": uploaded_file.name,
 "fileSize": uploaded_file.size,
 })

Chunked Upload

Each chunk arrives as a raw body with custom headers. Store chunks in a temporary directory and assemble the final file once all chunks have arrived.

@csrf_exempt
@require_POST
def upload_chunk(request):
 upload_id = request.headers.get("X-Upload-Id", "")
 chunk_index = int(request.headers.get("X-Chunk-Index", 0))
 chunk_count = int(request.headers.get("X-Chunk-Count", 0))
 file_name = request.headers.get("X-File-Name", "unknown")
 file_size = int(request.headers.get("X-File-Size", 0))

 if not upload_id or not chunk_count:
 return JsonResponse({"success": False, "error": "Missing headers"}, status=400)

 session_dir = os.path.join(CHUNK_DIR, upload_id)
 os.makedirs(session_dir, exist_ok=True)

 # Save this chunk from raw body
 chunk_path = os.path.join(session_dir, f"chunk_{chunk_index}")
 with open(chunk_path, "wb") as f:
 f.write(request.body)

 # Count received chunks
 received = len([
 name for name in os.listdir(session_dir)
 if name.startswith("chunk_")
 ])

 if received == chunk_count:
 # Assemble final file
 file_guid = str(uuid.uuid4())
 ext = os.path.splitext(file_name)[1] if file_name else ""
 final_path = os.path.join(UPLOAD_DIR, file_guid + ext)

 with open(final_path, "wb") as output:
 for i in range(chunk_count):
 cp = os.path.join(session_dir, f"chunk_{i}")
 with open(cp, "rb") as chunk_file:
 output.write(chunk_file.read())

 # Clean up chunks
 shutil.rmtree(session_dir)

 return JsonResponse({
 "success": True,
 "fileGuid": file_guid,
 "fileName": file_name,
 "fileSize": file_size,
 })

 return JsonResponse({"success": True, "chunksReceived": received})

Expected JSON Response

Both endpoints must return this JSON structure on successful upload completion.

{
 "success": true,
 "fileGuid": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
 "fileName": "photo.jpg",
 "fileSize": 204800
}

Client-Side JavaScript

Initialize MultipleUpload on the client, pointing to your Django endpoints.

<link rel="stylesheet" href="multipleupload.css" />
<div id="uploader"></div>
<script src="multipleupload.js"></script>
<script>
 var uploader = new MultipleUpload("#uploader", {
 uploadUrl: "/api/upload",
 chunkUploadUrl: "/api/upload-chunk",
 chunkSize: 2 * 1024 * 1024, // 2 MB chunks
 onFileUploaded: function (file, response) {
 console.log("Uploaded:", response.fileName, response.fileGuid);
 }
 });
</script>