How to add label to uploader control

Suite and Optimus Suite 5
#1

Hi

I have 3 question/problem with the upload control

1)how can i add label to the upload control. The user want to have label next to the each button(Add files,upload, clear all)?
2)How can i highlight/change image/color the upload button when there are files that are selected but not uploaded yet so the user can know they still have file that need to be uploaded
3)can we have a overall progress bar for all the file ? for now i see there is a progress bar for each files but can we have a single progress bar for all the file in the select list? how can we do this?

Thanks in advance

#2
  1. I think you need add one more button to
myForm.getUploader('<uploader_name>').buttons

  1. [code]
    formData = [
    {type: “fieldset”, label: “Uploader”, list:[
    {type: “upload”, name: “myFiles”, inputWidth: 330, inputHeight: 160, url: “php/dhtmlxform_item_upload.php”, swfPath: “uploader.swf”, swfUrl: “php/dhtmlxform_item_upload.php”}
    ]}
    ];
    myForm = new dhtmlXForm(“myForm”, formData);
    //myForm.getUploader(‘myFiles’).setAutoStart(true);

     	myForm.attachEvent("onUploadComplete",function(count){
 		myForm.getUploader('myFiles').buttons.info.style.border = "solid green 2px";
 		myForm.getUploader('myFiles').buttons.upload.style.border = "solid green 2px";
 		myForm.getUploader('myFiles').buttons.cancel.style.border = "solid green 2px";
 		myForm.getUploader('myFiles').buttons.clear.style.border = "solid green 2px";
 		myForm.getUploader('myFiles').buttons.browse.style.border = "solid green 2px";
 	});
 	
 	myForm.attachEvent("onFileAdd",function(realName){
 		myForm.getUploader('myFiles').buttons.info.style.border = "solid red 2px";
 		myForm.getUploader('myFiles').buttons.upload.style.border = "solid red 2px";
 		myForm.getUploader('myFiles').buttons.cancel.style.border = "solid red 2px";
 		myForm.getUploader('myFiles').buttons.clear.style.border = "solid red 2px";		
 		myForm.getUploader('myFiles').buttons.browse.style.border = "solid red 2px";		
 	});
 }

[/code]
Right?

#3

Hi Avalon

can you elaborate some more on the 1st solution?
I’ve try setting the InnerHTML but it doesn’t show but in the source it’s there. Probably there are some css that i need to tinker with. Another solution that i just thought of is altering the button image itself since i see we can set the width for the button but i really don’t want to go there

I’ve tried the solution for item 2 and i think i can use this
Thanks :smiley:

#4
  1. Try
that = myForm.getUploader('myFiles');
var k = document.createElement("DIV");
k.innerHTML = "This is label";
k.className = "button_label";	//"dhx_file_uploader_button button_label"
k.onclick = function() {if (!that._enabled) return; alert() };
k.style.backgroundImage = "none";
that.p_controls.appendChild(k);
that.buttons['label'] = k;

and

	<style>
		.button_label {
			position:absolute;
			background:red;			
			top:8px;
			left: 5px;
			font-size:22px;
			width:50%;
		}	
	</style>
#5

Hi Avalon

Thanks for the example. I have used your example and here’s what i’ve manage to come up with
in case anyone else was also looking to do this :smiley:

#6

Or you can type in:

// classList is not supported by IE9 and lower
myForm.attachEvent("onUploadComplete",function(count){
	for (i in myForm.getUploader('myFiles').buttons) {
		myForm.getUploader('myFiles').buttons[i].classList.remove("newStyle1");
		myForm.getUploader('myFiles').buttons[i].classList.add("newStyle");
		//var newBrowse = document.createElement("div");.............your code for div
	}
});
			
myForm.attachEvent("onFileAdd",function(realName){
	for (i in myForm.getUploader('myFiles').buttons) {
		myForm.getUploader('myFiles').buttons[i].classList.remove("newStyle");
		myForm.getUploader('myFiles').buttons[i].classList.add("newStyle1");
		//var newBrowse = document.createElement("div");.............your code for div
	}
});
var loaded_size = 0, total_size = 0;
setTotalSize = function(file_loaded_size) {
				loaded_size += file_loaded_size;			
}
setInterval(function(){console.log('loaded ' + loaded_size + '; total ' + total_size + ' ' + Math.round(loaded_size*100/total_size) )}, 2000); // use own code. add .innerHTML in something with text (ex., 123222/33233443) or add graphic using css.

Find _doUploadFile function FOR UPLOADER in dhtmlx.js.
This function contents this._loader.upload.onprogress function.
After line with …Math.round(…)); call setTotalSize(e.loaded);

I give you quest)) :open_mouth:

#7

Don’t touch dhtmlx.js.
Just copy _doUploadFile in doOnLoad() and add necessary line.

myForm.getUploader('myFiles')._doUploadFile = function(id) {...}
#8

Hi Avalon

Tried your suggestions and it’s working!
Thanks you so much :smiley: