jQuery File Upload library: how to upload with a click for a SINGLE file

Question

According to this section jQuery-File-Upload Basic plugin documentation , you can upload file upon a click of a button by using add . however, this causes an additional 'Upload' button to be added each time the user select a file, whereas my app only accepts a single upload.

see JS fiddle here

so how to achieve this: when user clicks Choose file the 2nd time, that file replaces the initial file and only one upload button is present at any moment.

Thanks!

Answer 1

It looks like a new button is getting added every time the 'Add' event fires with this line:

$('<button/>').text('Upload').appendTo(document.body)

You can prevent re-adding the button in multiple ways, here's a simple example:

if ($("button:contains('Upload')").length == 0) {
    $('<button/>').text('Upload').appendTo(document.body)
}

You'll probably have to update the code to rebind the 'click' function with the new data being submitted.