So how do you communicate to the end-user that an upload is going on (beyond the status bar in the browser)? If you are uploading more than one file then the application can seem to hang or freeze to a user on a slow connection.
The first thing you will need is the Jquery java script library. The second thing you need is the Jquery Block UI plug-in.
You can use a content delivery network hosted copy if you want but in my examples I will use them as a static resource in salesforce.
In this example, I have also created a static resource named Ajax_Loader. This static resource is simply an animation that I would like to display while the transaction is being processed.
This static resource will be referenced in the blockme javascript function we are going to create. This function will then be called by the onclick action of the command button.
Here is a sample visual force page:
<apex:page controller="testControllerExt" sidebar="false" showHeader="false" standardStylesheets="false" >
<head>
<apex:includeScript value="{!$Resource.jquery}"/>
<apex:includeScript value="{!$Resource.jqueryblockUI}"/>
<script type="text/javascript">
j$ = jQuery.noConflict();
function blockme() {
j$.blockUI({message: '<img src="{!URLFOR($Resource.Ajax_Loader)}">'});
}
</script>
</head>
<apex:outputpanel id="Main">
<apex:form >
<apex:inputFile value="{!SampleFile.body}" filename="{!SampleFile.name}" id="SampleFile"/>
<br/>
<apex:commandbutton value="Submit" action="{!save}" onclick="blockme()" />
</apex:form>
</apex:outputpanel>
</apex:page>
With a matching controller, this page will have a loading message while the file uploads. I have tested this in IE7 and Firefox 15.
Note: This has been discussed before and I mention it here because the lack of an oncomplete attribute in the command button is what allows this to work with a file upload.
No comments:
Post a Comment