$_FILES empty when input generated by jquery

Hello guys,

I am trying to upload some images. For a better User experience I add a new input(file) where the user can attach an image.
But when this inputs were generated by jquery the variable $_FILES is empty. When I put in a static input(file) the image will be uploaded correctly.

jQuery:

Code:

$( "#new" ).click(function() {
         $( ".upload-area" ).append( "<div><input type='file' name='image[]' class='input-file'><a class='remove'>Löschen</a></div>");
     });
     $("body").on("click", ".remove", function (e) {
        $(this).parent("div").remove();
});

My form:

PHP Code:

<div class="container-fluid">
                <!-- Row -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <a href="#magazine-form" data-toggle="collapse" data-target="#magazine-form">
                                    <h3 class="panel-title">test<i class="fa fa-caret-down fa-fw pull-right"></i></h3>
                                </a>
                            </div>
                            <div id="magazine-form" class="panel-collapse collapse in">
                                <div class="panel-body">


                                    <?php echo validation_errors();?>
                                    <?php echo form_open_multipart('admin/estate/create');?>


                                        <div class="form-group">
                                            <label for="title">test</label>
                                            <?php echo form_input($in_title);?>
                                        </div>
                                        <div class="form-group">
                                            <label for="title">test</label>
                                            <?php echo form_input($in_subtitle);?>
                                        </div>
                                        <div class="form-group">
                                            <label for="title">test</label>
                                            <?php echo form_input($in_city_id);?>
                                        </div>
                                        <div class="form-group">
                                            <label for="title">test</label>
                                            <?php echo form_dropdown('customer_id', $customers, '', 'class="form-control"');?>
                                        </div>
                                        <div class="form-group">
                                            <label for="title">test</label>
                                            <?php echo form_dropdown('magazine_id', $magazines, '', 'class="form-control"');?>
                                        </div>
                                        <div class="form-group">
                                            <label for="title">test</label>
                                            <?php echo form_input($in_magazine_page);?>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Row -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <a href="#magazine-desc" data-toggle="collapse" data-target="#magazine-desc">
                                    <h3 class="panel-title">test<i class="fa fa-caret-down fa-fw pull-right"></i></h3>
                                </a>
                            </div>
                            <div id="magazine-desc" class="panel-collapse collapse">
                                <div class="panel-body">
                                        <div class="form-group">
                                            <label for="title">test</label>
                                            <?php echo form_textarea($in_description);?>
                                        </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Row -->
                <div class="row">
                    <div class="col-md-12">
                        <!-- Panel -->
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <a href="#magazine-file" data-toggle="collapse" data-target="#magazine-file">
                                    <h3 class="panel-title">Bilder<i class="fa fa-caret-down fa-fw pull-right"></i></h3>
                                </a>
                            </div>
                            <div id="magazine-file" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <a class="btn btn-success" id="new">Add image</a>
                                    <div class="upload-area">
                                        <input type="file" name="image[]" class="input-file"><!-- this will uploaded correctly -->
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <input class="btn btn-default pull-right form-control input-lg" type="submit" value="create">
                </form>
            </div>
        </div> 


Sorry for the big html code :/ Just want to make sure you got a chance to find the error.

Any ideas to solve this?

Does anything after form_input($in_magazine_page) show up in your post? Since your form opens inside #magazine-form's .panel-body, it's likely that the form will be closed by the browser when you close the .panel-body div.

This may also mean that even if the original file input works, anything added to the .upload-area via JavaScript may be appended to the DOM outside the form. You should be able to see what's going on when you insert the inputs in your browser's debugger.

You could also try changing your script to do this:

Code:

$( "#new" ).click(function() {
   $('form input:file').last().after("<div><input type='file' name='image[]' class='input-file'><a class='remove'>Löschen</a></div>");
});

(though you'll have to modify that slightly to keep it from nesting the inserted file inputs inside the wrapping divs)

Bonfire

Practical CodeIgniter 3
CodeIgniter Testing Guide

I tried your code but I got the same behavior like before :/

When I look in the browser debugger the inputs were put in the right wrappers.

//edit:

Solved my problem. I just had to put the opening form-tag out of everything. Thanks for your suggestions!