Is it possible to add a progress bar somewhere in the form that will show the accurate *progress* of a file that is being uploaded through the form?
For instance, I have a form that allows users to submit a rather big mp3 file. Sometimes the upload takes from 15 to 17 minutes. Is it possible to add a progress bar so that they have an idea when it will complete?
AB
For instance, I have a form that allows users to submit a rather big mp3 file. Sometimes the upload takes from 15 to 17 minutes. Is it possible to add a progress bar so that they have an idea when it will complete?
AB
Hi Tokenring,
There are a couple of threads on this recently, in particular look for a couple of posts by Fredrik.
Bob
There are a couple of threads on this recently, in particular look for a couple of posts by Fredrik.
Bob
Might as well stumble in on this thread😉
I'll try to summarize my experiences from digging into this:
There are today pretty much 4 ways to implement a progress bar "with" Joomla, and they all come with restrictions exceeding those of J!1.5 on either the client, the server, or both.
1st, the Flash Uploader provided with Joomla. It uses MooTools to replace the normal file input field with a flash-movie. Thus the upload progress is as seen from the client, not the server. Has been reported broken with some combinations of FlashPlayer10, browsers, and MooTools. In case of conflicts, the flash uploader will revert to an old-style file input with no progress bar.
2nd, use php's "alternate php cache" (APC) along with rfc1867. This package requires php5.2.0 or greater, and is not installed by default. Some versions of this package also conflicts with suhosin, so you might find some host admins wary of installing it. This approach does not depend on Flash, and with creative use of IFrame and "meta refresh", could be made to work even without JS/Ajax. Most likely approach would be to use Ajax though...
3rd, use the uploadprogress php-module. Works much similar as apc.rfc1867. Also not installed by standard.
4th, use a CGI-based uploader. This allows you, as the coder, far more control on where the uploaded file is written, what name it has. Your cgi application could also update some xml-file with progress during the upload (or render a gif-image resembling a progress bar), which then could easily be retrieved using JS-scripting. This option depends very much on what cgi-parsers are made available on your host (if any), what libraries are available, etc. As such, this might not be considered a portable solution.
A good example on how to do this using perl is LightUploader (http://www.seemysites.net/projFolder/uploader/). It's not Joomla, but the php-code should be portable enough, and makes use of JSON rather than Ajax (MooTools should cover that).
I guess this became a rather lengthy summary, but I hope you found it informative. Unfortunately, there is no universal solutions, as "vanilla-php" does not provide any facilities of tracking files during upload. Instead we have to rely on various extensions. As these may vary between hosts, so does your options.
If you think one of the above solutions would work for you, I'd happily provide whatever help I may as time permits.
/Fredrik
I'll try to summarize my experiences from digging into this:
There are today pretty much 4 ways to implement a progress bar "with" Joomla, and they all come with restrictions exceeding those of J!1.5 on either the client, the server, or both.
1st, the Flash Uploader provided with Joomla. It uses MooTools to replace the normal file input field with a flash-movie. Thus the upload progress is as seen from the client, not the server. Has been reported broken with some combinations of FlashPlayer10, browsers, and MooTools. In case of conflicts, the flash uploader will revert to an old-style file input with no progress bar.
2nd, use php's "alternate php cache" (APC) along with rfc1867. This package requires php5.2.0 or greater, and is not installed by default. Some versions of this package also conflicts with suhosin, so you might find some host admins wary of installing it. This approach does not depend on Flash, and with creative use of IFrame and "meta refresh", could be made to work even without JS/Ajax. Most likely approach would be to use Ajax though...
3rd, use the uploadprogress php-module. Works much similar as apc.rfc1867. Also not installed by standard.
4th, use a CGI-based uploader. This allows you, as the coder, far more control on where the uploaded file is written, what name it has. Your cgi application could also update some xml-file with progress during the upload (or render a gif-image resembling a progress bar), which then could easily be retrieved using JS-scripting. This option depends very much on what cgi-parsers are made available on your host (if any), what libraries are available, etc. As such, this might not be considered a portable solution.
A good example on how to do this using perl is LightUploader (http://www.seemysites.net/projFolder/uploader/). It's not Joomla, but the php-code should be portable enough, and makes use of JSON rather than Ajax (MooTools should cover that).
I guess this became a rather lengthy summary, but I hope you found it informative. Unfortunately, there is no universal solutions, as "vanilla-php" does not provide any facilities of tracking files during upload. Instead we have to rely on various extensions. As these may vary between hosts, so does your options.
If you think one of the above solutions would work for you, I'd happily provide whatever help I may as time permits.
/Fredrik
okay, so I didn't have luck with any of the 4 options. The flash uploader that comes with Joomla (global configuration?)... how does that work? I enable it, but I don't see it? How do you incorporate it into the forms?
The php module... I can't find it for Joomla... and the other two seemed like they were your last picks.
:(
The php module... I can't find it for Joomla... and the other two seemed like they were your last picks.
:(
Hi Aaron,
To use the Flash uploader, you create your form as usual, then add a php-snippet somewhat as follows:
The above snipped do need some editing.. First off, the field name needs to match the name of the file-type input field in your form. Secondly, the config-array needs a few settings suitable to your form.
What you most likely would like to specify, is the upload url. I'd most likely point this to one of the extra codeboxes in your form (add &task=extra in the form submit url for the upload url). This will take a little tinkering to let your normal form know of the uploaded file. One quirk is that you'll also have to pass some kind of unique id so that you may link the uploaded file with the later form submission. This would also have to be added to the upload url.
The flash uploader in use is the FancyUpload v1.0, documented ad http://digitarald.de/project/fancyupload/1-0/
Regarding option 2, this would have to be installed server-wide. If you have admin access to the server, you'll find further details at http://www.php.net/manual/en/apc.installation.php on how you'd go about installing it. If you do not have admin access, you'll have to ask your hosting company about this or look for another option.
Regarding option 3, this would also have to be installed server-wide, requiring admin access for installation. It is available from the PECL (http://pecl.php.net/package/uploadprogress). This is not a Joomla module, sorry if I was unclear regarding this.
Regarding option 4, this "only" requires that you are allowed to use other languages than php for CGI applications. The downside here is that there are no "standard set" of languages/parsers, although perl is not that uncommon. Yet, there are numerous hosting companies that think php is enough, and are very cautious of "cgi" as they believe it is dangerous (yet, php is by definition cgi as well). This would, just as option 1, require additional tinkering to allow the form code to know of the upload (as the upload, technically speaking, is done outside of Joomla).
All in all, none of these approaches are ideal, as they either put restrictions on your visitors browsers, or depend on non-standard server features. Personally, if Option 2 or 3 are available, I'd use one of those since the upload would be handled by Joomla/CF, and there is a minimal need for extended coding. Otherwise, I'd probably look at Option 4, depending on what languages are available for a CGI-script.
/Fredrik
To use the Flash uploader, you create your form as usual, then add a php-snippet somewhat as follows:
JHTML::_('behaviour.uploader', 'fieldname', array(option => value));The above snipped do need some editing.. First off, the field name needs to match the name of the file-type input field in your form. Secondly, the config-array needs a few settings suitable to your form.
What you most likely would like to specify, is the upload url. I'd most likely point this to one of the extra codeboxes in your form (add &task=extra in the form submit url for the upload url). This will take a little tinkering to let your normal form know of the uploaded file. One quirk is that you'll also have to pass some kind of unique id so that you may link the uploaded file with the later form submission. This would also have to be added to the upload url.
The flash uploader in use is the FancyUpload v1.0, documented ad http://digitarald.de/project/fancyupload/1-0/
Regarding option 2, this would have to be installed server-wide. If you have admin access to the server, you'll find further details at http://www.php.net/manual/en/apc.installation.php on how you'd go about installing it. If you do not have admin access, you'll have to ask your hosting company about this or look for another option.
Regarding option 3, this would also have to be installed server-wide, requiring admin access for installation. It is available from the PECL (http://pecl.php.net/package/uploadprogress). This is not a Joomla module, sorry if I was unclear regarding this.
Regarding option 4, this "only" requires that you are allowed to use other languages than php for CGI applications. The downside here is that there are no "standard set" of languages/parsers, although perl is not that uncommon. Yet, there are numerous hosting companies that think php is enough, and are very cautious of "cgi" as they believe it is dangerous (yet, php is by definition cgi as well). This would, just as option 1, require additional tinkering to allow the form code to know of the upload (as the upload, technically speaking, is done outside of Joomla).
All in all, none of these approaches are ideal, as they either put restrictions on your visitors browsers, or depend on non-standard server features. Personally, if Option 2 or 3 are available, I'd use one of those since the upload would be handled by Joomla/CF, and there is a minimal need for extended coding. Otherwise, I'd probably look at Option 4, depending on what languages are available for a CGI-script.
/Fredrik
someone e-mailed me about this thread and asked me how I was doing with this... LOL - ya right. I have no idea what I'm doing on this one... Sorry I couldn't help whoever pm'd me
:(
:(
Hi Aaron,
Currently out of town, hence the slow rate of responses.
The first step for you should be to establish which of the option(s) are available on your hosting server (Option 1 would always be available, as it is part of Joomla, however it has the drawback of not working with Flash10 and some browsers).
/Fredrik
Currently out of town, hence the slow rate of responses.
The first step for you should be to establish which of the option(s) are available on your hosting server (Option 1 would always be available, as it is part of Joomla, however it has the drawback of not working with Flash10 and some browsers).
/Fredrik
okay... option 1 is available absolutely, but when I enable it in the control panel, I don't see what else that has to be done. I'll talk with you soon and thankyou very much for helping on this.
Aaron
Aaron
Hi,
I'm back in town again. Unfortunately, it would seem I've got Flash10 on all my browsers, which makes development and debugging somewhat difficult. Add that my hosting company is currently undergoing a week-long DDoS attack, and you could imagine how "happy" I am at the moment..
I'll write the code below from memory+manpages for now:
Form code:
Extra code:
OnSubmit-code:
Now, as said, this is written from a combination of memory and manpages, and I'm currently overheating in this tropical heat :p
Expect a few bugs in there 😉
/Fredrik
I'm back in town again. Unfortunately, it would seem I've got Flash10 on all my browsers, which makes development and debugging somewhat difficult. Add that my hosting company is currently undergoing a week-long DDoS attack, and you could imagine how "happy" I am at the moment..
I'll write the code below from memory+manpages for now:
Form code:
<?
$sess = JFactory::getSession();
$sess->clear('bgupload');
$id = $sess->getId();
JHTML::_(
'behavior.uploader',
'file-upload',
array(
'url' => 'http://www.yourhost.com/index.php?option=com_chronocontact&chronoformname=textform&task=extra&format=raw&uploadid=' . $id,
'multiple' => false,
'queued' => false,
'instantStart => true,
'allowDuplicates' => false
)
<div>Name: <input type="text" name="theName" /></div>
<div>File: <input type="file" name="theFile" id="file-upload" /></div>
<div>Submit the data? <input type="submit" value="Yes" /></div>Extra code:
<?
jimport('joomla.filesystem.file');
$sess = JFactory::getSession();
$sess->close();
$sess = JFactory::getSession(, array('id' => JRequest::getVar('uploadid', '', 'GET', 0)));
$i = 0;
$t = array();
foreach ($_FILES as $key => $val) {
$id = uniqid('file'.$i.'_');
$f = JPATH_SITE . DS . 'tmp' . DS . $id);
JFile::upload($val['tmp_name'], $f);
$val['tmp_name'] = $f;
$t[$key] = $val;
}
$sess->set('bgupload', $t);
?>
OnSubmit-code:
<?
$sess = JFactory::getSession();
$bgfile = $sess->get('bgupload');
...Do something fancy with the file upload here, such as attach it to the emails (believe you'll find a few threads regarding how to do this with 3.1), add the file name to the database record, or whatever you need done. The data of the file is stored in $bgfile, in a format similar to $_FILES. Warning! Keep in mind that php does not consider this file recently uploaded, and calls to JFile::upload() will fail!
Now, as said, this is written from a combination of memory and manpages, and I'm currently overheating in this tropical heat :p
Expect a few bugs in there 😉
/Fredrik
okay... I'll give this a whirl tonight and let you know. Thanks so much Fredrik!!
AB
AB
tried on my test site, but no luck. I even made it worse for a while. I don't think I put the right code in the right spot. Thanks for sending me this info. I've documented what you said and I will try again on the long weekend.
AB
AB
I am going to try this again now that I am running 1.5.17. I wonder if the flash loader in the current version is now the recommended solution.
Aaron
Aaron
Hi Aaron,
I am currently working on a similar project for a client, which is mostly working. I did however opt not to use the flash-uploader that comes with Joomla for several reasons, but instead using a third-party flash-uploader.
There is quite some work to tie all the parts needed together, along with both javascript and php-coding. One big change from the earlier post, is that you can't use the 'behavior.uploader' macro, but have to implement the html/javascript-code needed for the uploader yourself.
Another thing you'll have to keep in mind, is that the Flash player has some nasty tricks up it's sleeves when used with other browsers than IE - sometimes messing up sessions. In most cases this can be sorted though.
I would recommend that you start by invesigating which uploaders are Flash10-compatible, and suite your needs. I've used swfupload myself with success, though there might be other uploaders better suited for your needs.
A key feature you'll need, is the ability to add GET/POST-style parameters to the upload - as this is how you tell Joomla which component should handle the upload (CF), and what to do (task=extra).
Once you've found an uploader that suits your needs, check some examples/documentation on how to implement it, and finally try to adjust it to work with Joomla/CF.
/Fredrik
I am currently working on a similar project for a client, which is mostly working. I did however opt not to use the flash-uploader that comes with Joomla for several reasons, but instead using a third-party flash-uploader.
There is quite some work to tie all the parts needed together, along with both javascript and php-coding. One big change from the earlier post, is that you can't use the 'behavior.uploader' macro, but have to implement the html/javascript-code needed for the uploader yourself.
Another thing you'll have to keep in mind, is that the Flash player has some nasty tricks up it's sleeves when used with other browsers than IE - sometimes messing up sessions. In most cases this can be sorted though.
I would recommend that you start by invesigating which uploaders are Flash10-compatible, and suite your needs. I've used swfupload myself with success, though there might be other uploaders better suited for your needs.
A key feature you'll need, is the ability to add GET/POST-style parameters to the upload - as this is how you tell Joomla which component should handle the upload (CF), and what to do (task=extra).
Once you've found an uploader that suits your needs, check some examples/documentation on how to implement it, and finally try to adjust it to work with Joomla/CF.
/Fredrik
This topic is locked and no more replies can be posted.
