Django executes the view functions many times when client has submitted a form just only once

Question

I need to upload user's image to server for django(1.8) to process it. I'm sure the client only submits the form only once. Howerver, the backend executed the related view function many times and return 504 when I submitted a little large image(about 2M).

Here is my html:

 <form action="/test/" method="POST" id="upload_form" enctype="multipart/form-data">
      {% csrf_token %}
      <a href="javascript:void(0);" class="addPic">
      <input id="choose_btn" class="btn" name="user_image"  type="file"></a>
 </form>
 <button type="button" id="upload_btn" class="btn btn-danger " data-loading-text="uploading..." autocomplete="off"> Upload!</button>

Here is my js(insure there is only one submit , inspired from https://stackoverflow.com/a/4473801/1902843):

$('#upload_btn').click( function () {
        var $btn = $(this).button('loading');
        $('#upload_form').submit(function(e){
            console.log("start submit");
            var $form = $(this);
            if ($form.data('submitted') === true) {
                // Previously submitted - don't submit again
                console.log("has submitted!");
                e.preventDefault();
            } else {
                console.log("first submitted");
                // Mark it so that the next submit can be ignored
                $form.data('submitted', true);
            }
        });
        $('#upload_form').submit();
    });

and my back-end view function is:

model

class UserImage(models.Model):
    image = models.ImageField(upload_to='./user_image/%Y%m/%d', storage=ImageStorage(), blank=False)
    detect_result = models.TextField(max_length=1000, blank=True)

view

@csrf_exempt
def test(request):
    # if use form's is_valid() function, it always return false. 
    # very weird, thus i annotate it
    # if request.method == 'POST':
    #     form = UploadFileForm(request.POST, request.FILES)
    #     if form.is_valid():
    user_image = request.FILES['user_image']
    im = UserImage(image=user_image)
    im.save() #after looking for log, it saved many times depending on image size?
    img_path = settings.MEDIA_URL + str(im.image)
    ...
    processing image
    ...

    return render_to_response('open.html', result_data)

Do you have submit invocation for twice in your javascript code: `$('#upload_form').submit(function(e){... $('#upload_form').submit();` — dani herrera, Apr 22 '15 at 12:02

score 0 · Answer 1 · answered Apr 23 '15 at 04:05

I would personally start by placing your submit button within the form.

<form action="/test/" method="POST" id="upload_form" enctype="multipart/form-data">
    {% csrf_token %}
    <a href="javascript:void(0);" class="addPic">
    <input id="choose_btn" class="btn" name="user_image"  type="file"></a>
    <button type="button" id="upload_btn" class="btn btn-danger " data-loading-text="uploading..." autocomplete="off"> Upload!</button>
</form>

And then use an event listener on the #upload_btn instead of triggering a click. Also, only call $('#upload_form').submit() once

$('#upload_btn').on('click', function (e) {  // Attach a click event listener
    // Check the form, display loading icon, etc
    // and when ready to submit the form ...
    $('#upload_form').submit();
});

thanks for your answer, but it doesn't solve my problem. i'm sure there is only one submit after check the server's log, but the view's function still run many times......I think it may related to image‘s size, because it only occurs when i submit a image bigger than 400KB. — t1mek1ller, Apr 23 '15 at 07:07

Django executes the view functions many times when client has submitted a form just only once

1 Answers1