title: Django multiple images not uploading
body: <p>So I have been trying to implement a way to upload multiple files at once using JQuery for the client-side choosing part. I For some reason it is not working and I am not sure why. </p>
  
  <p>Nothing happens to my page whenever I add images for the project I want to create. </p>
  
  <p>My code for this is below:</p>
  
  <p>basic-upload.js</p>
  
  <pre><code>$(function () {
      /* 1. OPEN THE FILE EXPLORER WINDOW */
      $(".js-upload-photos").click(function () {
        $("#fileupload").click();
      });
  
      /* 2. INITIALIZE THE FILE UPLOAD COMPONENT */
      $("#fileupload").fileupload({
        dataType: 'json',
        done: function (e, data) {  /* 3. PROCESS THE RESPONSE FROM THE SERVER */
          if (data.result.is_valid) {
            $("#gallery tbody").prepend(
              "&lt;tr&gt;&lt;td&gt;&lt;a href='" + data.result.url + "'&gt;" + data.result.name + "&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;"
            )
          }
        }
      });
  
    });
  </code></pre>
  
  <p>Updated views.py</p>
  
  <pre><code>class CreateProjectsView(View):
  def get(self, request):
      p_photos = P_Images.objects.all()
      project_form = ProjectsForm(request.GET, request.FILES)
      context = {
          'p_photos': p_photos,
          'project_form': project_form,
      }
      return render(self.request, 'projects/forms.html', context)
  
  def post(self, request):
      project_form = ProjectsForm(request.POST, request.FILES)
      p_formset = P_ImageForm(request.POST, request.FILES)
  
  # Checks if the form is valid before save
  if project_form.is_valid() and p_formset.is_valid():
      instance = project_form.save(commit=False)
      instance.user = request.user
      instance.save()
      images = p_formset.save(commit=False)
      images.save()
  
      data = {
          'is_valid': True, 
          'name': images.p_file.name, 
          'url': images.p_file.url
      }
  
  else:
      data = {
          'is_valid': False,
      }
  
  return JsonResponse(data)
  
  
  # Function to retrieve all different projects
  def retrieve_projects(request):
      # Retrieves objects based on latest publish date
      projects_list = Projects.objects.all().order_by("-publish_date")
      context = {
          'projects_list': projects_list,
      }
      return render(request, 'projects/projects.html', context)
  
  # Function to update projects
  def update_projects(request, slug):
      instance = get_object_or_404(Projects, slug=slug)
      project_form = ProjectsForm(request.POST or None, instance=instance)
  
      # Update_date becomes the latest time
      if project_form.is_valid():
          project_form.save()
          return redirect('retrieve_projects')
      context = {
          'instance': instance,
          'project_form': project_form
      }
      return render(request, 'projects/forms.html', context)
  
  # Function to delete projects chosen
  def delete_projects(request, slug):
      Projects.objects.filter(slug=slug).delete()
      return redirect('retrieve_projects')
  
  # Function to show details of project using the ids
  def details_of_project(request, slug):
      # Will raise 404 if there is not such id
      project_details = get_object_or_404(Projects, slug=slug)
      context = {
          'project_details': project_details,
      }
      return render(request, 'projects/posts.html', context)
  </code></pre>
  
  <p>forms.py</p>
  
  <pre><code>from django import forms
  
  from .models import Projects, P_Images
  
  class ProjectsForm(forms.ModelForm):
  
      class Meta:
          model = Projects
          #file_field = forms.FileField(widget=forms.ClearableFileInput(attrs={'multiple': True}))
          fields = ('images','title', 'description',)
  
  
  class P_ImageForm(forms.ModelForm):
      #p_image = forms.ImageField(label='Image')  
      class Meta:
          model = P_Images
          fields = ('p_file',)
  </code></pre>
  
  <p>models.py</p>
  
  <pre><code>from django.db import models
  from django.utils import timezone
  from django.forms import ModelForm
  from django.utils.text import slugify
  from django.utils.crypto import get_random_string
  from django.conf import settings
  from django.contrib.postgres.fields import ArrayField
  from django.contrib.auth.models import (
      BaseUserManager, AbstractBaseUser
  )
  from PIL import Image
  
  import os
  
  DEFAULT_IMAGE_ID = 1
  
  # Create your models here.
  class Projects(models.Model):
      title = models.CharField(max_length=30)
      description = models.TextField(max_length=150)
      publish_date = models.DateTimeField(auto_now=False, auto_now_add=True)
      update_date = models.DateTimeField(auto_now=True, auto_now_add=False)
      slug = models.SlugField(unique=True)
      files = models.FileField(upload_to='files/', blank=True)
      images = models.ImageField(upload_to='images/', height_field = 'img_height', width_field = 'img_width',blank=True)
      img_height = models.PositiveIntegerField(default=600)
      img_width = models.PositiveIntegerField(default=300)
  
      def __str__(self):
          return self.title
  
      def save(self, *args, **kwargs):
          # Generates a random string 
          unique_string = get_random_string(length=32)
  
          # Combines title and unique string to slugify
          slugtext = self.title + "-" + "unique_id=-" + unique_string
          self.slug = slugify(slugtext)
  
          return super(Projects, self).save(*args, **kwargs)
  
  def get_p_image_filename(instance, filename):
      title = instance.p_post.title
      slug_title = slugify(title)
      return "post_images/%s-%s" % (slug_slug, filename)
  
  class P_Images(models.Model):
      p_file = models.ImageField(upload_to='images/', blank=None)
      p_uploaded_at = models.DateTimeField(auto_now_add=True, auto_now=False)
      #p_post = models.ForeignKey(Projects, on_delete=models.CASCADE, default=DEFAULT_IMAGE_ID)
  </code></pre>
  
  <p>Updated urls.py</p>
  
  <pre><code>from django.urls import re_path, include
  from . import views
  
  # urls for projects page
  app_name = 'create_post'
  
  urlpatterns = [
      re_path(r'^$', views.retrieve_projects, name="retrieve_projects"),
      re_path(r'^create/$', views.CreateProjectsView.as_view(), name="create_projects"),
      re_path(r'^(?P&lt;slug&gt;[\w-]+)/$', views.details_of_project, name="details_of_project"),
      re_path(r'^(?P&lt;slug&gt;[\w-]+)/update/$', views.update_projects, name="update_projects"),
      re_path(r'^(?P&lt;slug&gt;[\w-]+)/delete/$', views.delete_projects, name="delete_projects"),
  ]
      ]
  </code></pre>
  
  <p>forms.html</p>
  
  <pre><code>{% extends "projects/test.html" %}
  
  {% block javascript %}
  
  &lt;form action="{% url 'create_post:retrieve_projects' %}" method="POST" enctype="multipart/form-data"&gt;
  
      {% csrf_token %}  
  
      {% for hidden in project_form.hidden_fields %}
      {{ hidden }}
      {% endfor %}
  
      {% for field in project_form %}
      {{ field }} &lt;br /&gt;
      {% endfor %}
  
      &lt;input type="submit" value="OK"&gt;
  
  {% load static %}
  
  {# JQUERY FILE UPLOAD SCRIPTS #}
  &lt;script src="{% static 'projects/js/jquery-file-upload/vendor/jquery.ui.widget.js' %}"&gt;&lt;/script&gt;
  &lt;script src="{% static 'projects/js/jquery-file-upload/jquery.iframe-transport.js' %}"&gt;&lt;/script&gt;
  &lt;script src="{% static 'projects/js/jquery-file-upload/jquery.fileupload.js' %}"&gt;&lt;/script&gt;
  
  {# PHOTOS PAGE SCRIPTS #}
  &lt;script src="{% static 'projects/js/basic-upload.js' %}"&gt;&lt;/script&gt;
  
  {# 1. BUTTON TO TRIGGER THE ACTION #}
  &lt;button type="button" class="btn btn-primary js-upload-photos"&gt;
    &lt;span class="glyphicon glyphicon-cloud-upload"&gt;&lt;/span&gt; Upload photos
  &lt;/button&gt;
  
  {# 2. FILE INPUT TO BE USED BY THE PLUG-IN #}
  &lt;input id="fileupload" type="file" name="p_file" multiple
         style="display: none;"
         data-url="{% url 'create_post:create_projects' %}"
         data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'&gt;
  
  {# 3. TABLE TO DISPLAY THE UPLOADED PHOTOS #}
  &lt;table id="gallery" class="table table-bordered"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Photo&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      {% for p_photo in p_formset %}
        &lt;tr&gt;
          &lt;td&gt;&lt;a href="{{ p_photo.file.url }}"&gt;{{ p_photo.file.name }}&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
      {% endfor %}
    &lt;/tbody&gt;
  &lt;/table&gt;
  
      &lt;h1&gt;hahahaha&lt;/h1&gt;
  
  &lt;/form&gt;
  
  {% endblock %}
  </code></pre>