CODEWITHSUNDEEP
javascriptjqueryhtmlforms
zundi
zundi

Reputation: 2457

Selected file gets removed when I add another file input field

I have a form in which I add new file input fields as the user needs. I'm surrounding the input by a div, as so:

<div id="fileinputs">
    <div class="myinput">
        <label for="PropertyPic01">Photos</label>
        <input type="file" name="data[Property][pic01]" id="PropertyPic01">
    </div>
</div>

My jQuery code does the following:

//Add Pic link
$('#addPic').click(function(e)
{
    if(!window.fotoCtr)
    {
        window.fotoCtr = 2;
    } else
    {
        window.fotoCtr++;
    }

    if(window.fotoCtr == 5)
    {
        $('#addPic').html('');
    }

    e.preventDefault();
    $('div#fileinputs').html($('div#fileinputs').html() + 
        '<div class="input file">' +
        '<input type="file" name="data[Property][pic0' + window.fotoCtr + ']" id="PropertyPic0' + window.fotoCtr + '">' +
        '</div><br/>'
        );
})

The issue I'm having is that adding another file input field as I do above causes the selected files from other inputs to be removed. Is there anyway to fix this?

Upvotes: 0

Views: 109

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

Use instead of html() the append() method, this will keep data bound to previous elements as files:

$('div#fileinputs').append(
        '<div class="input file">' +
        '<input type="file" name="data[Property][pic0' + window.fotoCtr + ']" id="PropertyPic0' + window.fotoCtr + '">' +
        '</div><br/>');

Upvotes: 1

Related Questions