Add extra Form Data with JQuery File Upload ( Carrier wave implementation)

Question

Try to implement file upload functionality in a rails app with the help Jquery File Upload and carrier Gem.

while uploading each document, I need to save a tag for each document. I try a lot to add the tag to form data. but the system does not submit the tag to the server, only the uploaded files get saved and submitted

Upload tag in markup

<input id="fileupload" type="file" name="document[uploaded_file]" data-url="<%= documents_path %>"  multiple />
<div class="upload-progress progress progress-striped active">
  <div id="bar" class="bar" style="width:0%;"></div>
</div>

jquery method for upload

$('#fileupload').fileupload({
        dataType: 'html',
        progressall: function (e, data) {
            var percent = parseInt(data.loaded / data.total * 100, 10);

            var $uploadProgress = $('.upload-progress');

            $uploadProgress.find('bar').width(percent + "%");
        },
        add: function (e, data) {
            data.submit().error(function (xhr) {
                // Unfortunately this is not picked up by the global event handlers.
                var message = xhr.getResponseHeader('X-Message');
                if (message) {
                    showAlert(message);
                }
            });
        },
        progress: function (e, data) {
            var percent = parseInt(data.loaded / data.total * 100, 10);
            $('#upload-dialog').find('bar').width(percent + "%");
        },
        done: function (e, data) {
            if (data.result.trim() == '') {
                data.context.remove();
            } else {

                 $('#upload-dialog').modal('hide');

                //remaiing action
            }
        },
        fail: function (e, data) {
            data.context.remove();
        }

    });

How can I add a tag to the document while uploading the docs? Upload perform on the file upload event of the JQuery UI library

Answer 1

You should use formdata to do so

data.formData = {example: val};

see docs for mor explanation