JQuery Fileupload with form data and only single file

Question

I am trying to get JQuery fileupload running on our website. Now we need to have data submitted at the same time as the fileupload and also to only allow 1 file itself to upload. In the end what I can't figure out how to do is clear the previously added file from jquery fileupload and make sure that there's only ever 1 file and 1 request being sent to the server. Cut down version of my form.

<form enctype="multipart/form-data" id="TestCreateForm" method="post">
<label for="Form_staffMember">Staff Member</label>
<input id="Form_staffMember" name="Form.staffMember" type="text" />

<input id="FileUpload" name="FileUpload" type="file" value="" />

<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
<!-- The global progress bar -->
<div id="progress" class="progress">
    <div class="progress-bar progress-bar-success"></div>
</div>

<div class="form-group">
    <div>
        <button class="btn btn-default">Upload</button>
    </div>
</div></form>

Current Javascript

<script>
    $(function () {
        var sendData = true;
        $('#FileUpload').fileupload({
            dataType: 'json',
            autoUpload: false,
            add: function (e, data) {
                console.log('add');
                var clearOldData = true;
                $('#TestCreateForm button').on('click', function () {
                    //alert('TestCreateForm button click');
                    //data.abort();
                    if (sendData) {
                        var serialArray = $('#TestCreateForm').serializeArray();
                        data.formData = serialArray; //$('#TestCreateForm').serializeArray();
                        sendData = false;
                    }
                    data.submit();
                    clearOldData = false;
                });
                if (clearOldData) {
                    $("#files").empty();
                }
                $.each(data.files, function (index, file) {
                    var filename = file.name;
                    $('<p/>').text(filename).appendTo('#files');
                });
            },
            done: function (e, data) {
                sendData = true;
                console.log('done');
                /*$.each(data.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo('#files');
                });*/
            },
            progressall: function (e, data) {
                console.log('Progressall');
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        }).prop('disabled', !$.support.fileInput)
    .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
</script>

Answer 1

I have a trash button next to my file upload field, but you can try it with a download template, as you can see here When I finish uploading a file, I send to my application an id to identify the file, so I can use it to delete it from an ajax call if I need it.

Limiting to only one file is easy too: I use add event to check first if my file field has a file id (so, this field would be filled). If not, I start the file upload.

Please, check this for API and this, for add callbacks

Hope this can help you.

Regards