Dynamically Add Customized HTML Form File Input with jQuery

Question

I have some jQuery, JavaScript, and CSS that allows me to customize the appearance of HTML form file inputs. I also have a bit of jQuery that allows users to dynamically add as many files as they need to attach.

The problem I'm having is that after a user selects their first file, presses add, and adds the second file, the behavior of the customized input type doesn't apply.

I have a JSFiddle that you can view here:

JSFiddle - Dynamically Add Customized HTML File Inputs

HTML

<div id="file_container">
  <span class="file-wrapper"><input type="file" name="files[]"><span class="file-button">Choose File</span></span><br>
  <div id="file_tools">
    <img src="http://i59.tinypic.com/5niuxd.png" id="add_file" title="Add Another File">
    <img src="http://i60.tinypic.com/102ktmq.png" id="del_file" title="Remove Last File">
  </div>
</div>

JavaScript / jQuery

var CUSTOMUPLOAD = CUSTOMUPLOAD || {};

CUSTOMUPLOAD.fileInputs = function() {
  var $this = $(this),
      $val = $this.val(),
      valArray = $val.split('\\'),
      newVal = valArray[valArray.length-1],
      $button = $this.siblings('.file-button'),
      $fakeFile = $this.siblings('.file-holder');
  if(newVal !== '') {
    $button.text('File Chosen');
    if($fakeFile.length === 0) {
      $button.after('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=file-holder> ' + newVal + '</span>');
    } else {
      $fakeFile.text(newVal);
    }
  }
};

$(document).ready(function() {
    $('.file-wrapper input[type=file]').bind('change click', CUSTOMUPLOAD.fileInputs);
    var counter = 2;
    $('#del_file').hide();
        $('img#add_file').click(function(){
            $('#file_tools').before('<p><span class="file-wrapper" id="f'+counter+'"><input type="file" name="files[]"/><span class="file-button">Choose File</span></span></p>');
            $('#del_file').fadeIn(0);
        counter++;
        });

        $('img#del_file').click(function(){
            if(counter==3){
                $('#del_file').hide();
            }           
        counter--;

        $('#f'+counter).remove();
    }); 
});

CSS

.file-wrapper{font-size:11px;cursor:pointer;display:inline-block;overflow:hidden;position:relative;}
.file-wrapper .file-button{width:auto;display:inline-block;font-size:14px;font-weight:bold;background:#1468b3;color:#fff;cursor:pointer;padding:8px 20px;text-transform:uppercase;border:1px solid #fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.file-wrapper input{font-size:100px;cursor:pointer;height:100%;position:absolute;right:0;top:0;filter:alpha(opacity=1);-moz-opacity:0.01;opacity:0.01;}

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Barmar, Mar 20 '14 at 03:09

score 2 · Accepted Answer · answered Mar 20 '14 at 03:04

2

That's because they're dynamically appended, you'd need to use event delegation, e.g

$('#file_container').on('click', 'img#add_file', function(){
        $('#file_tools').before('<p><span class="file-wrapper" id="f'+counter+'"><input type="file" name="files[]"/><span class="file-button">Choose File</span></span></p>');
        $('#del_file').fadeIn(0);
        counter++;
 });

Full jsFiddle here.

answered Mar 20 '14 at 03:04

dsgriffin

66,495
17
137
137

Thanks man! Works like a champ. I knew I was missing something simple. I'm more of a back-end PHP developer than UI/UX so I'm trying to learn as I go. – rws907 Mar 20 '14 at 15:19

score 1 · Answer 2 · answered Mar 20 '14 at 03:05

1

Since you have dynamic element use event delegation

$('#file_container').on('change click', '.file-wrapper input[type=file]', CUSTOMUPLOAD.fileInputs);

answered Mar 20 '14 at 03:05

Arun P Johny

384,651
66
527
531

Dheeraj Yadav · Answer 3 · 2014-03-20T11:52:53.933

You might need this check my Fiddle

    var CUSTOMUPLOAD = CUSTOMUPLOAD || {};

    CUSTOMUPLOAD.fileInputs = function() {
    var $this = $(this),
      $val = $this.val(),
      valArray = $val.split('\\'),
      newVal = valArray[valArray.length-1],
      $button = $this.siblings('.file-button'),
      $fakeFile = $this.siblings('.file-holder');
      if(newVal !== '') {
     $button.text('File Chosen');
    if($fakeFile.length === 0) {
               $button.after('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=file-holder> ' + newVal + '</span>');
    } else {
      $fakeFile.text(newVal);
    }
  }
};

$(document).ready(function() {
    $('#file_container').on('change click', '.file-wrapper input[type=file]', CUSTOMUPLOAD.fileInputs);
    var counter = 2;
    $('#del_file').hide();
        $('#file_container').on('click', 'img#add_file', function(){
            $('#file_tools').before('<p><span class="file-wrapper" id="f'+counter+'"><input type="file" name="files[]"/><span class="file-button">Choose File</span></span></p>');
            $('#del_file').fadeIn(0);
        counter++;
        });

        $('#file_container').on('click', 'img#del_file', function(){
            if(counter==3){
                $('#del_file').hide();
            }           
        counter--;

        $('#f'+counter).remove();
    }); 
});

Dynamically Add Customized HTML Form File Input with jQuery

3 Answers3

Linked