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.

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
2
  • Ok, thanks, if I want to use a "RestResource", are there any examples of setting it up in a VF Pages in a Community? salesforce.stackexchange.com/questions/9792/… solution is use a RemoteAction - and this requires forceTk (may not anymore- but doesn't mention that in this thread) and with an XMLHttpRequest any example of that? Commented Mar 31, 2016 at 22:50
  • So the ForceTK no longer requires a proxy to work in VF. salesforce.stackexchange.com/questions/12664/… Commented Mar 31, 2016 at 23:52
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){}
Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.