Question

I’ve got a form with file upload boxes and I’m using the jQuery Filestyle plugin (http://www.appelsiini.net/projects/filestyle) to style the inputs. I’ve also got a simple JavaScript function to allow users to upload multiple files without having to submit the form. My initial file upload input looks perfect but when the user clicks the Upload Additional File button and creates a new input, it’s not styled at all. I’m assuming this is because the plugin has already run at page load and modifying the DOM means that anything new won’t have the styles applied.

So assuming that’s the problem, my question is whether or not there’s a way to recall the Filestyle jQuery on newly created file inputs?

Here’s my Filestyle jQuery code:

    <script src="/scripts/jquery.filestyle.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
        $("input.file").filestyle({
            image: "/images/btn_select_file.gif",
            imageheight : 24,
            imagewidth : 115,
            width : 275,
        });
    });
    </script>

And my JavaScript DOM manipulation:

<script type="text/javascript">
var fileCounter = 1;
function addFile() {
  fileCounter++;
  var newdiv = document.createElement('div');
  newdiv.id = 'file' + fileCounter;
  newdiv.innerHTML = '<div class="form-item"><label for="file_' + inputCounter + '">Upload Additional File ' + (inputCounter) + '</label>\r<input type="file" name="file_' + inputCounter + '" id="file_' + inputCounter + '" class="file"><span class="space"><a href="javascript:removeFile(' + inputCounter + ');">Remove</a></span>';
  document.getElementById("files").appendChild(newdiv);
  document.getElementById("filecount").value = inputCounter;
}
</script>

Thanks for any advice!

Answer 1

You have to call the plugin method at function addFile() function to let the plugin know to style that so your new function addFile() function can be something like

function addFile() {
  fileCounter++;
  var newdiv = document.createElement('div');
  newdiv.id = 'file' + fileCounter;
  newdiv.innerHTML = '<div class="form-item"><label for="file_' + inputCounter + '">Upload Additional File ' + (inputCounter) + '</label>\r<input type="file" name="file_' + inputCounter + '" id="file_' + inputCounter + '" class="file"><span class="space"><a href="javascript:removeFile(' + inputCounter + ');">Remove</a></span>';
  document.getElementById("files").appendChild(newdiv);
  document.getElementById("filecount").value = inputCounter;
  $("input.file").last().filestyle({
            image: "/images/btn_select_file.gif",
            imageheight : 24,
            imagewidth : 115,
            width : 275,
        });
}

$("input.file").last() is selecting the newly added file input and adding styling to it through initializing the plugin for it.