Using the AjaxFileUpload function

Question

I am using the AjaxFileUpload script and it works well, however i was trying to get it to require the pressing of a button. Right now it fires directly after you find your image to upload on the file browser. I cannot tell why and I think it is how the plugin is written, but maybe you can take a look at the logic:

This method works: The file is uploaded right after it is submitted.

<form method="post" action="" enctype="multipart/form-data">
    <label>File Input: <input type="file" name="file" id="demo1" /></label>
    <div id="uploads">

    </div>
</form>
<script type="text/javascript">
    $(document).ready(function() {
        $("#demo1").AjaxFileUpload({

    });
</script>

This method does not work. Clicking the Submit button will do nothing. However, the second time a file is browsed to (file button is clicked for a second time) it will operate in the same manner as the first method.

<form method="post" action="" enctype="multipart/form-data">
    <label>File Input: <input type="file" name="file" id="demo1" /></label>
    <div id="uploads">

    </div>
</form>
<input class = "Submit" name="Submit" type="button" value="Submit" />
<script type="text/javascript">
    $(document).ready(function() {
        $(".Submit").click(function(){
            $("#demo1").AjaxFileUpload({

            });
        });
    });
</script>

I think there is a fundamental programming issue here I am missing. If you are interested in the (short) code of this plugin here is the link: https://github.com/davgothic/AjaxFileUpload/blob/master/jquery.ajaxfileupload.js

use `https://github.com/LPology/Simple-Ajax-Uploader` with callback functions `onChange( filename, extension, uploadBtn )` or `onSubmit( filename, extension, uploadBtn )` — waki, Apr 16 '14 at 05:25

score 2 · Answer 1 · answered Jul 25 '15 at 05:00

You have probably got a fix for this at this point. But for the sake of others that could be coming in here to find an answer for the same problem, here is how it's done.

There is a parameter in the ajaxfileupload method call, called submit_button. If you set that, the file will NOT be automatically uploaded when you select it. The method will actually wait for you to press the specified button for the upload to happen.

Based on the example you provided, this would do it:

Add an ID to the submit button (haven't tested with the JQuery class specifier):

<input class = "Submit" name="Submit" id="Submit" type="button" value="Submit" />

Then add the submit_button parameter:

$("#demo1").AjaxFileUpload({
    // other parameters omitted like in example provided
    'submit_button': $('#Submit')
});

score 1 · Accepted Answer · answered Apr 16 '14 at 05:30

1

Use this:

<script type="text/javascript">
    $(document).ready(function() {
        $("#demo1").AjaxFileUpload({

            });

        $(".Submit").click(function(){
            $("#myform").submit();
        });

    });
</script>

myform is the id of form.

HTML:

<form method="post" action="" enctype="multipart/form-data" id="myform">
    <label>File Input: <input type="file" name="file" id="demo1" /></label>
    <div id="uploads">

    </div>
</form>
<input class = "Submit" name="Submit" type="button" value="Submit" />

answered Apr 16 '14 at 05:30

Manwal

23,450
12
63
93

Ok sorry still doesn't work. As soon as I select the file from the file browser, it uploads it. I still don't have control over the function AjaxFileUpload – user3479138 Apr 16 '14 at 23:21
If you want to skip struggling, there is a library out IE7+ compatible, firefox, chrome, etc. No Forms required, no swf... http://stackoverflow.com/a/17310042/1876355 – Pierre Jun 28 '14 at 16:08

Using the AjaxFileUpload function

2 Answers2