XUpload - Multiple selection using changed tiny2 form

Locked
Message
Author
mmcw
Posts: 7
Joined: Jul 31, 2007 3:09 pm

Multiple selection using changed tiny2 form

#1 Postby mmcw » Jul 31, 2007 3:16 pm

I have been trying to use the code from tiny2 with upload form.
It works like a charm.

However I have Three questions:

1) How to make it selectable to show the uploading progress. I already added a checkbox Show progress.
I know how to hide the progress part:
Change:
<div>
<div id="progress_bar" style="display: none;">
To:
<div style="display: none;">>
<div id="progress_bar" style="display: none;">

But how to show it when the checkbox is selected and how to keep it hidden when the checkbox is NOT selected!

2) When the checkbox is selected how to make the uploading progress part keep visible for at least 5 seconds before returning to the start screen?
So you can read the messages in the message box!
Or maybe better to use a checkbox like you use in the popup version where you can say Close pop-up when finished and where there is a close button?

3) Why is the online oploading graph not available where you can see the kbps the file has been uploaded. In the upload_form.html example this is visible???


I have attached and copied the code:

Would be nice if you could help me?

Greetings Michel



<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>XUpload form</title>
<style>
body{margin: 0px;height:auto;overflow:auto;} #lightbox{display:none;} #overlay{display:none;}

FIELDSET {width: 400px; border: 1px solid #b3b3b3; font: 13px Arial; text-align: left;}
LEGEND {background-color: #f0f0f0; border: 1px solid #b3b3b3; font: bold 13px Arial; padding: 2px;}
.div1 {text-align: left; color: #484B50; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; width: 100%; padding: 3px;} #xfile {font: 12px Arial; border: 1px solid #636363; margin-top: 5px; width: 265px;text-align: center;} .file_list {width: 100%; border: 1px solid #434343; background-color: #ffffff;} .file_list input {font: 10px Arial; border: 1px solid #c3c3c3; margin-top: 1px;} .myForm {font: 11px Arial; border: 1px solid #636363; margin-top: 1px;} .upload_input input {font: 12px Arial; border: 1px solid #636363; margin-top: 5px; width: 280px;text-align: center;} #submit_btn, #stop_btn {position:absolute; margin: 6px 0 0 3px; width: 60px;}

.data {border-collapse:collapse; background-color: #e9e9e9; width: 400px; margin-bottom: 3px;} .data TR TD {border: 1px solid #a3a3a3; font: 12px Arial;}
.bar1 {border: 1px solid #a3a3a3; background-color: #f6f6f6; text-align: left; vertical-align: middle; height: 20px; width: 98%;}
.bar2 {width: 1%; background-color: #c9c9c9; height: 20px; text-align: left;} .message {width: 400px; height: 50px; border: 1px solid #909090; font: 11px Arial; margin-top: 5px; text-align: left; padding-left: 3px; background-color: #f9f9f9;} .myLink {font: bold 13px Arial; color: #303030; text-decoration: none;}
.btn {font: 12px Arial; border: 1px solid #a3a3a3; background-color: #e9e9e9; margin-top: 3px; margin-bottom: 5px;}
.bar_table {width: 100px; background-color: #707070;} .bar_table TR TD {border: none;} .sbar {background-color: #e9e9e9; height: 60px;} #settings {font: 12px Arial;padding:0px;}
.btn {font: 12px Arial; border: 1px solid #a3a3a3; background-color: #e9e9e9; margin-top: 3px; margin-bottom: 5px;}

.pie { display: block;
float: left;
margin: 0 3px 0 0;
padding: 0;
width: 30px;
height: 30px;
background-image: url('slices2.gif');
text-align: center;
}
.pie b {position: relative; top : 8px; font: bold 11px Arial;} </style> </head> <body>

<br /><br />

<div id="upload_form1" align="center">

<form name="F1Upload" enctype="multipart/form-data" action="../cgi-bin/xupload/upload.cgi?upload_id=" method="post" onSubmit="return StartUpload(this);">
<input type="hidden" name="xmode" value="1">

<fieldset>
<legend>XUpload Form <sub>3</sub></legend>
<table border="0" cellpadding="0" cellspacing="0" class="div1" id="div1">
<colgroup>
<col width="40">
<col width="280">
<col width="80">
<colgroup>
<tr>
<td colspan="3">
 <br>
</td>
</tr>
<tr valign="top">
<td>
<div class="pie" id="pie"><b id="pieb">0%</b></div>
</td>
<td>
<div class="upload_input"><input id="my_file_element" type="file" name="file_1" onChange="checkExt(this)" /></div>
</td>
<td>
<input type="submit" value="Upload" class="myForm" accesskey="1" id="submit_btn" />
<input type="button" value="Stop" onclick="if(self.transfer2.doc)self.transfer2.StopUpload();" class="myForm" id="stop_btn" style="visibility: hidden;" /><br />
</td>
</tr>
<tr>
<td colspan="3">
<div style="font: 11px Arial;" align="right"><input type="checkbox" name="show_upload" id="show_upload" /> <label for="show_upload">Show progress</label></div>
<table class="file_list">
<tr>
<td nowrap>
<b><font id='x_max_files'>1</font> bestanden <font id='x_max_size'></font> maximum</b><br />
<div id="files_list" style="font: 11px Arial;"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>

<input type="hidden" name="pbmode" value="inline3" />
<input type="hidden" name="ext_folder" value="temp" />
<input type="hidden" name="css_name" value="" />
<input type="hidden" name="tmpl_name" value="" />
</form>

<div>
<div id="progress_bar" style="display: none;">
<table cellpadding="2" cellspacing="1" class="data" id="xp-data">
<tr>
<td colspan="2" align="center" valign="middle">
<div class="bar1" align="left">
<div class="bar2" id="upload_status"></div>
</div>
</td>
</tr>
<tr>
<td>
<b>Files uploaded:</b><br />
</td>
<td align=center>
<font id="xp-files">0</font> of <font id="xp-files_total">?</font><br />
</td>
</tr>
<tr>
<td width="1%" nowrap>
<b>Current position:</b><br />
</td>
<td align=center>
<font id="xp-current">0</font> / <font id="xp-data_total">?</font><br />
</td>
</tr>
<tr>
<td>
<b>Time spent:</b><br />
</td>
<td align=center>
<font id="xp-time">0</font><br />
</td>
</tr>
<tr>
<td>
<b>Approx. speed:</b><br />
</td>
<td align=center>
<font id="xp-speed">0</font> Kbytes/Sec.<br />
</td>
</tr>
<tr>
<td>
<b>Time left:</b><br />
</td>
<td align=center>
<font id="xp-left">0</font><br />
</td>
</tr>
</table>
<div class="message" id="message" nowrap></div>
</div>
</div>
</div>

<iframe src="about:blank" name="xupload" style="position:absolute;left:-9999px;"></iframe>
<script src="xupload.js"></script>
<script>InitUploadSelector();</script>

<script>
function SPI(percent,cursize,time,speed,files,left)
{
document.getElementById('pieb').innerHTML = percent+'%';
margin = 0-30*Math.round(parseFloat(percent)/5);
document.getElementById('pie').style.backgroundPosition=margin+'px 0'; } </script>

</body>
</html>
Top
User avatar
PilgrimX182
Posts: 2186
Joined: Mar 22, 2006 1:39 pm

#2 Postby PilgrimX182 » Aug 01, 2007 5:34 am

If I got you right, you've purchased Pro version.

1) In xupload.js find

Code: Select all

if($('progress_bar'))$('progress_bar').style.display='block';
and replace it with

Code: Select all

if($('show_upload').checked)$('progress_bar').style.display='block';
2) In upload.cgi find "sleep 1;" and replace 1 with 5 or 10 - it's pause after upload in seconds.

3) It's complex. But I think this will work if you insert code below to some TD cell or div with fixed width.

Code: Select all

<div class="sbar" id="b1"><span></span></div></TD><TD><div class="sbar" id="b2"><span></span></div></TD><TD><div class="sbar" id="b3"><span></span></div></TD><TD><div class="sbar" id="b4"><span></span></div></TD><TD><div class="sbar" id="b5"><span></span></div></TD><TD><div class="sbar" id="b6"><span></span></div></TD><TD><div class="sbar" id="b7"><span></span></div></TD><TD><div class="sbar" id="b8"><span></span></div></TD><TD><div class="sbar" id="b9"><span></span></div></TD><TD><div class="sbar" id="b10"><span></span></div></TD><TD><div class="sbar" id="b11"><span></span></div></TD><TD><div class="sbar" id="b12"><span></span></div></TD><TD><div class="sbar" id="b13"><span></span></div></TD><TD><div class="sbar" id="b14"><span></span></div></TD><TD><div class="sbar" id="b15"><span></span></div></TD><TD><div class="sbar" id="b16"><span></span></div></TD><TD><div class="sbar" id="b17"><span></span></div></TD><TD><div class="sbar" id="b18"><span></span></div></TD><TD><div class="sbar" id="b19"><span></span></div></TD><TD><div class="sbar" id="b20"><span></span></div>
Top
mmcw
Posts: 7
Joined: Jul 31, 2007 3:09 pm

#3 Postby mmcw » Aug 01, 2007 8:40 am

PilgrimX182 wrote:If I got you right, you've purchased Pro version.

1) In xupload.js find

Code: Select all

if($('progress_bar'))$('progress_bar').style.display='block';
and replace it with

Code: Select all

if($('show_upload').checked)$('progress_bar').style.display='block';
Thanks, that did the trick.

2) In upload.cgi find "sleep 1;" and replace 1 with 5 or 10 - it's pause after upload in seconds.

Sorry that did not work. This will wait BEFORE the message field is filled with the data. But will show the data. The text added by use of the following code

Code: Select all

<div class="message" id="message" nowrap></div>
will be shown but then directly the url_post page will be loaded. How to makethe message part also be vissible for x seconds OR even better how to make this optional like you already did in the popup option. There is an checkbox where you can check if you want to load the url_post directly after upload or if yoy want to wait. There is also a close button what will have to be in this case a button that will redirect to the url_post.

3) It's complex. But I think this will work if you insert code below to some TD cell or div with fixed width.

Code: Select all

<div class="sbar" id="b1"><span></span></div></TD><TD><div class="sbar" id="b2"><span></span></div></TD><TD><div class="sbar" id="b3"><span></span></div></TD><TD><div class="sbar" id="b4"><span></span></div></TD><TD><div class="sbar" id="b5"><span></span></div></TD><TD><div class="sbar" id="b6"><span></span></div></TD><TD><div class="sbar" id="b7"><span></span></div></TD><TD><div class="sbar" id="b8"><span></span></div></TD><TD><div class="sbar" id="b9"><span></span></div></TD><TD><div class="sbar" id="b10"><span></span></div></TD><TD><div class="sbar" id="b11"><span></span></div></TD><TD><div class="sbar" id="b12"><span></span></div></TD><TD><div class="sbar" id="b13"><span></span></div></TD><TD><div class="sbar" id="b14"><span></span></div></TD><TD><div class="sbar" id="b15"><span></span></div></TD><TD><div class="sbar" id="b16"><span></span></div></TD><TD><div class="sbar" id="b17"><span></span></div></TD><TD><div class="sbar" id="b18"><span></span></div></TD><TD><div class="sbar" id="b19"><span></span></div></TD><TD><div class="sbar" id="b20"><span></span></div>
That did not work! Could you tak another look?
Top
User avatar
PilgrimX182
Posts: 2186
Joined: Mar 22, 2006 1:39 pm

#4 Postby PilgrimX182 » Aug 02, 2007 5:48 am

2) You've replaced wrong sleep. My fault. Edit sleep right after line:

Code: Select all

### Small pause to sync messages with pop-up
3) Made it work. Not easy at all.

in upload_form_tiny2.html add

Code: Select all

<Style>
.bar_table {width: 60px;}
.bar_table TR TD {background-color: #707070;}
.sbar {background-color: #e9e9e9; height: 60px;}
</Style>

Code: Select all

<Script>
var doc = document;
var dat = new Array(20);
for(i=0;i<dat.length;i++)dat[i]=0;
</Script>

Code: Select all

<small><font id="curr_speed">0</font> Kbps</small><br>
   <table cellpadding=0 cellspacing=0 border=0 class="bar_table" id="bar_table" style="height: 70px">
    <TR align=center valign=top>
    <TD><div class="sbar" id="b1"><span></span></div></TD><TD><div class="sbar" id="b2"><span></span></div></TD><TD><div class="sbar" id="b3"><span></span></div></TD><TD><div class="sbar" id="b4"><span></span></div></TD><TD><div class="sbar" id="b5"><span></span></div></TD><TD><div class="sbar" id="b6"><span></span></div></TD><TD><div class="sbar" id="b7"><span></span></div></TD><TD><div class="sbar" id="b8"><span></span></div></TD><TD><div class="sbar" id="b9"><span></span></div></TD><TD><div class="sbar" id="b10"><span></span></div></TD><TD><div class="sbar" id="b11"><span></span></div></TD><TD><div class="sbar" id="b12"><span></span></div></TD><TD><div class="sbar" id="b13"><span></span></div></TD><TD><div class="sbar" id="b14"><span></span></div></TD><TD><div class="sbar" id="b15"><span></span></div></TD><TD><div class="sbar" id="b16"><span></span></div></TD><TD><div class="sbar" id="b17"><span></span></div></TD><TD><div class="sbar" id="b18"><span></span></div></TD><TD><div class="sbar" id="b19"><span></span></div></TD><TD><div class="sbar" id="b20"><span></span></div></TD>
    </TR>
    </table>
Top
mmcw
Posts: 7
Joined: Jul 31, 2007 3:09 pm

#5 Postby mmcw » Aug 02, 2007 9:00 am

PilgrimX182 wrote:2) You've replaced wrong sleep. My fault. Edit sleep right after line:

Code: Select all

### Small pause to sync messages with pop-up

An extra sleep had to be placed after:

Code: Select all

### Small pause to sync messages with pop-up
sleep 1;
sleep(2) if $c->{ajax_mode}; # Ajax is pretty slow
&DelData($temp_dir);
&DeleteExpiredFiles( $c->{temp_dir}, $c->{temp_files_lifetime} );
&DeleteExpiredFiles( $c->{target_dir}, 86400*$c->{uploaded_files_lifetime} );

sleep 5;
Then it worked!

3) Made it work. Not easy at all.

in upload_form_tiny2.html add

Code: Select all

<Style>
.bar_table {width: 60px;}
.bar_table TR TD {background-color: #707070;}
.sbar {background-color: #e9e9e9; height: 60px;}
</Style>

Code: Select all

<Script>
var doc = document;
var dat = new Array(20);
for(i=0;i<dat.length;i++)dat[i]=0;
</Script>

Code: Select all

<small><font id="curr_speed">0</font> Kbps</small><br>
   <table cellpadding=0 cellspacing=0 border=0 class="bar_table" id="bar_table" style="height: 70px">
    <TR align=center valign=top>
    <TD><div class="sbar" id="b1"><span></span></div></TD><TD><div class="sbar" id="b2"><span></span></div></TD><TD><div class="sbar" id="b3"><span></span></div></TD><TD><div class="sbar" id="b4"><span></span></div></TD><TD><div class="sbar" id="b5"><span></span></div></TD><TD><div class="sbar" id="b6"><span></span></div></TD><TD><div class="sbar" id="b7"><span></span></div></TD><TD><div class="sbar" id="b8"><span></span></div></TD><TD><div class="sbar" id="b9"><span></span></div></TD><TD><div class="sbar" id="b10"><span></span></div></TD><TD><div class="sbar" id="b11"><span></span></div></TD><TD><div class="sbar" id="b12"><span></span></div></TD><TD><div class="sbar" id="b13"><span></span></div></TD><TD><div class="sbar" id="b14"><span></span></div></TD><TD><div class="sbar" id="b15"><span></span></div></TD><TD><div class="sbar" id="b16"><span></span></div></TD><TD><div class="sbar" id="b17"><span></span></div></TD><TD><div class="sbar" id="b18"><span></span></div></TD><TD><div class="sbar" id="b19"><span></span></div></TD><TD><div class="sbar" id="b20"><span></span></div></TD>
    </TR>
    </table>
That did the trick!
Top
mmcw
Posts: 7
Joined: Jul 31, 2007 3:09 pm

#6 Postby mmcw » Aug 02, 2007 9:01 am

Are you interresed in the final result as an extra example?
Top
User avatar
PilgrimX182
Posts: 2186
Joined: Mar 22, 2006 1:39 pm

#7 Postby PilgrimX182 » Aug 02, 2007 11:57 am

Sure ;)
Top
Locked

Return to “XUpload”