Upload an Attachment using Angular code

Question

I have following code in VF page:

<tr>
    <td class = "jtd">Resume</td>        
         <td><input type="file" id="file" ng-model="con.file"/>
    </td>
</tr>

I have a button called 'Register', Onclick of this button, I want to save an attachment with contact(ParentId).

Here is my Angular Code:

var App = angular.module('myApp', []);

App.controller('myctrl', function ($scope, appFactory ) {        
    $scope.jDetails =   '{!objJobDetail}';
    console.log($scope.jDetails);

    $scope.saveData = function(con) {
        $scope.message = appFactory.saveContact(con);
        $scope.$apply();
    }
});      
App.factory('appFactory', function(){
    return {
        saveContact: function(con) {
            var reply ="";
            var jsonContact = JSON.stringify(con);
            console.log(con);
            //var jsonAccount = JSON.stringify(Account);
            Visualforce.remoting.Manager.invokeAction(
    '{!$RemoteAction.ApplyToJobController.addContacts}',
                jsonContact,
                function(result, event) {
                    if (event.status){
                        reply = "Factory Saved Data";
                        //window.location.reload();
                    }else
                    {
                        reply  = "Failed";
                        //window.location.reload();
                    }
                }); 
            return reply;
        }
    };             
});

The thing is, I'm able to create contact/Send Contact data to Apex Method, But Don't see any attachment data. The console.log() is also not showing up any file data.

Answer 1

Here is some code from something I did a couple of years ago. Don't know if its the best way but it worked.

HTML:

<input type="file" onchange="angular.element(this).scope().fileChanged(this)"/>

JavaScript:

// Used for when FileReader api is available - most modern browsers
$scope.fileChanged = function(element) {
    var file = element.files[0];
    var r = new FileReader();
    r.onloadend = function() {
        var dataUrl = r.result;
        var parts = dataUrl.split(',');
        if (parts.length == 2) {
            // Assumes URL ends in id of parent object for the Attachment
            var segments = $location.path().split('/');
            var parentId = segments[segments.length - 1];
            var attachmentData = {
                    parentId: parentId,
                    name: file.name,
                    base64Data: parts[1],
                    contentType: file.type
                    };
            // Pass the data to the server here e.g. via a service or remoting
         }
    });
};

Answer 2

scope.AttatchmentFiles = function(file) {
    if (scope.fileSize > 4300000) {
        if(appPage && appPage == 'embed'){
            sessionErrorModalService.setErrorModal('Oops', utilSrv.FILE_EXCEED_ERROR_MESSAGE);
            $('#sessionErrorModal').modal('show');
        }else {
            errorModalService.setErrorModal('Oops', utilSrv.FILE_EXCEED_ERROR_MESSAGE);
            $('#errorModal').modal('show');
        }
        $('#qmpb').css({
            'display' : 'none'
        });
        angular.element($('#inp_add_new_file').val(''));
        angular.element($('#add_new_file').val(''));
    } else {
        scope.file_size = scope.fileread.length;
        scope.attachmentBody = "";
        scope.$emit('uloadPer', {pp:scope.pb,id:scope.utype});
        if (scope.file_size <= scope.positionIndex + chunkSize) {
            scope.attachmentBody = scope.fileread.substring(scope.positionIndex);
            doneUploading = true;
        } else {
            scope.attachmentBody = scope.fileread.substring(scope.positionIndex, scope.positionIndex + chunkSize);
            doneUploading = false;
        }

        var requestObj = {
            event: "fileupload",
            payload: {
                data: scope.attachmentBody,
                attId: scope.attId || ""
            }
        }

        if (!scope.attId) {
            requestObj.payload.id = scope.ids;
            requestObj.payload.filesize = file.size;
            requestObj.payload.filename = file.name;
        }

        dealService.addAttachments(requestObj).then(function(result) {
            result = JSON.parse(result);
            if(utilSrv.errorValidation(result) == true) {
                var percentComplete = Math.round((scope.positionIndex / scope.fileSize) * 100);
                scope.pb.progress = (percentComplete!=0)? percentComplete : 4;
                scope.$emit('uloadPer', {pp:scope.pb,id:scope.utype});

                scope.attId = result.payload.attId;
                if (result.payload.attId.substring(0, 3) == '00P') {
                    if (doneUploading == true) {
                        scope.attId = "";
                        scope.attachmentBody = "";
                        scope.positionIndex = 0;
                        scope.fileread = "";
                        scope.attachment(scope.ids);
                        angular.element($('#inp_add_new_file').val(''));
                        angular.element($('#add_new_file').val(''));
                    } else {
                        scope.positionIndex += chunkSize;
                        scope.attId = result.payload.attId;
                        scope.AttatchmentFiles();
                    }
                }
            }
        }, function(error) {
            scope.sfdcResult = 'ERROR: ' , error.message;
        });
    }
}