Javascript in VisualForce page - form submit success, trigger apex?

Question

Right now, the code below upon submit, first inserts a file THEN submits the form. This is problematic - I need for it to verify the form was successfully posted to Amazon S3 then insert the (token) file so it can link to it.

I basically need to reverse SubmitFile and InsertFile, but I'm not sure how to have (If form successfully sent, then run another javascript function). See very bottom for an attempt...Is this possible?

   <apex:pageMessages id="pageErrors"></apex:pageMessages>
<form name="s3Form" action="https://s3.amazonaws.com/mybucket" method="post" enctype="multipart/form-data">   
    <input type="hidden" name="key"/> 
    <input type="hidden" name="AWSAccessKeyId" value="{!key}"/> 
    <input type="hidden" name="policy" value="{!policy}"/>
    <input type="hidden" name="signature" value="{!signedPolicy}"/> 
    <input type="hidden" name="acl" value="private"/> 
    <input type="hidden" name="x-amz-meta-FileId" value="{!File__c.id}"/>
    <input type="hidden" name="x-amz-meta-OrderId" value="{!OrderId}"/>
    <input type="hidden" name="x-amz-meta-CustomerId" value="{!CustomerId}"/>     
    <input type="hidden" name="success_action_redirect" value="{!serverUrl}{!OrderId}"/>           

    <apex:pageBlock title="New File Upload" mode="maindetail" tabStyle="File__c"> <!--  rendered="{!open}"-->
        <apex:pageBlockSection title="File Information" columns="2" collapsible="false" showHeader="false">                               
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Select File" for="selectFile"/>            
                <input id="selectedFile" type="file" size="25" name="file" onChange="setFileName(this.value)"/>                
            </apex:pageBlockSectionItem>                                         
        </apex:pageBlockSection>
        <apex:pageBlockButtons location="bottom">
            <input class="btn" type="button" value="Upload File" onClick="checkFile();return false;"/>                
            <input class="btn" type="button" value="Cancel" onClick="cancelFile();return false;"/>
            <input class="btn" type="button" value="Complete Order" onClick="completeFile();return false;"/>
        </apex:pageBlockButtons>          
    </apex:pageBlock>
    <apex:outputText styleClass="footer" value="Please click Complete Order when all the required files are uploaded. Thank you." />
</form> 

 <apex:form id="sfForm"><!--  rendered="{!open}"-->

    <apex:inputHidden id="hiddenServerURL"  value="{!serverURL}"/>
    <apex:inputHidden id="fileName" value="{!fileName}"/>
    <apex:inputHidden id="contentType" value="{!contentType}"/>
    <apex:inputHidden id="fileType" value="{!fileType}"/>
    <apex:actionFunction name="insertFile" action="{!insertFile}" oncomplete="submitFile();return false;"/>
    <apex:actionFunction name="completeOrder" action="{!completeOrder}"/>


    <script type="text/javascript">
    var sendFile = false;
    document.getElementById('{!$Component.hiddenServerURL}').value = '{!$Api.Enterprise_Server_URL_140}';       
    function setFileName(file) {
        var f = file.replace(/\\/g, "");
        f = f.replace(/C\:fakepath/g, ""); <!--Required for IE8-->
        document.s3Form.key.value = "{!CustomerName}/{!OrderName}/" + f;
        document.getElementById('{!$Component.fileName}').value = f;
        suffix = f.lastIndexOf(".") + 1;
        contentType = f.slice(suffix);
        document.getElementById('{!$Component.contentType}').value = contentType;
    }
    function setFileType(type) {
        document.getElementById('{!$Component.fileType}').value = type;
    }
    function checkFile() {
        if (document.s3Form.file.value=="") {
            alert("Please, select a file.");
            return false;
        } 
        else if (document.s3Form.fType.value=="--None--") {
            alert("Please, select a file type.");
            return false;
        }
        else {     
            alert("Uploading...Please click OK and wait for page to refresh.");        
            insertFile();
            sendFile = true;
        }
    }
    function submitFile() {
        if(sendFile = false) {
        return false;
        }
        else {
        document.s3Form.submit();
        }
    } 
    function completeFile() {
        completeOrder();
    }   
    </script>

</apex:form>

In the controller (extension):

//SF File insert on an object (passed from page)
public PageReference insertFile() {
    this.file.Name = fileName;
    this.file.Type__c = fileType;
    this.file.Content__c = contentType;
    insert this.file;
    return null;
}

Here is the javascript section i tried to alter, but i can't find anything after extensive searches on if this works...

        function checkFile() {
        if (document.s3Form.file.value=="") {
            alert("Please, select a file.");
            return false;
        } 
        else if (document.s3Form.fType.value=="--None--") {
            alert("Please, select a file type.");
            return false;
        }
        else {     
            alert("Uploading...Please click OK and wait for page to refresh.");        
            document.s3Form.submit({
                success: function(){
                    alert("Testing!");
                    insertFile();
                },
            });
        }
    }

Ralph Callaway Ralph Callaway · Accepted Answer · 2011-08-25T02:18:48

So if I'm understanding you correctly you want to:

Validate file
Upload file to amazon s3
Save file token to salesforce

Not to throw a wrench in your plans but you might try completing the whole routine in apex. Here's some pseudo code. Salesforce also has developed a toolkit for working with Amazon S3 so you shouldn't have to develop everything from scratch.

Visualforce Page:

<apex:page controller="MyController">
  <apex:form>
    <apex:inputFile value="{!file.body}" filename="{!file.name}"/>
    <apex:commandButton value="Submit" action="{!submitFile}"/>
  </apex:form>
</apex:page>

Apex Controller:

public class MyController {
  public Document file { get; set; } { file = new Document(); } // dummy object for storing binary file data

  public void submitFile() {
    if(!validateFile())
      return;
    String s3Token = submitToS3();
    if(s3Token != null) {
      File__c newFile = new File__c(name = file.name, s3_token__c = s3Token);
      insert newFile;
    }
  }
}

Javascript in VisualForce page - form submit success, trigger apex?

2 Answers