ProgressBar and percent on upload file input

Hi,

I want to put a progressbar and percent (transfert) with a upload file input.
I have tested with this http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=7&t=17717

I want to use a model like this : http://pixeline.be/experiments/jqUploader/test.php

But i don't know how write code in chronoforms form

Have you any idea?

Thx,
Greg

Hi Greg,

This should be possible in ChronoForms. I'd recommend that you don't' use a jQuery based loader* - there's an example of a MooTools based one here that should work OK with ChronoForms v4.

Without digging into the details of how it works it's tough to give you any help with this. I'd suggest that you try out the code and come back when you have a specific question.

Bob

Has anything ever been done with this? Would be really nice to do on a form of mine?

Hi there GreyHead

Hope you are well man!

I've finally decided to take the plunge here and try your proposed solution above.

Link to the dev site:http://41.86.104.77/~samacorg/index.php?option=com_chronoforms&chronoform=form

here's what ive done thus far:

On Load:

Load JS

<?php
$doc =& JFactory::getDocument();
$doc->addScript('http://41.86.104.77/~samacorg/uploader/js/Form.MultipleFileInput.js');
?>

<?php
$doc =& JFactory::getDocument();
$doc->addScript('http://41.86.104.77/~samacorg/uploader/js/Form.Upload.js');
?>

<?php
$doc =& JFactory::getDocument();
$doc->addScript('http://41.86.104.77/~samacorg/uploader/js/Request.File.js');
?>

window.addEvent('domready', function(){

	var upload = new Form.Upload('url', {
		onComplete: function(){
			alert('Completed uploading the Files');
		}
	});

	if (!upload.isModern()){
		// Use something like
	}

});

Load CSS

form {
	border-top: 1px #545a74 solid;
	border-bottom: 1px #545a74 solid;
	background: #e2e5f3;
	margin: 20px 0;
	padding: 10px;
}

fieldset legend {
	color: #666;
	margin: 0;
	font-size: 1.5em;
	font-weight: normal;
	padding-bottom: 20px;
}

.formRow {
	overflow: auto;
	border-bottom: 1px #bcbcbc solid;
	padding: 5px 0;
	max-width: 100%;
}

.formRow label {
	padding: 4px;
	margin: 0 3px 0 0;
	border-right: 1px #bcbcbc solid;
}


/* Drag & Drop file uploading */

.droppable {
	border: #121a3f 1px solid;
	border-radius: 3px;
	background: #545A74;
	color: white;
	padding: 20px;
	margin: 10px;
	clear: both;
	text-align: center;
}

.droppable.hover {
	background: #121a3f;
}

.uploadList {
	margin: 0;
	padding: 0;
	list-style: none;
}

.uploadItem {
	overflow: hidden;
	border-bottom: #BCBCBC 1px solid;
	margin: 0 20px;
	padding: 3px;
}

.uploadItem span {
	overflow: hidden;
	width: 150px;
	float: left;
	display: block;
}

a.addInputRow,
a.delInputRow,
.uploadItem a {
	display: inline-block;
	background: url(add.png) no-repeat;
	height: 16px;
	width: 16px;
	text-indent: -999px;
}

.uploadItem a {
	float: left;
	display: block;
	padding-left: 20px;
	background-image: url(delete.png);
}

a.delInputRow {
	background-image: url(delete.png);
}

.progress {
	margin: 5px 0;
	height: 15px;
	border-radius: 3px;
	background: #545A74;
}

In the form elements I've created a custom element:

<div class="formRow">
			<label for="url" class="floated">File: </label>
			<input type="file" id="url" name="url[]" multiple><br>
		</div>

		<div class="formRow">
			<input type="submit" id="_submit" name="_submit" value="Upload">
		</div>

If you can assist me in getting this working ill be happy to write a walk through.

I got it working🙂

just needed the below in the load js section on load

<?php
$doc =& JFactory::getDocument();
$doc->addScript('https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools.js');
?>

Im having trouble determining where this uploader sets the path to the uploaded file.

I've managed to get this working on the native file upload element for chronoforms, its just not uploading the files to the directory ive specified in the element and the js for the progress bar isnt giving me a upload path, Can anyone assist here?

Any ideas from anyone?

Hi Woodygun,

It looks to me from the code as though this mimics a form in JavaScript so the files should be uploaded to your PHP tmp folder in the same way as a normal file upload. (In a ChronoForms form the Upload Files action moves them from there to another folder.)

Bob