Search code examples
javascriptphpjqueryjquery-file-upload

How to send custom attribute for chunk file upload


I'm using blueimp file upload plugin but I don't for multiple files but I don't know how to send custom attributes. I wanted to send all these custom attribute to server with each chunk no problem(how we send formData). How we send for formData similarly, can I send attribute?

var formdata = new formData();

formdata.append('filename',currentFile[i]);

formdata.append('filesize',currentFile[i].size);

Note: I wanted to send the data in chunks

Here is a code what I'm trying jsfiddle(in firefox opens perfectly): http://jsfiddle.net/davidchase03/ChJ9B/

HTML

<input id="fileupload" type="file" name="files[]" multiple>
<div class="progress">
    <div class="meter" style="width: 0%;"></div>
</div>
<div class="data"></div>

JavaScript

$(function () {
    $('#fileupload').fileupload({
        url: '/echo/json/',
        maxChunkSize: 1048576,
        maxRetries: 3,
        dataType: 'json',
        multipart: false,
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10),
                meter = $('.progress .meter'),
                percent = progress + '%';
            meter.css('width', percent).text(percent);
        },
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo('.data');
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        },
        fail: function (e, data) {
            data.context.text('Upload failed.');
            $('.progress').addClass('alert');
            console.warn('Error: ', data);

        }
    }).on('fileuploadchunksend', function (e, data) {
         // if (data.uploadedBytes === 3145728 ) return false;
    }).on('fileuploadchunkdone', function (e, data) {

    });
});

Question: to make you clear this is what I wanted How to send custom data to server using jquery-file-uploader

Please help me thanks in advance!!!


Solution

  • You can send additional custom attribute using headers options. Example:

    $(function () {
        $('#fileupload').fileupload({
            url: '/echo/json/',
            ...
            headers : {
               customAttribute: 'customValue'
            }
    });
    

    For Dynamic values, you can use beforeSend callback as explained in the following example

    $(function () {
        $('#fileupload').fileupload({
            url: '/echo/json/',
            ...
            beforeSend : function(xhr) {
               xhr.setRequestHeader("customAttribute", someCalculateValueFunction('customValue'));
            }
    });