2

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.

3

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.

1

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){}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.