CODEWITHSUNDEEP
djangodjango-views
Hassan Baig
Hassan Baig

Reputation: 15844

Stopping multiple view calls generated via frenzied button clicks (Django app)

I'm uploading an image file in a basic Django web app. There's an upload button in the html template wrapped around by a form tag. Once the upload button is pressed, the underlying view takes over and processes image upload.

In the Chrome browser of my colleague's Macbook, pressing upload multiple times really quickly manages to call the underlying function multiples times too. I end up getting a plethora of copies of the image being uploaded.

However, this isn't replicatable in my own environment's Firefox (Ubuntu OS). Seems this issue is browser sensitive?

In any case, how do I cut off this code behavior? If the user goes into a click frenzy, I don't want multiple images to go up. Can someone guide me how to handle this in Django? I would prefer a non-JS, server solution too.

Note: Let me know if you need to see my related code.

Upvotes: 2

Views: 83

Answers (1)

Aniket Pawar
Aniket Pawar

Reputation: 2721

Many people faces this issue. If the submit button called 3 times wihtout waiting to refresh the browser, it will gonna add 3 times.To prevent that you can use jQuery.

For example on form submit you can show the loader or disable the submit button,

$('#login_form').submit(function() {
    $('#gif').css('visibility', 'visible');
    or
     $('#button').prop('disabled', true);
});

Edit for server side implementation:

I do not suggest this for user interface point of view but if you can also valid submits using sessions or cookies.Generate random token in your view and set this in your form as hidden input.

for e.g.,

def checkform(request):
   form = ExampleForm(request.POST or None)
   randomtoken = #generate random token here and set in session or cookie

   if form.is_valid():
      # check_token here
      session_value == request.POST.get('your_hidden_token')
      # if matched than change the random token and save your data else do your restriction processing
   render ( request,'template.html',context={ 'form':form,'randomstring':randomstring } )

Upvotes: 4

Related Questions