• Registered: 2011-03-25
  • Posts: 5

Topic: Issue submitting the form

Dear All,

Basically, I have a big form, and inside this one, I added plupload :

            <div id="uploader">
                <p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
            </div>

When I click on the submit button, photos uploading starts and finished but the main form is not submitted.

Should I provide more code?

I'am using this code for the JS part:

$(function() {
    // jQuery plupload : Convert divs to queue widgets when the DOM is ready
    $("#uploader").pluploadQueue({
        // General settings
        runtimes : 'gears,flash,silverlight,browserplus,html5',
        url : '../x-upload/upload.php',
        max_file_size : '5mb',
        chunk_size : '100kb',
        unique_names : true,

        // Resize images on clientside if we can
        resize : {width : 800, height : 600, quality : 60},

        // Specify what files to browse for
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"}
        ],

        // Flash settings
        flash_swf_url : '../x-upload/js/plupload.flash.swf',

        // Silverlight settings
        silverlight_xap_url : '../x-upload/js/plupload.silverlight.xap'
    });

    // Client side form validation
    $('form').submit(function(e) {
        var uploader = $('#uploader').pluploadQueue();

        // Validate number of uploaded files
        if (uploader.total.uploaded == 0) {
            // Files in queue upload them first
            if (uploader.files.length > 0) {
                // When all files are uploaded submit form
                uploader.bind('UploadProgress', function() {
                    if (uploader.total.uploaded == uploader.files.length)
                        $('form').submit();
                });

                uploader.start();
            } else
                alert('You must at least upload one file.');

            e.preventDefault();
        }
    });
});

I'll be back here tomorrow.

  • Registered: 2011-03-25
  • Posts: 5

Re: Issue submitting the form

Is my topic not clear at all?

I can provide the full code to anybody who is willing to help with this...

  • Registered: 2011-03-25
  • Posts: 5

Re: Issue submitting the form

Otherwise, is there any way to trigger a message to warn the user "Your photos have been uploaded, please click Send again"?

Thanks for your help.

  • Registered: 2011-03-25
  • Posts: 5

Re: Issue submitting the form

Where can I get support for Plupload?

  • davit
  • Maintainer
  • Offline
  • Registered: 2010-11-29
  • Posts: 2,143

Re: Issue submitting the form

@Julien, yes provide complete code sample please, including html/js.

If you want to see your issue fixed, do not report it here, do it on - GitHub.
  • Registered: 2011-03-25
  • Posts: 5

Re: Issue submitting the form

Finally, the form is sent after the pictures are uploaded.
But now my problem is that the uploader_count always remains at 0.

The photos are uploaded, but when clicking the submit button, here is what happens : [uploader_count] => 0 )

When Clicking Add Files > Start upload (in plupload box), it works just fine...

7 Reply by zeilstar (edited by zeilstar 2011-05-09 21:47:43)

  • Registered: 2011-05-02
  • Posts: 10

Re: Issue submitting the form

BUMP

Thanks for your support Davit! We really appreciate it.

I am having a similar problem. In PHP I am using a self referencing form, displaying some fields and the file picker when the form isn't submitted, and displaying the results after the form is submitted.

If I click on the submit button to start the upload, the form will 'submit' when completed but I get [uploader_count] => 0

If I start the upload, then click 'submit', the files will move, then the page will be submitted. [uploader_count] => 0

Only when I wait for all files to finish uploading and click submit does the data actually get posted correctly.

So does anybody know of a way to keep the submit button blocked until all files have finished uploading? Or if the submit button was clicked during uploading, make sure data gets posted. I know it will not submit if you have selected no files.

  • terun
  • New member
  • Offline
  • Registered: 2011-05-16
  • Posts: 1

Re: Issue submitting the form

I experienced a similar problem too.
My workaround is to use 'StateChanged' event instead of ' UploadProgress' event at line 36 of Julien's js code. Please try.

I think this is a bug.
In jquery.plupload.js, the form is prepared on 'StateChanged' event,
but the form is submitted before prepared when you use 'UploadProgress' event.
There is no problem with an older version of plupload.
May be some thing changed about event sequences.

  • Registered: 2011-05-02
  • Posts: 10

Re: Issue submitting the form

Hi Terun,
I tried adding what you had suggested. I don't see any difference. Maybe I'm just doing it wrong? I don't have a lot of javascript experience.

  • davit
  • Maintainer
  • Offline
  • Registered: 2010-11-29
  • Posts: 2,143

Re: Issue submitting the form

Try something like this, instead of what is provided in examples (should have updated them a while ago  I guess neutral)

   $('form').submit(function(e) {
         var uploader = $('#uploader').pluploadQueue();

        // Files in queue upload them first
        if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('StateChanged', function() {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    $('form')[0].submit();
                }
            });
                
            uploader.start();
        } else
            alert('You must at least upload one file.');

        return false;
    });
If you want to see your issue fixed, do not report it here, do it on - GitHub.
  • Registered: 2011-05-02
  • Posts: 10

Re: Issue submitting the form

Davit +1

  • Registered: 2011-09-04
  • Posts: 3

Re: Issue submitting the form

I attempted incorporating everything you experienced suggested. I can't use whatever big difference. Possibly Now i'm merely performing it inappropriate? I wouldn't have a wide range of javascript experience.But i am learning and i hope i will learn from you guy alot.

  • Registered: 2011-10-07
  • Posts: 1

Re: Issue submitting the form

davit wrote:

Try something like this, instead of what is provided in examples (should have updated them a while ago  I guess neutral)

   $('form').submit(function(e) {
         var uploader = $('#uploader').pluploadQueue();

        // Files in queue upload them first
        if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('StateChanged', function() {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    $('form')[0].submit();
                }
            });
                
            uploader.start();
        } else
            alert('You must at least upload one file.');

        return false;
    });

I'm not much experienced at java, so i copypaste it into and it works fine. Thanks

14 Reply by pavabe66 (edited by pavabe66 2011-10-09 19:43:23)

  • Registered: 2011-09-28
  • Posts: 3

Re: Issue submitting the form

I'm using pluload in a form, sometimes a user add a file (then it goes wrong). 

<script type="text/javascript">
$(function() {
    $("#uploader").pluploadQueue({
        runtimes : 'flash',
        url : 'uplfoto/upload.php',
        max_file_size : '10mb',
        chunk_size : '250kb',
        unique_names : false,
        urlstream_upload: true,
        max_total_queue: 20, // thanks to ilslab
        //resize : {width : 800, height : 600, quality : 90},
        filters : [    {title : "Foto bestanden", extensions : "jpg,jpeg,gif,png"}    ],
        flash_swf_url : 'uplfoto/js/plupload.flash.swf',
    });
    
    $('form').submit(function(e) {
        var uploader = $('#uploader').pluploadQueue();
        if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('StateChanged', function() {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    $('form')[0].submit();
                }
            });
                
            uploader.start();
        } //else // COMMENT OUT WHEN NO FILES SELECTED AND STILL WANT TO SEND THE FORM
            //alert('You must at least upload one file.');

        //return false;
    });
});
</script>

If I remove the // before return false; the files are send but it's not going to the prosess.php file, and otherwise the files are not send but it goes to the process.php

<form id="main_form" name="main_form" method="post" enctype="multipart/form-data" action="process.php">

I have also tried to change the $('form') into $('#main_form') with no result.

Is there someone who have the solution for this? thanks in advandge.

greetings (sorry for my bad english)

  • Registered: 2011-03-01
  • Posts: 7

Re: Issue submitting the form

I have the same problem as pavabe66.

I have tried with varied settings but cannot get it work properly.

If I press the submit button in my form, the upload starts but the form does not submit.

Any workaround for this?

  • Registered: 2012-05-17
  • Posts: 5

Re: Issue submitting the form

dear all! is it solved?  i have the same question ,too

  • Registered: 2012-05-28
  • Posts: 1

Re: Issue submitting the form

Useful information shared..Iam very happy to read this post..thanks for giving us nice info

18 Reply by lazzy (edited by lazzy 2012-06-18 19:36:36)

  • lazzy
  • New member
  • Offline
  • Registered: 2012-06-18
  • Posts: 2

Re: Issue submitting the form

I think I am a bit lost and am not sure this is the same problem I am having.

I am using the jquery plugin and the widget works great. I can drag files in and click the upload button, then click the submit button and the files look like they are getting submitted. I havent done much farther than that right now. The problem is that if you do not click the upload button, and just the submit button, no files will be uploaded. Since I am making my application for people that well, are computer challenged, I am almost certain that they will forget to click the upload button and just hit the submit button.

Anyway, the javascript that was posted by davit looks like it would solve my problem, but where to put it? In the plupload.js file?

Also, after the upload button is clicked, it is gone until you reload the page. I was wondering if this is normal or if the button should come back if you want to upload more files?