Display a message (or progress) for uploading big files

Hi guys.
so another issue, better, a suggestion.

User can upload BIG files, so the system will take time.ù

Is there a way to display a dynamic message to alert the user to wait?
A suggestion which I don't like is to set an intermediate page between the submit form and the text onsumbit after email sent...
Kind of page of form ---> page of Hold on ---> page of thanks

Alternatively, I know it would be possible to use the progress bar (maybe of mootools, I don't remember) but honestly I don't know how to...
Some simple ideas?

Hi gg4,

There is a progress bar in Joomla somewhere (you can see it in the media uploads). And there was a thread about this a couple of months ago - I don't remember the results though :-(

Bob

Indeed it looked I was requested to implement something else, now gotta back to this.

So I've been looking around the web, I found this:
http://davidwalsh.name/progress-bar-animated-mootools

Now, I tried to understand a bit.
the script David did has a call set, which tell the percentage of advance for an event.
How to pass the percentage of an uploaded file with Chronoform to his function?

I tried to do the following meanwhile.
Form code:

<div class="form_item"><div class="form_element cf_fileupload"><label class="cf_label">File 1</label><input class="cf_inputbox" size="20" id="file_0" name="file_0" type="file"></div><div class="clear"> </div></div><div class="form_item"><div class="form_element cf_fileupload"><label class="cf_label">File 2</label><input class="cf_inputbox" size="20" id="file_1" name="file_1" type="file"></div><div class="clear"> </div></div>

<script>
//once the DOM is ready
window.addEvent('domready', function() {
	
	/* create the progress bar for example 1 */
	pb = new dwProgressBar({
		container: $('put-bar-here'),
		startPercentage: 25,
		speed:1000,
		boxID: 'box',
		percentageID: 'perc'
	});
		
	/* create the progress bar for example 2 */
	pb2 = new dwProgressBar({
		container: $('put-bar-here2'),
		startPercentage: 10,
		speed:1000,
		boxID: 'box2',
		percentageID: 'perc2',
		displayID: 'text',
		displayText: true
	});
	
	/* move the first progress bar to 55% */
	pb.set(55);
	
	/* move the second progress bar to 89% */
	pb2.set(89);
		
});
</script>


<div id="this.options.boxID">  
<div id="this.options.percentageID"></div>  
</div>  
<div id="this.options.displayID">{x}%</div>  

<div class="form_item"><div class="form_element cf_button"><input value="Submit" name="undefined" type="submit"><input value="Reset" type="reset"></div><div class="clear"> </div></div>

Javascript code:

//class is in
var dwProgressBar = new Class({
	
	//implements
	Implements: [Options],

	//options
	options: {
		container: $$('body')[0],
		boxID:'',
		percentageID:'',
		displayID:'',
		startPercentage: 0,
		displayText: false,
		speed:10
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		//create elements
		this.createElements();
	},
	
	//creates the box and percentage elements
	createElements: function() {
		var box = new Element('div', { id:this.options.boxID });
		var perc = new Element('div', { id:this.options.percentageID, 'style':'width:0px;' });
		perc.inject(box);
		box.inject(this.options.container);
		if(this.options.displayText) { 
			var text = new Element('div', { id:this.options.displayID });
			text.inject(this.options.container);
		}
		this.set(this.options.startPercentage);
	},
	
	//calculates width in pixels from percentage
	calculate: function(percentage) {
		return ($(this.options.boxID).getStyle('width').replace('px','') * (percentage / 100)).toInt();
	},
	
	//animates the change in percentage
	animate: function(to) {
		$(this.options.percentageID).set('morph', { duration: this.options.speed, link:'cancel' }).morph({width:this.calculate(to.toInt())});
		if(this.options.displayText) { 
			$(this.options.displayID).set('text', to.toInt() + '%'); 
		}
	},
	
	//sets the percentage from its current state to desired percentage
	set: function(to) {
		this.animate(to);
	}
	
});

On submit code (using ajax)

<script>
//once the DOM is ready
window.addEvent('domready', function() {


/* create the progress bar for example 1 */
pb = new dwProgressBar({
container: $('put-bar-here'),
startPercentage: 25,
speed:1000,
boxID: 'box',
percentageID: 'perc'
});

/* create the progress bar for example 2 */
pb2 = new dwProgressBar({
container: $('put-bar-here2'),
startPercentage: 10,
speed:1000,
boxID: 'box2',
percentageID: 'perc2',
displayID: 'text',
displayText: true
});

/* move the first progress bar to 55% */
pb.set(55);

/* move the second progress bar to 89% */
pb2.set(89);

});
</script>


<?php
<div id="this.options.boxID">
<div id="this.options.percentageID"></div>
</div>
<div id="this.options.displayID">{x}%</div>

?>

..but no form is displayed now..
...am I still so far? :?

Hi gg4,

If it helps, the code that is package d with Joomla is FancyUpload - you'll find the JavaScript in media/system/js/uploader.ks

Here's a code snippet of it being used in the Media manager

<form action="<?php echo JURI::base(); ?>index.php?option=com_media&task=file.upload&tmpl=component&<?php echo $this->session->getName().'='.$this->session->getId(); ?>&pop_up=1&<?php echo JUtility::getToken();?>=1" id="uploadForm" method="post" enctype="multipart/form-data">
	<fieldset>
		<legend><?php echo JText::_('Upload'); ?></legend>
		<fieldset class="actions">
			<input type="file" id="file-upload" name="Filedata" />
			<input type="submit" id="file-upload-submit" value="<?php echo JText::_('Start Upload'); ?>"/>
			<span id="upload-clear"></span>
		</fieldset>
		<ul class="upload-queue" id="upload-queue">
			<li style="display: none" />
		</ul>
	</fieldset>
	<input type="hidden" name="return-url" value="<?php echo base64_encode('index.php?option=com_media&view=images&tmpl=component&e_name='.JRequest::getCmd('e_name')); ?>" />
</form>

Bob

Hi Bob,

I haven't test the snippet yet, but I was using another code because of this:
http://forum.joomla.org/viewtopic.php?f=231&t=344710
where it says:

FancyUpload which can be found in Joomla doesn't work with Flash 10, so in 1.5.8 we decided to disable it. That's why I don't suggest you to use it in your own extension because it can cause problems for users.

What do you think?
😑

Hi gg4j,

Ah I had seen that - and then forgot abotut it :-( I see there is now a dev version for Flash 10 so hopefully it will soon be fixed.

Bpb

I see this thread was active last December. Has there been a solution for an uploader progress message or bar?

I also found another thread in this forum that discussed a different way to display a "please wait for the upload" message, but I couldn't get it to work. If I can't have a progress bar, I'd at least like to display a message that tells the user to wait, then disappears when the upload is complete:

http://www.chronoengine.com/forums.html?cont=posts&f=2&t=14147&p=31248&hilit=upload+div#p31600

As I mentioned, I couldn't get it to work.

In the General Tab / Form tag attachment, I already had:

enctype="multipart/form-data"

When trying to make a visible/invisible "please wait" message, I changed that code to:

enctype="multipart/form-data";onSubmit="$('pleasewait').setStyle('visibility', 'visible');"

I also added the following DIV in the form code (below the div containing the Submit button):

<div id="pleasewait" style="visibility: hidden;">Please wait while the upload is being processed...</div>

That didn't work. Was using ";" the right way to separate those two events in the Form tag attachment area??

BTW, I'm using Joomla 1.5.10 and a LICENSED copy of Chrono Contact (3.1 RC5).

Like I said, if I can't get a dynamic uploader progress bar, I'll settle for a static uploader message that appears while the large files are uploading.

Thanks in advance for any help that can be provided!

Hi ekull25,

I will try to find a solution for this issue and get back to you!

Regards,
Max

Hi ekull25,
Use a space instead of ";" as this box is simply inserted into the auto-generated <form ..> tag. IE, it should look like this:

enctype="multipart/form-data" onSubmit="$('pleasewait').setStyle('visibility', 'visible');"

There are a few "hacks" you might be able to use for upload progress bar, but they're dependant on resources outside of Joomla and availability may wary in between hosting companies and servers. If available, the apc.rfc1867 feature would be the simplest of hacks to integrate with CF.

/Fredrik

I feel so stupid for not seeing that! Thanks. It worked perfectly!