Apache2-UploadProgress

 view release on metacpan or  search on metacpan

examples/css/progress_bluebar.css  view on Meta::CPAN

    width: 300px;
}

.progressmeter .meter .amount {
    background: url('data:image/gif;base64,R0lGODlhEAAUAPcAACtBUPLy8idFZyxCUFWV41ub5WKe5rLo/yZEZyZEZvHx8fDx8l+b5dnZ2VqZ5U2L32a1+lua5ViY5C122Sx02F+e5l2c5jN9316b5FST4jaC3lWm9Ya07FGQ4V6c5TJ73VSU41Gi8keW7tbX2HK//PHx8idEZ1Ok84y67liV4tfY2Iq37Yi27FuY4zqG4m6...
    background-color: #667799;
    width: 0px;
    height: 18px
}

.progressmeter .meter .percent {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1000;
    height: 18px;
    text-align: center;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
}

examples/css/progress_blueblock.css  view on Meta::CPAN

    width: 285px;
    height: 24px
}

.progressmeter .meter .amount {
    background: url('data:image/gif;base64,R0lGODlhEwAYAIACAJeX/////ywAAAAAEwAYAAACLoyPqcsID6N0skJqK85x8+d9ITdmpXVqxzet7OW+QNoaMhi/dJezO2y7NYbEYQEAOw==') repeat-x;
    width: 0px;
    height: 24px
}

.progressmeter .meter .percent {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1000;
    height: 24px;
    text-align: center;
    font-family: Arial;
    font-size: 20px;
    font-weight: bold;
}

extra/progress.css  view on Meta::CPAN

    height: 20px;
    width: 380px;
}

.progressmeter .meter .amount {
    background-color: #667799;
    width: 0px;
    height: 20px
}

.progressmeter .meter .percent {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 20px;
    z-index: 1000;
    text-align: center;
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;

extra/progress.jmpl  view on Meta::CPAN

<span class="progressmeter">
  <div class="meter">
    <div class="amount"  style="width: [% percent %]%;"></div>
    <div class="percent" style="width: 100%">[% percent %]%</div>
  </div>
  <table>
    <tbody>
      <tr>
        <th>Status:</th>
        <td>
[% IF finished -%]
          <span class="finished">Transfer complete  ([% size %])</span>
[% ELSE -%]
          [% received %] of [% size %]

extra/progress.jmpl.js  view on Meta::CPAN

    throw('Jemplate.js must be loaded before any Jemplate template files');

Jemplate.templateMap['progress.jmpl'] = function(context) {
    if (! context) throw('Jemplate function called without context\n');
    var stash = context.stash;
    var output = '';

    try {
output += '<span class="progressmeter">\n  <div class="meter">\n    <div class="amount"  style="width: ';
//line 3 "progress.jmpl"
output += stash.get('percent');
output += '%;"></div>\n    <div class="percent" style="width: 100%">';
//line 4 "progress.jmpl"
output += stash.get('percent');
output += '%</div>\n  </div>\n  <table>\n    <tbody>\n      <tr>\n        <th>Status:</th>\n        <td>\n';
//line 15 "progress.jmpl"
if (stash.get('finished')) {
output += '          <span class="finished">Transfer complete  (';
//line 12 "progress.jmpl"
output += stash.get('size');
output += ')</span>\n';
}
else {
output += '          ';

extra/progress.js  view on Meta::CPAN

        else
            progress.remainingtime = '';

        progress.currentrate   = formatBytes(progress.currentrate);
        progress.rate          = formatBytes(progress.rate);
        progress.elapsedtime   = formatTime(progress.elapsedtime);
        progress.remainingtime = formatTime(progress.remainingtime);
    }

    if (progress.size != 0)
        progress.percent = Math.round(progress.received / progress.size * 100);

    progress.size     = formatBytes(progress.size);
    progress.received = formatBytes(progress.received);

    document.getElementById('progress').innerHTML = Jemplate.process('progress.jmpl', progress);
}

function reportUploadProgress() {
    
    url = '/UpdateProgress?progress_id=' + progress.id;

extra/progress.xsl  view on Meta::CPAN

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" version='1.0' encoding='UTF-8' indent="yes" />
  <!-- root rule -->
  <xsl:template match="/">
    <xsl:apply-templates/>
  </xsl:template>
  <!-- main rule for document element -->
  <xsl:template match="upload">
    <xsl:variable name="percent" select="round(received div size * 100)"/>
    <xsl:variable name="remaining" select="size - received"/>
    <xsl:if test="$remaining">
      <meta http-equiv="refresh" content="1" />
    </xsl:if>
    <link rel="stylesheet" type="text/css" href="/UploadProgress/progress.css" />
    <div style="margin: 2% 10%">
      <h3>Upload Progress</h3>
      <div class="progressmeter">
        <div class="meter">
          <div class="amount">
            <xsl:attribute name="style">width: <xsl:value-of select="$percent"/>%;</xsl:attribute>
          </div>
          <div class="percent">
            <xsl:value-of select="$percent"/>%
          </div>
        </div>
        <table>
          <tbody>
            <tr>
              <th>Status:</th>
              <td>
                <xsl:choose>
                  <xsl:when test="$remaining">
                    <xsl:call-template name="format-bytes">