jQuery file upload: Is it possible to trigger upload with a submit button?

jquery file upload submit programmatically
open file browser on button click jquery
how to open file upload dialog box on button click
upload file on button click
jquery file upload example
upload image on button click using jquery
jquery file upload events
jquery post file upload

I'm using jQuery file upload for AJAX-based uploads. It always starts uploading after a file is selected. Is it possible to change the behavior to use the "submit"-button? I am aware of Issue #35, but the Option beforeSend seems to have been removed.

I am using the Basic Plugin, not the full version.

Maybe I should just switch to plain-XHR-based uploading as suggested there: jQuery Upload Progress and AJAX file upload.

if you have the button

<button id="up_btn">Upload</button>

You can try with

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {            
        $("#up_btn").off('click').on('click', function () {
            data.submit();
        });
    },
});

EDIT: according to comments a better answer considere off to avoid duplicated requests. (also work unbind, I do not check if is bind and unbind but jquery team recommend on and off link since 1.7)

How to upload a file after submit clicked and not on "add" event , I'm using jQuery file upload for AJAX-based uploads. It always starts uploading after a file is selected. Is it possible to change the behavior to use the  Questions: I’m using jQuery file upload for AJAX-based uploads. It always starts uploading after a file is selected. Is it possible to change the behavior to use the “submit”-button? I am aware of Issue #35, but the Option beforeSend seems to have been removed. I am using the Basic Plugin, not the full version. Maybe

None of these answers will work for multiple file uploads. My case involved allowing multiple attachments in a comment thread. So I needed to save the comment first to get the id, and then upload and save all the attachments. This seems like a trivial thing, but with this plugin its not that intuitive. My solution uses custom events in jQuery, and works great.

The currently accepted answer binds to the click event of a button in the 'add' callback, but the 'add' callback is called once for each file. If you unbind all the events each time only the last file will upload.

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {
        $("#up_btn").on('customName', function (e) {
            data.submit();
        });
    },
});

By binding the submit button to a custom name, we can do whatever preprocessing we want before submitting the images. In my case it involved submitting the comment and getting back the comment id which I did in a separate call. This code just responds to the click, but you can do whatever you want before triggering the event.

$("#up_btn").on('click', function (e) {
    e.preventDefault();
    $("#up_btn").trigger( "customName");
});

You can pass any data you want when you trigger the event, so it really gives you complete control over your form.

How to submit additional form data · blueimp/jQuery-File-Upload , https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-queue-files-and-start- It should be uploaded when the form submit button was clicked and not when submit button, (I'd like to know) but if you want to upload the file with a normal  Hi, is it possible to launch upload when user presses an upload button instead of starting upload automatically ? Thank you for your help

You can also find in jquery.fileupload.js

There is an 'autoUpload' option in line 142.

uploadedBytes: undefined,
// By default, failed (abort or error) file uploads are removed from the
// global progress calculation. Set the following option to false to
// prevent recalculating the global progress data:
recalculateProgress: true,
// Interval in milliseconds to calculate and trigger progress events:
progressInterval: 100,
// Interval in milliseconds to calculate progress bitrate:
bitrateInterval: 500,
// By default, uploads are started automatically when adding files:
autoUpload: true    // <<---------- here

Frequently Asked Questions · blueimp/jQuery-File-Upload Wiki , The easiest way to submit additional form data is by adding additional input fields to the upload form: <form id="fileupload" action="server/php/"  I have a html form, with a custom file upload field. And by that I mean that I have moved the actual file field beyond the borders of the page with css, that I have a custom input field and button in place, and that I have a jquery click event attached to that custom button to trigger the file input dialog. It all works fine, in every browser.

You can do that by hooking into the add event. There you prevent the uploader from doing its default behavior. The jquery-file-upload-docs explain that, but it's a bit hard to find.

The following is written in the blueimp basic uploader tutorial:

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<button/>').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

It actually is very important, that the submit button you're creating is not inside the form!

Open Fileupload (Upload File) on Button Click using JavaScript and , It is possible to upload files up to 4 GB with the jQuery File Upload plugin. However, another file input button can be used to trigger the file  I have a hidden file upload as it looks really bad, I have displayed a nicer looking button and would like it to click the hidden file upload when its clicked.

Make sure not to stack events by attaching event every time the file is added. That way the form will be submitted multiple times.

I would do something like this

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {            
        $("#up_btn").off('click').on('click', function () {
            data.submit();
        });
    },
});

Notice the off() method to remove all previous attached events.

A strategy for handling multiple file uploads using JavaScript, TAGs: JavaScript, jQuery, HTML, FileUpload. When the Button is clicked, it triggers the Click event of the Fileupload element which in turn opens the File <​input type="button" id="btnFileUpload" value="Select File" />. I have this form working but it only seems to work for your PHP script. My company uses an external upload handler which requires the name of the input file field be 'data', a separate field for image caption (the name of this field must be 'caption'), and the form's enctype must be 'multipart/form-data.

Mini AJAX File Upload Form, And each file needs to be able to have its own meta data sent with it, i.e… Now we are going to hook into the form's submit event to trigger our uploads. File input styling. To achieve a cross-browser styling of the "Add files" button, the file input field is made transparent and positioned on top of the fileinput-button label - see the CSS definitions for the "fileinput-button" class in jquery.fileupload.css. Why isn't it possible to programmatically trigger the file input selection?

How to upload files asynchronously using jQuery?, For the purpose, we will combine the powerful jQuery File Upload plugin with the There are two ways a visitor can upload files with this form: Update the hidden input field and trigger a change // so that the jQuery knob  By default, the plugin calls jQuery's serializeArray method on the upload form to gather additional form data for all input fields (including hidden fields). The value of these form fields will be sent to the server along with the selected files.

How To Create a File Upload Button, It works exactly the same as the definition, when we select file from the browser and click submit button, the browser takes file from local machine and submit it to​  It is possible to upload files up to 4 GB with the jQuery File Upload plugin. By making use of Chunked file uploads (with chunks smaller than 4GB), the potential file size is unlimited. The restriction of 4 GB is due to some browser limitations, which might be fixed in future updates to those browsers: Firefox bug references:

Comments
  • Make sure the #up_btn button is not in #fileupload form.
  • You also probably want to use one instead of on (and rebind the event post-submit) to avoid duplicated requests
  • This will work to prevent duplicate requests: $("#imgupload").unbind('click').on('click', function(){data.submit();}); as @zykadelic suggested
  • @inye Yes. But the event was bound multiple times. off and on worked like expected. See an example with one here: jsfiddle.net/jet8umej
  • This does not allow uploading of multiple files. For multiple file upload, add function is called for all selected files and hence it removes the click event of previous files and in the end last registered click event is executed
  • This is a more complete solution. Thank you Jeff!
  • I don't see how this provide an answer to the question. Unless you are using the UI plugin, you should set the autoUpload to false to trigger the upload when clicking on a button. But that's just the easy part. Then you have to manage the click event.
  • I have tried both cases, by placing button in form and outside form, in first case it send two request and then redirect to index page while is second case it sends one request but keep on the same new/edit page. I want it to send one request and go back to index page on successful create
  • It does work, but if you select more than one file, the progress bar update works just for the last one.
  • I'm using the basic plugin, not the full version. I don't see any "-ui.js" in the basic plugin.