Question

I am trying to invent hot water :D. I am using html5Uploader and everything is working fine (images are being uploaded without any error).
Problem comes a bit latter, in this part:

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

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

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

    function slugify(text) {
        text = text.replace(/[^-a-zA-Z0-9,&\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("<img class=img_upload title=\"" + file.name + "\" src=\"" + e.target.result + "\" alt=\"\">");
        },
        onServerLoad: function(e, file) {
            $('.img_upload').on('click', function() {
                $('#text').val($('#text').val() + $(this).attr('title'));
            });
        }
    });
});

Answer 1

One way would be to check to see if it’s already in there, like this:

var _val = $('#text').val(), title = $(this).attr('title');
if ( _val.indexOf( title ) === -1 ) {
    // here you add the code
    $('#text').val( _val + title );
}

But I think the problem may be in the way you’re fetching the name, try using e.target.result or file.name

var _val = $('#text').val(), name = file.name || e.target.result;
if ( _val.indexOf( name ) === -1 ) {
    // here you add the code
    $('#text').val( _val + name );
}

If you want to add the same one a specific number of times, there are a few ways to do that.

Via for loop:

// this is if you want to add the duplicates immediately
var
    // the amount of times you want to create the duplicatation
    NUMBER_OF_TIMES = 10,
    // the current value
    _val = $('#text').val(),
    // the title
    title = $(this).attr('title');
if ( _val.indexOf( title ) === -1 ) {
    for ( var i = 0; i < NUMBER_OF_TIMES; i ++ )
        $('#text').val( _val + name );
}

Otherwise, you can check the number of occurrences, and then append if necessary:

// this is if you want to add the duplicates a certain number of times dynamically
var
    // the amount of times you want to create the duplicatation
    NUMBER_OF_TIMES = 10,
    // the current value
    _val = $('#text').val(),
    // the title
    title = $(this).attr('title')
    // Returns the number of occurences
    howMany = function(str, substr) {
        var intRet = 0;

        // continuously run until the substring isn't found anymore
        while ( str.indexOf(substr) !== -1 ) {
            // get rid of first substring
            str = str.replace(substr, '');
            // add one to the amount of substrings
            intRet++;
        }

        // check to see if there are any occurrences, if not, return -1
        return (intRet > 0 ? intRet : -1);
    };
if ( _val.indexOf( title ) === -1 && howMany(_val, title) <= NUMBER_OF_TIMES ) {
    $('#text').val( _val + name );
}

I’ve tried making the comments are informative as possible, but if you do not understand a part of it, just comment below. Try it out and tell me how it goes! XD