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

Question

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.

I solved this problem by showing a loading gif, with clicks disabled on page when the submit button is clicked or I had to choose this https://stackoverflow.com/questions/2136954/does-a-library-to-prevent-duplicate-form-submissions-exist-for-django — Bijoy, Jul 20 '17 at 11:24

Aniket Pawar · Accepted Answer · 2017-07-20T11:46:14.173

4

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 } )

edited Jul 20 '17 at 11:46

answered Jul 20 '17 at 11:04

Aniket Pawar

2,641
19
32

@Ankit: great solution, but are there any non-JS solutions? – Hassan Baig Jul 20 '17 at 11:07
1

there is server side solutions, for e.g you can set the token in form and then on submit check that token is already submitted or not. But this type of solution will cost you user interface.So it is better to use client side solutions. – Aniket Pawar Jul 20 '17 at 11:15
1

I wanted to know server-side solutions because an unignorable number of clients connecting to my web app have JS turned off. That leaves part of my web app vulnerable. Would be great (for completeness and future readers) if you could also add a quick server-side illustrative example to your answer. Nevertheless, I've accepted the answer. – Hassan Baig Jul 20 '17 at 11:27
@HassanBaig ok i edited the answer for server side. See that if it can help you. – Aniket Pawar Jul 20 '17 at 11:40

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

1 Answers1

Linked