<apex:page standardController="Account" extensions="Attachment_Action_Function">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection title="Upload Files">
                <input type="file" name="pic" accept="image/*, audio/*, video/* " id = "upFile" value="fileupload" class = "reqFiles" multiple="true"/>
                <button name="Upload" onclick="uploadFile();return false;" > Upload </button>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
    <script type="text/javascript">
        var blobfile;
        var fbody;
        var fbodyArray=[];
        var filePropArray = [];
        function getAsText(readFile) {
            var fileIndex = 0;
            for(var i=0 ; i < readFile.length; i++) {
                var reader = new FileReader();
                reader.readAsDataURL(readFile[i]);
                reader.addEventListener("load", function () {
                    var fileString = this.result;
                    blobfile = fileString;
                    var fileProp = {fileName : fbodyArray[fileIndex].name, fileType : fbodyArray[fileIndex].type , file : blobfile.split(",")[1]};
                    filePropArray.push(fileProp);
                    if( fileIndex  < fbodyArray.length) {
                        fileIndex++;
                    }
                }, false);
            }
            console.log('filePropArray before remoting=======',filePropArray);
            Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.Attachment_Action_Function.saveFile}'
                , filePropArray
                , "{!Account.Id}"                                      
                , function(result, event){
                    console.log('result ===== '+result);
                    if(event.type === 'exception' ) {
                    } else {
                        console.log('upload successful');
                    }
                }
            );
        }

        function uploadFile() { 
            fbodyArray = document.getElementById('upFile').files;
            // For multiple, send the whole List of Files 
            getAsText(fbodyArray);
        }   
    </script>
</apex:page>

public class Attachment_Action_Function {

    public transient String base64;

    //public Call_Report__c cr {get;set;}
    

    public List<Attachment> mulfiles{get;set;}

    public void gotonewpage(){

       // PageReference pageRef = Page.CallReport;

       // pageRef.getParameters().put('msg','success');

       // return PageRef;

    }

    public Attachment_Action_Function() {

        mulfiles=new List<Attachment>();

    }

    public String getBase64(){

        return base64;

    }

    public void setbase64(String base64){

        this.base64 = base64;

    }

    public String fileName {get; set;}

    public Attachment_Action_Function(ApexPages.StandardController controller){
       // this.cr  = new Call_Report__c();
       // mulfiles = new List<Attachment>();

        //cr = (Call_Report__c)controller.getRecord();

    }

/**    public void saveFile(){

        Attachment a = new Attachment(parentId = cr.id, Body = EncodingUtil.base64Decode(base64), name = fileName);

        mulfiles=new List<Attachment>();
       // mulfiles.AccountId= cr.Id;

        mulfiles.add(a);

        //insert a;

    }*/
    
    @RemoteAction
    public static void saveFile(List<Map<String, String>> filePropMap, String accountId) {
        String file;
        String filename;
        String fileType;
        List<Attachment> listAttachment = new List<Attachment>();
        for(Map<String, String> prop : filePropMap) {
            file = prop.get('file');
            fileType = prop.get('fileType');
            filename =  prop.get('fileName');
            listAttachment.add(new Attachment(Body = Blob.valueOf(file), name = filename, ParentId= accountId));
        }
        insert listAttachment;
    }

    public PageReference saveinline() {

        return null;

    }

}