Django Multiple File Upload Template
Sample Project to show you how to implement multiple file upload with api and django form
Guideline
- Guideline
- Goal
- Development usage
- Clone the repo
- Enviroment Varibales
- Build everything
- Note
- Check it out in a browser
- Model schema
- Form Base
- API Base
- Test Upload
- License
- Bugs
Goal
This project main goal is to provide a sample to show you how to implement multiple file uploading with django form and api.
Development usage
You'll need to have Docker installed. It's available on Windows, macOS and most distros of Linux.
If you're using Windows, it will be expected that you're following along inside of WSL or WSL 2.
That's because we're going to be running shell commands. You can always modify these commands for PowerShell if you want.
Clone the repo
Clone this repo anywhere you want and move into the directory:
Enviroment Varibales
enviroment varibales are included in docker-compose.yml file for debugging mode and you are free to change commands inside:
backend:
command: sh -c "python manage.py check_database && \
yes | python manage.py makemigrations && \
yes | python manage.py migrate && \
python manage.py runserver 0.0.0.0:8000"
environment:
- DEBUG=True
Build everything
The first time you run this it's going to take 5-10 minutes depending on your internet connection speed and computer's hardware specs. That's because it's going to download a few Docker images such as minio and build the Python + requirements dependencies. and dont forget to create a .env file inside dev folder for django and postgres with the samples.
Now that everything is built and running we can treat it like any other Django app.
Note
If you receive an error about a port being in use? Chances are it's because something on your machine is already running on port 8000. then you have to change the docker-compose.yml file according to your needs.
Check it out in a browser
Visit http://localhost:8000 in your favorite browser.
Model schema
a simple model for testing purposes
# Create your models here.
class Photo(models.Model):
file = models.ImageField(upload_to="gallery/")
Form Base
this is flow of form base uploading
forms.py
from .models import Photo
class PhotoForm(forms.ModelForm):
file = forms.FileField(widget=forms.ClearableFileInput(attrs={'multiple': True}))
class Meta:
model = Photo
fields = ('file', )
views.py
from django.urls import reverse_lazy
from django.views.generic import ListView,FormView,CreateView
from .forms import PhotoForm
from .models import Photo
# Create your views here.
class UploadView(CreateView):
template_name = 'website/index.html'
form_class = PhotoForm
success_url = '/'
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["gallery"] = Photo.objects.all()
return context
def post(self, request, *args, **kwargs):
form_class = self.get_form_class()
form = self.get_form(form_class)
files = request.FILES.getlist('file')
if 'file' not in request.FILES or not form.is_valid():
return HttpResponseRedirect(reverse_lazy("website:index"))
if form.is_valid():
for file in files:
Photo.objects.create(file=file)
return HttpResponseRedirect(self.request.path_info)
else:
return self.form_invalid(form)
API Base
this is flow of api base uploading
serializers.py
from rest_framework.exceptions import ValidationError
from ..models import Photo
class PhotoSerializer(serializers.Serializer):
file = serializers.FileField(max_length=None, allow_empty_file=False)
views.py
from rest_framework import status, viewsets
from rest_framework.parsers import MultiPartParser
from django.views.decorators.csrf import csrf_exempt
from .serializers import *
from ..models import *
class PhotoModelViewSet(viewsets.ModelViewSet):
serializer_class = PhotoSerializer
parser_classes = [MultiPartParser]
@csrf_exempt
def create(self, request, *args, **kwargs):
serializer = self.get_serializer(data=request.data)
if 'file' not in request.FILES or not serializer.is_valid():
return Response({"details":"there is an issue with uploaded files"},status=status.HTTP_400_BAD_REQUEST)
for file in request.FILES.getlist('file'):
Photo.objects.create(file=file)
return Response({"details":"uploaded successfully"}, status=status.HTTP_201_CREATED)
Test Upload
for testing the upload mechanism you just need to hit on either form base or api base file selection and then choose one or more files which you want to upload. then hit ok and upload it. done!
License
MIT.
Bugs
Feel free to let me know if something needs to be fixed. or even any features seems to be needed in this repo.