Jquery - adding images name after upload to the textarea (using html5Uploader)
<p>I am trying to invent hot water :D. I am using <a href="http://www.igloolab.com/jquery-html5-uploader/" rel="nofollow">html5Uploader</a> and everything is working fine (images are being uploaded without any error). 
Problem comes a bit latter, in this part:</p>

<pre><code>onServerLoad: function(e, file) {
    $('.img_upload').on('click', function() {
        $('#text').val($('#text').val() + $(this).attr('title'));
    });
}
</code></pre>

<p>Value is being added to the <strong>textarea</strong> but it is added number of times as there are uploaded images (for example I have 5 images with name <strong>first.png</strong> it will add  <strong>first.png</strong> five time to the text area ). How can I avoid this?</p>

<pre><code>$(function() {
    var fileTemplate = "&lt;div id=\"{{id}}\"&gt;";
    fileTemplate += "&lt;div class=\"preview\"&gt;&lt;/div&gt;";
    fileTemplate += "&lt;div class=\"filename\"&gt;{{filename}}&lt;/div&gt;";
    fileTemplate += "&lt;/div&gt;";

    function slugify(text) {
        text = text.replace(/[^-a-zA-Z0-9,&amp;\s]+/ig, '');
        text = text.replace(/-/gi, "_");
        text = text.replace(/\s/gi, "-");
        return text;
    }
    $("#dropbox").html5Uploader({
        onClientLoadStart: function(e, file) {
            var upload = $("#upload");
            if (upload.is(":hidden")) {
                upload.show();
            }
            upload.append(fileTemplate.replace(/{{id}}/g, slugify(file.name)).replace(/{{filename}}/g, file.name));
        },
        onClientLoad: function(e, file) {
            $("#" + slugify(file.name)).find(".preview").append("&lt;img class=img_upload title=\"" + file.name + "\" src=\"" + e.target.result + "\" alt=\"\"&gt;");
        },
        onServerLoad: function(e, file) {
            $('.img_upload').on('click', function() {
                $('#text').val($('#text').val() + $(this).attr('title'));
            });
        }
    });
});
</code></pre>
