Question

I’m using a Grails plugin for ajax upload, http://grails.org/plugin/ajax-uploader, that is directly based on http://valums.com/ajax-upload/ . As you can see from the second link, it renders a div with ‘Upload a File’ as the text, which changes when hovered over and is clickable, and allows the selection of a file from the user’s computer. This text is defined in the plugin’s javascript file (I don’t see any way of configuring it), so to change it I am using JQuery in my .gsp where I use the plugin. However for some reason, by changing the text, the div is no longer clickable. Note if I change the text in the javascript file for the plugin, it is fine and does not break, so there is nothing relying on the actual text being what it is. But I do not want to change it in the javascript file, as: a) I don’t want to alter the plugin and b) I want to internationalize the text and not have it defined in the js file.

on my page I am doing

<script>$(".qq-upload-button").text("Click to select or drag files here");</script>

Note I also tried this as I thought maybe it was a timing issue.

<script>
  $(document).ready(function () {
 $(".qq-upload-button").text("Click to select or drag files here");
  } );
 </script>

In both cases the text correctly changes, but the div is no longer clickable or reacts to hovering.

Answer 1

If I look at .qq-upload-button in my browser’s DOM inspector, it looks like this:

<div class="qq-upload-button" style="…">
    Upload a file<input multiple="multiple" type="file" name="file" style="…">
</div>

It has two children: a text node that says “Upload a file”, and a file input that holds the files to be uploaded.

When you call .text() on .qq-upload-button, its content (the text along with the input) is replaced completely.

jQuery (as far as I know) doesn’t have a way to manipulate text nodes. But, you can safely change the text of the button like this:

$('.qq-upload-button').contents(':first').get(0).nodeValue = "…";

Or, less jQuerily:

$('.qq-upload-button')[0].firstChild.nodeValue = "…";

Another option would be to specify the text of the button when you create the FileUploader. The template option is undocumented, but works in the current version:

new qq.FileUploader({
    template: '<div class="qq-uploader">' + 
        '<div class="qq-upload-drop-area"><span>Your text here</span></div>' +
        '<div class="qq-upload-button">Your text here</div>' +
        '<ul class="qq-upload-list"></ul>' + 
     '</div>',
});

(I got the default template from the file upload plugin source)