+ Start a Discussion
Sergio Mac IntoshSergio Mac Intosh 

My file uploader doesnt work in IE10 and 11

Hi,

Can someone help me with my filereader?
It works perfect on google chrome but doesnt work on internet explorer because of the javascript function 'reader.readAsBinaryString(f);'
This function isn't supported in IE. Can someone help me to make this also work for IE?

Thanks in advance!
 
<apex:page docType="html-5.0" title="Upload Account Logo" standardController="Account" extensions="uploadAccountLogo" action="{!init}" sidebar="false" showHeader="false" >
    <style>
        .mypage {
            font-family: "ProximaNovaSoft-Regular", Calibri; 
            font-size: 110%;
            padding-top: 12px;
            width: 100%;
        }
        
        .mypage input[type=file] {
            width: 100%;
            height: 35px;
            -webkit-appearance: none;
            padding: 0 8px;
            margin: 4px 0;
            line-height: 21px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 3px;
            outline: none;
        }
        .mypage button {
            -webkit-appearance: button;
            border-radius: 3px;
            display: block;
            padding: 12px;
            margin: 4px 0;
            width: 100%;
            background: #eee;
            border: solid 1px #ccc;
        }
    </style>
    <apex:pageMessages id="messages"></apex:pageMessages>
    
    <apex:form >
    <apex:actionFunction name="showMessage" action="{!showMessage}" rerender="messages">
        <apex:param name="message" assignTo="{!message}" value="" />
        <apex:param name="messageType" assignTo="{!messageType}" value="" />
    </apex:actionFunction>
    </apex:form>
    
    <input type="hidden" id="accountId" name="accountId" value="{!getAccountId}"/>
    <input type="hidden" id="folderId" name="folderId" value="{!getDocFolderId}"/>
    
    <div class="mypage">
        <h3>Upload Account Logo</h3>
        <input type="file" id="file-input" name="file" accept="image/*"/>
        <button onclick="uploadFile()">UploadFile</button>
    </div>
    <script  src="/soap/ajax/38.0/connection.js" type="text/javascript"></script>
    <script  src="/soap/ajax/38.0/apex.js" type="text/javascript"></script>
    <script type="text/javascript">
    var __sfdcSessionId = '{!GETSESSIONID()}';
    sforce.connection.sessionId = '{!$Api.Session_ID}';
    
    function uploadFile(){        
        var accountId = document.getElementById('accountId').value;
		var folderId = document.getElementById('folderId').value;
    	var input = document.getElementById('file-input');

        var filesToUpload = input.files;
        
        if(filesToUpload[0] == 'undefined' || filesToUpload[0] == null){
            showMessage('File Not Found!','WARNING');
            return;
        }
        
        ///Get Account to later update the account logo id
        var queryAcc = "SELECT Id, Account_Logo_Id__c FROM Account WHERE Id = '{!getAccountId}' limit 1"; 
        var resultAcc = sforce.connection.query(queryAcc); 
        var recordsAcc = resultAcc.getArray("records");         
        var account = recordsAcc[0];
        
        ///Get existing document if exist
        var docName = 'accLogo_' + accountId;
        var queryDoc = "SELECT Id FROM Document WHERE Name = '"+ docName +"' limit 1";         
        var resultDoc = sforce.connection.query(queryDoc);
        var recordsDoc = resultDoc.getArray("records");
        var existingDocument = recordsDoc[0];
        
        for(var i = 0, f; f = filesToUpload[i]; i++){
            var reader = new FileReader();
            reader.file = f;

			reader.onerror = function(e){
            	switch(e.target.error.code){
                    case e.target.error.NOT_FOUND_ERR:
                        showMessage('File Not Found!','WARNING');
                        break;
                    case e.target.error.NOT_READABLE_ERR:
                        showMessage('File is not readable','WARNING');
                        break;
                    case e.target.error.ABORT_ERR:
                        break; 
                    default:
                        showMessage('An error occurred reading this file.','WARNING');
            	};
        	};     

        	reader.onabort = function(e){
                showMessage('File read cancelled','WARNING');
        	};

        	reader.onload = function(e){
                if(existingDocument == 'undefined' || existingDocument == null){
                    var doc = new sforce.SObject("Document");
                    doc.Name = 'accLogo_' + accountId ;
                    doc.Type = '.jpg';
                    doc.Description = 'Account Logo for account:' + accountId ;
                    doc.FolderId = folderId;
                    doc.Body = (new sforce.Base64Binary(e.target.result)).toString();
    
                    sforce.connection.create([doc],
                    {
                        onSuccess : function(result, source) 
                        {
                            if (result[0].getBoolean("success")) 
                            {
                                console.log("new document created with id " + result[0].id);
                                account.Account_Logo_Id__c = result[0].id;
                                var results = sforce.connection.update([account]);
                                showMessage('Logo uploaded succesfull', 'SUCCESS');
                            } 
                            else 
                            {
                                console.log("failed to create document " + result[0]);
                                showMessage('Insert failed: ' + result[0], 'ERROR');
                            }
                        }, 
                        onFailure : function(error, source) 
                        {
                        console.log("An error has occurred " + error);
                        showMessage('Insert failed: ' + error, 'ERROR');
                        }
                    });
                }else{
                    existingDocument.Body = (new sforce.Base64Binary(e.target.result)).toString();
                    
                    sforce.connection.update([existingDocument],
                    {
                        onSuccess : function(result, source) 
                        {
                            if (result[0].getBoolean("success")) 
                            {
                                console.log("new document updated with id " + result[0].id);
                                account.Account_Logo_Id__c = result[0].id;
                                var results = sforce.connection.update([account]);
                                showMessage('Logo uploaded succesfull', 'SUCCESS');
                            } 
                            else 
                            {
                                console.log("failed to update document " + result[0]);
                                showMessage('Update failed: ' + result[0], 'ERROR');
                            }
                        }, 
                        onFailure : function(error, source) 
                        {
                        console.log("An error has occurred " + error);
                        showMessage('Update failed: ' + error, 'ERROR');
                        }
                    });
                }
        	};

            reader.readAsBinaryString(f);
    	}
    }
    </script>
    
</apex:page>

 
Best Answer chosen by Sergio Mac Intosh
Sergio Mac IntoshSergio Mac Intosh

This helped me

https://forceadventure.wordpress.com/2013/07/19/uploading-attachments-to-salesforce-using-javascript-remoting/

All Answers

NagendraNagendra (Salesforce Developers) 
Hi Sergio,

May I suggest you to please check with below links from the community which might help you to accelerate with above requirement. Regards,
Nagendra.
Sergio Mac IntoshSergio Mac Intosh

This helped me

https://forceadventure.wordpress.com/2013/07/19/uploading-attachments-to-salesforce-using-javascript-remoting/
This was selected as the best answer