CODEWITHSUNDEEP
javascriptjqueryhtmlajaxmicrochip
Josh C
Josh C

Reputation: 89

Needed File Upload Progress Bar

I need to display an upload progress indicator on a webpage interface for a client using an embedded Microchip TCP/IP stack Pic32 board. In the webpage, I have an upload file page that lets the client browse and select the appropriate .hex or .wav file to upload to the board memory, and thus be able to eventually bootstrap that file. My problem is that when the file is uploading, the client is unaware of the progress the file is making, and might navigate from the page, and thus cancel download. I need an indicator to show the progress of the upload in order to keep the client informed. Keep in mind I have 5 upload boxes for the different instances needing to be uploaded. I only allow 1 upload at a time.

here is the code for html section:

    <table width="900" border="0" cellpadding="1" class="uploadTable">
      <tr>
        <td width="420" rowspan="2"><form action="fileupload.html" method="post"   enctype="multipart/form-data">
          <div class="uploadBox"> 
            <p><b>Update Primary System Firmware</b></p>
            <p>File: 
              <input type="file" name="firmwaremain" size="30" />
              &nbsp;
              <input type="submit" value="Upload" />
            </p>
          </div>
        </form></td>
        <td width="252" height="23"><div align="center"><strong>Current File Name:  </strong></div></td>
        <td width="104"><div align="center"><strong>Current File Size:</strong></div> </td>
        <td width="104"><div align="center"><strong>File Upload Date:</strong></div></td>
      </tr>
      <tr>
        <td height="40"><div align="center">~curFirmName~</div></td>
        <td width="104"><div align="center">~curFirmSize~</div></td>
        <td width="104"><div align="center">~curFirmDate~</div></td>
        </tr>
    </table>

I have the Microchip customHTTPApp.c code available, but it is too cumbersome to post here.

I can email if needed, or chat. I don't have the rep to post pictures, and my web interface site is in a standalone board, so no links.

Thank you in advance for the help!

-Josh

Upvotes: 2

Views: 1098

Answers (1)

Matthew
Matthew

Reputation: 8426

A basic outline/idea:

  • Use a JavaScript timeout to poll a URL every N seconds: setTimeout(1000*N), "getProgress()");. This is called from onchange for your type="file" input tag
  • Your JS getProgress function makes an Ajax request to a URL: http//localhost/uploadProgress
  • Your JS getProgress function also calls setTimeout again on itself (same code) if the file is not finished uploading.
  • Your progress URL returns the currently uploading file progress in percentage (bytes perhaps?) as a JSON string: {progress:"50"}
  • Have a DIV of N pixels width id="progress-complete" and a nested DIV id="progress" with width equal to the percentage value returned by your Ajax call

Let me know if I can expand on that if it's helpful. I'm just posting this in the case you need somewhere to get started.

Upvotes: 1

Related Questions