Marco Lisei Marco Lisei - 1 month ago 23
jQuery Question

Fine Uploader: how can I append input hidden fields to the autoupload?

I had to move from dropzone.js to Fine Uploader because of the missing client resize image feature on the first one.
So I'm now having some issues trying to get the same results as I got with dropzone.

I need to append some hidden input fields to the image to be uploaded which it was easy to do on dropzone.
I've tried the Form option as described on Docs, but it sends all the form elements to the form action, but I only need to send just few data to a different page to perform Ajax requests on server side (hope it does make sense)

Input fields I need to append are:



the script I'm using:

$(document).ready(function () {
$('#fine-uploader').fineUploader({
template: 'qq-template',
form: {
element: 'modulomezzi',
autoUpload: true
},
request: {
endpoint: 'ajax_page.asp',
inputName: 'foto_gallery1'
},
thumbnails: {
placeholders: {
waitingPath: '/fine-uploader/placeholders/waiting-generic.png',
notAvailablePath: '/fine-uploader/placeholders/not_available-generic.png'
}
},
validation: {
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
}
});
});


Thanks

Answer

You can use the request.params option like below:

var uploader = new qq.FineUploader({
        element: document.getElementById("uploader"),
        template: 'qq-template',
        request: {
            endpoint: '/api/saveimage',
            params: {'param1': 'someValue', 'param2': document.getElementById('textInputId').value},
        },
        thumbnails: {
            placeholders: {
                waitingPath: '/img/fine-uploader/waiting-generic.png',
                notAvailablePath: '/img/fine-uploader/not_available-generic.png'
            }
        },
        validation: {
            allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
            itemLimit: 3
        },
    });

You can also use the setParams API to set your parameters with js anytime you see fit:

var params = {'param1': 'somevalue1', 'param2': 'somevalue2'};
uploader.setParams(params);

See doc: setParams