Set value of hidden field AFTER file upload completes using blueimp File Upload

Question

i have the below code which uploads and displays an alert of the file uploaded absolutely fine. However, as i am adding stuff to the file name when it saves it to my server, id like the done function inside the jquery to update the value of a hidden field with the saved filename. I thought this would be simple, but it isn't. Let me show you the code i am working with:

function to upload files of each appended item form. This works as it should:

function bindFileUpload() {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
            });
        }
    });
};

The code i am using to append more item forms is below. Again this works fine in conjunction with the above function. The input i want to set a value to is .itemPhotoFile

$(document).on('click','.addItem', function(){
    $('<!--ROW START-->\
        <form class="widget-content item">\
            <div class="row">\
                <div class="col-md-3"><input type="text" class="form-control" name="itemName[]"></div>\
                <div class="col-md-3"><textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
                <div class="col-md-3"><textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
                <input type="hidden" class="itemId" name="itemId[]" value="">\
                <input type="hidden" class="itemPhotoFile" name="itemPhoto[]" value="">\
                <input type="hidden" name="itemInventoryId[]" value="<?=$_GET["inventory_id"]?>">\
                <input type="hidden" name="itemParent[]" value="'+$(this).closest('.formHolder').data('parent-room')+'">\
                <div class="col-md-2">\
                    <div class="fileinput-holder input-group" data-item-id="">\
                        <!-- <div class="uploadPhotoBox">Upload Photo</div> -->\
                        <input class="fileupload" type="file" name="files[]" data-url="uploads/">\
                    </div>\
                </div>\
                <div class="col-md-1 align-center"><i class="save icon-ok large"> </i>&nbsp;&nbsp;&nbsp;<i class="delete icon-trash large"> </i></div>\
            </div>\
        </form>\
    <!--/ROW END-->').fadeIn(500).appendTo($(this).parents().siblings('.items')).each(function(){
        bindFileUpload();
    });
    $(this).parents().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn();
});

i have tried ideas such as:

function bindFileUpload() {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
                $(this).closest('.itemPhotoFile').val(file.name);
            });
        }
    });
};

but no luck, i dont think it knows what $(this) is properly and cant find the input. I cant find the value of the input field BEFORE upload as this isnt the final filename. So it is important for it to work AFTER the success of the upload.

Thanks!

Answer 1

You're going to want to search from within the "form" that is passed inside the data argument:

function bindFileUpload() {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
                data.form.find('.itemPhotoFile').val(file.name);
            });
        }
    });
};

Answer 2

Inside $.each(), this is the current element of the iteration. But even if it weren't, I don't think the File Upload plugin binds this in the .done callback to the original element. So I think you need to do it explicitly with a loop:

function bindFileUpload() {
    $('.fileupload').each(function() {
        var $that = $(this);
        $that.fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    alert(file.name);
                    $that.closest('.itemPhotoFile').val(file.name);
                });
            }
        });
    });
};