JS Remoting + Angular Ng-File-Upload

Question

I was wondering if anyone had any examples using AngularJS + NgFileUpload and a @RemoteAction that handles base64 encoded file-data to create a drag & drop uploader?

I have JS handler that works with base64 encoded data

JS Handler:

var remoteUploadHandler = function(attachmentBody) {
    MyController.fileUploader(attachmentName, attachmentBody,
        function(result, event) {
            console.log(result);
            if (event.type === 'exception') {
                console.log("exception");
                console.log(event);
            } else if (event.status) {
                if (result.substring(0, 3) == '00P') {
                    if (doneUploading == true) {
                        Console.log('Done uploading');
                    } else {
                        positionIndex += chunkSize;
                        uploadAttachment(result);
                    }
                }
            } else {
                console.log(event.message);
            }
        }, {
            buffer: true,
            escape: true,
            timeout: 120000
        });
};

Controller:

@RemoteAction
    global static String fileUploader(String fileName, String base64BlobValue){
        try{
            System.debug('Filename: '+fileName+' Blob: '+base64BlobValue);
            return 'Upload Successful';
        } catch(exception e){
            return e.getMessage();
        }
    }

But I want to convert it to D&D and use some of the methods in NgFileUpload, but their example:

http://jsfiddle.net/danialfarid/0mz6ff9o/135/, uses a traditional form-post.

Answer 1

RemoteAction methods are not well suited for file uploads, which I found out by way of personal experience. The maximum payload is somewhere under 1mb, and with base 64 encoding, that's even less. Even modest sized images are too big for RemoteAction methods.

Instead, you'll want to POST, either natively or by way of a XMLHttpRequest. You can just use the regular REST API or a custom RestResource method.

Answer 2

myCmp.cmp

<input type="file" class="inputFile" aura:id="upload_file" />
<lightning:button variant="neutral" label="upload" onclick="{!c.uploadFile}"/>

myCmpController.js

    uploadFile : function (component, event, helper) {
        var fileInput = component.find("upload_file").getElement();
        var file = fileInput.files[0];
        var fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onload = $A.getCallback(function() {
            helper.upload(component, event, helper, file, fr.result);
        });
    },
    upload : function(component, event, helper, file, fileContents) {
        var action = component.get("c.fileUploader"); 
        action.setParams({
            fileName: file.name,
            base64Data: fileContents,
        });
        action.setCallback(this, function(response) {});
        $A.enqueueAction(action);
    }

apex controller

@AuraEnabled public static void fileUploader(String fileName, String base64Data){}