Django Upload Multiple Images using Ajax

(Randall D Johnson) #1

Hello!

I am trying to implement multiple image uploads for activities by following this tutorial: https://simpleisbetterthancomplex.com/tutorial/2016/11/22/django-multiple-file-upload-using-ajax.html

I was able to see the upload view, and able to select images from the file explorer, but when I click Open on the file explorer, nothing happened.

I checked my console and see what data printed, and it printed {“is_valid”: False}

I printed out the form errors, and it stated that the image field is required. (note: i uploaded three images)

<tr><th><label for="id_image">Image:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="file" name="image" accept="image/*" required id="id_image"></td></tr>
{'is_valid': False}
[18/Mar/2019 22:32:40] "POST /en/activities/test-activity/Oahu-2/upload/ HTTP/1.1" 200 19
<tr><th><label for="id_image">Image:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="file" name="image" accept="image/*" required id="id_image"></td></tr>
{'is_valid': False}
[18/Mar/2019 22:32:40] "POST /en/activities/test-activity/Oahu-2/upload/ HTTP/1.1" 200 19
<tr><th><label for="id_image">Image:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="file" name="image" accept="image/*" required id="id_image"></td></tr>
{'is_valid': False}

I was wondering if anyone know the issue. It seems like the image isn’t being passed to the server.

Here is my implementation

models.py

class ActivityPhoto(models.Model):
    activity = models.ForeignKey(Activity, related_name='photos', on_delete=models.CASCADE)
    image = models.ImageField(upload_to='activity_images/')

forms.py

class PhotoForm(forms.ModelForm):
    class Meta:
        model = ActivityPhoto
        fields = ('image', )

views.py

class ActivityPhotoUploadView(View):

    def get(self, request, region, slug, pk):
        activity = Activity.objects.get(pk=pk)
        print(activity)
        activity_photos = ActivityPhoto.objects.filter(activity=activity)
        return render(
            self.request,
            'activities/activity_upload.html',
            {
                'photos': activity_photos,
                'activity': activity,
            },
        )
    
    def post(self, request, region, slug, pk):
        form = PhotoForm(self.request.POST, self.request.FILES)
        print(form)
        if form.is_valid():
            photo = form.save(commit=False)
            photo.activity = Activity.objects.get(pk=pk)
            photo.save()
            print(photo)
            data = {'is_valid': True, 'name': photo.image.name, 'url': photo.image.url}
        else:
            data = {'is_valid': False}
        print(data)
        return JsonResponse(data)

urls.py

app_name = 'activities'
urlpatterns = [
    url(
        r'(?P<region>[\w-]+)/(?P<slug>[\w-]+)-(?P<pk>[0-9]+)/upload/',
        ActivityPhotoUploadView.as_view(),
        name='upload',
    ),
    url(
        r'(?P<region>[\w-]+)/(?P<slug>[\w-]+)-(?P<pk>[0-9]+)/edit/',
        ActivityUpdateView.as_view(),
        name='update',
    ),
    url(
        r'(?P<region>[\w-]+)/(?P<slug>[\w-]+)-(?P<pk>[0-9]+)/',
        ActivityDetailView.as_view(),
        name='detail',
    ),
    url(r'^create/', ActivityCreationView.as_view(ACTIVITY_CREATE_FORMS_LIST), name="create"),
]

template

https://pastebin.com/GdKApD4h

js

https://pastebin.com/bAbZVKFJ

0 Likes