show file upload progress to user

Question

When we upload file to server we get progress in footer(exa: chrome browser) how can i get this value so i can show this to user can we get this value using javascript or any other thing. So that we can show Progress Bar to user when upload file in document or any other place.

Answer 1

This link is a great solution that @Tehnrd came up with. I will warn though, this is not a simple piece of code, this is a rather complex solution so unless you are fairly versed in Apex, JS, HTML, etc. I would warn against trying to implement this.

Here is the GitHub Repo

https://github.com/TehNrd/Multi-File-Uploader-Force.com

And here is the write up he did on his solution

http://www.tehnrd.com/multi-file-uploader-for-salesforce-oh-ya-and-progress-bars-too/

Answer 2

I worked on similar assignment given to me in my training. I have not used JS Remoting. Hope this will be helpful.

Visualforce Page:

<apex:page controller="AccountControllerSpam">
<style>    
    #el_loading
    {
       display: none;
    }

</style>
<apex:pageMessages />
    <apex:form enctype="multipart/form-data">
    <apex:pageBlock >
     <apex:pageBlockButtons >
       <apex:commandButton action="{!upload}"  value="Save" onclick="onUpload();" />
     </apex:pageBlockButtons>   
     <apex:pageBlockSection title="Select the Account" >   
        <apex:selectList value="{!selectedaccountId}" size="1" multiselect="false"  >
            <apex:selectOptions value="{!ListOfAccounts}" />
        </apex:selectList>
        <apex:inputFile value="{!filebody}" filename="{!FileName}"/>    
     </apex:pageBlockSection>

    </apex:pageBlock>
    </apex:form>

<div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb; height:100%;opacity:0.75;width:100%;">
    <div class="waitingHolder" style="top: 100px; width: 91px;">
        <img class="waitingImage" src="/img/loading.gif" title="Please Wait..."  style="width: 40;height:40;"/>
    <span class="waitingDescription">Attachment is Uploading . . . .</span>
    </div>
</div>
<script>
    function onUpload()
    {
        var ul = document.getElementById('el_loading');
        ul.style.display = 'inline';
    }
</script>
</apex:page>

Controller Page :

public with sharing class AccountControllerSpam {
    public Attachment attachment{
  get {
      if (attachment == null)
        attachment = new Attachment();
      return attachment;
    }
  set;
  }

    public string selectedaccountId{get;set;}
    public string FileName{get;set;}
    public blob Filebody{get;set;}
public List<SelectOption> getListOfAccounts()
{
           List<Account> AccountList = [select id,Name from Account] ;

           List<SelectOption> AccountOptionList = new List<SelectOption>();
           AccountOptionList .add(new SelectOption( ' ' ,'---Select---'));
           for(Account acc : AccountList )
           {
                      AccountOptionList .add(new SelectOption(acc.id , acc.Name));
           }
          return AccountOptionList ;
}



    public AccountControllerSpam(){ }


            public PageReference upload() {

attachment.OwnerId = UserInfo.getUserId();
attachment.ParentId = selectedaccountId; 
attachment.IsPrivate = true;
            attachment.Name=FileName;
attachment.Body=Filebody;    
try {
  insert attachment;
} catch (DMLException e) {
  ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error uploading attachment'));
  return null;
} finally {
  attachment = new Attachment(); 
}

ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'Attachment uploaded successfully'));
   //PageReference pageRef = new PageReference('/'+selectedaccountId);

return null;}}