Redirection disrupts image upload

Question

When a user submits form, the user should be redirected to some other page. I have used window.location.href for redirection but it is not working. It redirects but uploading image won't work then.

Here is my code:

AddRent.js(Upload image code is focused more for shortening code line)

 $.ajax({
        url:"/add/space/",
        data:sendData,
        type:'POST',
        success: function(data, textStatus, xhr ) {
          var pk = xhr.getResponseHeader('pk-user');
          console.log('pk is',pk);
          $.ajax({
           url:"/upload/image/"+pk+"/",
           data:image,
           contentType:false,
           processData:false,
           type:'POST',
           mimeType: "multipart/form-data",
           success: function(data) {
             console.log('success');
           }
          });
         window.location.href="http://commonrentpspace.me/"; // if i use this to redirect, the images does not get upload
        }
       });
      }
}

Views.py:

class AddView(TemplateView):
    template_name = 'rentals/add.html'

class AddSpaceView(View):
    def post(self,request,*args,**kwargs):
        print ('add space view',request)
        if request.POST:
            response = HttpResponse('')
            print('owner name is',request.POST.get('ownerName'))
            print('amenities',request.POST.get('amenities'))
            rental = Rental()
            rental.ownerName = request.POST.get('ownerName')
            rental.email = request.POST.get('email')
            rental.phoneNumber = request.POST.get('phoneNumber')
            rental.listingName = request.POST.get('listingName')
            rental.summary = request.POST.get('summary')
            rental.property = request.POST.get('property')
            rental.room = request.POST.get('room')
            rental.price = request.POST.get('price')
            rental.city = request.POST.get('city')
            rental.place = request.POST.get('place')
            rental.water = request.POST.get('water')
            rental.amenities = request.POST.get('amenities')
            rental.save()
            response['pk-user'] = rental.pk
            return response

        return HttpResponse('Rental Information successfully added')


 class UploadImage(View):
    model = Rental
    template_name = 'rentals/add.html'
    print "Hello"
    def get(self, request, *args, **kwargs):
        return render(request, self.template_name)
    def post(self,request,*args,**kwargs):
        try:
            rental = Rental.objects.get(pk = self.kwargs['pk'])
        except Rental.DoesNotExist:
            error_dict = {'message': 'Rental spae not found'}
        print "Error Rental do not exist"
            return self.render(request,'rentals/add.html',error_dict)
        if request.FILES:
            for file in request.FILES.getlist('image'):
                print('file',file)
                image = Gallery.objects.create(rental = rental, image=file)
                print('image',image)
        print "Uploading Image"
        return HttpResponse("Uploaded successfully")

Do I need to provide any other information? What might be the cause?

Answer 1

$.ajax({
        url:"/add/space/",
        data:sendData,
        type:'POST',
        success: function(data, textStatus, xhr ) {
          var pk = xhr.getResponseHeader('pk-user');
          console.log('pk is',pk);
          $.ajax({
           url:"/upload/image/"+pk+"/",
           data:image,
           contentType:false,
           processData:false,
           type:'POST',
           mimeType: "multipart/form-data",
           success: function(data) {
             console.log('success');
             window.location.href="http://commonrentpspace.me/"; // move it here.
           }
          });
        }
       });
      }
}