jQuery-File-Upload - Multiple input file in one form

Question

The plugin " blueimp/jQuery-File-Upload " drives me crazy. Inside a form, I have 2 file input: One for image and the other for document.

<form id="file-upload">

<!--File 1 : Image -->
<input id="file-img" name="file1" type="file">
<input id="txt-file-img" type="text" class="form-control" style="background:white;" readonly>

<!--File 2 : Document -->
<input id="file-doc" name="file2" type="file">
<input id="txt-file-doc" type="text" class="form-control" style="background:white;" readonly>

</form>

I would like to apply a different test (size and type) according to the input used to select the file. I can't find in the documentation how to manage this simple situation.

$('#file-upload').fileupload({
    dataType: 'json',
    autoUpload: false,
    add: function (e, data) {
        var uploadErrors = [];
        var acceptImgTypes = /^image\/(gif|jpe?g|png)$/i;
        var acceptDocTypes = /^application\/(pdf|msword)$|^text\/plain$/i;

        /**TEST HERE**/
        /** How to make the distinction between data coming from file-img and data coming from file-doc ? ***/
        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('Not an accepted file type');
        }
        if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 4000000) {
            uploadErrors.push('File size is too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
        /** Same problem here I need to make the distinction  in order to update the right input[type=text]***/
            $.each(data.files, function (index, file) {
                $("#txt-file-img").val(file.name);
                $("#txt-file-doc").val(file.name);
            });

            $("#btn_add_valid").on('click',function () { 
                $("#loading_modal").modal("show");  
                data.submit();
             });
        }
    },
    done: function (e, data) {
        $("#loading_modal").modal("hide");
        $("#output").html('<p class="sucess">OK!</p>');
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#upload-progress .bar').css(
            'width',
            progress + '%'
        ).text(
            progress + '%'
        );
    },
    fail: function (e, data) {
        $("#output").html('<p class="error">FAIL!</p>');
    }
});

Do you know how to manage multiple input[type=file] with this plugin?

Thank you very much for your help

Answer 1

I have found a solution with the parameter "name" of the input:

If you have 2 different names for your input (example : file1 & file2), you know what is the origin of the selected file with the following test:

if (data.paramName=="file1")
{
    .....
}else{
    ....
}

So I did the test for the type and the size as below:

var uploadErrors = [];
var acceptImgTypes = /^image\/(gif|jpe?g|png)$/i;
var acceptDocTypes = /^application\/(pdf|msword|vnd.openxmlformats-officedocument.wordprocessingml.document)$|^text\/plain$/i;


if (data.paramName=="file1")
{
    if (data.originalFiles[0]['type'] && !acceptImgTypes.test(data.originalFiles[0]['type'])) 
    {
        uploadErrors.push('Not an accepted file type');
    }
    if (data.originalFiles[0]['size'] && data.originalFiles[0]['size'] > 4000000) 
    {
        uploadErrors.push('File size is too big');
    }
}
else
{
    if (data.originalFiles[0]['type'] && !acceptDocTypes.test(data.originalFiles[0]['type'])) 
    {
        uploadErrors.push('Not an accepted file type');
    }
    if (data.originalFiles[0]['size'] && data.originalFiles[0]['size'] > 10000000) 
    {
        uploadErrors.push('File size is too big');
    }
}

Same thing with the inputTxt (with the file name)

if (data.paramName=="file1")
{
    $("#txt-file-img").val(data.files[0].name);
}
else
{
    $("#txt-file-doc").val(data.files[0].name);
}

The tests are fine but now I have an error during the upload :

"error":"File upload aborted"
"deleteType":"DELETE"

Do you understand why?

Thank you very much

Answer 2

I did not understand why it's not working with data.paramName but I have found another solution to know on which input the file was selected:

data.fileInput[0].id

So the final solution looks like:

if (data.fileInput[0].id=="file-img")
{
    ...
}
else
{
    ....
}

I have removed all the name parameters of my file input and it works!