0

I'm trying to upload multiple attachments. First I'm getting attachments from user interface, then I'm converting them into JSON , then I need to make a server call. In this I'm using FileReader.

({
    saveFiles : function(component, event)
    {
        component.set("v.showLoadingSpinner", true);
        var files = component.find("fileId").get("v.files");
        var fileDetails = {};
        fileDetails.parentId = component.get("v.parentId");
        fileDetails.files = [];
        console.log('component..!',component);
        for(var i = 0; i < files.length; i++)
        {
            (function(file,idx,len) {
                console.log(idx+'--'+len);
                var name = file.name;
                var reader = new FileReader(); 
                reader.fName = files[i]['name'];
                reader.fType = files[i]['type'];
                reader.i = i;
                reader.onload = function(e) {
                    var fileContents = reader.result;
                    var base64 = 'base64,';
                    var dataStart = fileContents.indexOf(base64) + base64.length;
                    fileContents = fileContents.substring(dataStart);
                    var startPosition = 0;
                    var endPosition = Math.min(fileContents.length, startPosition + 750000);
                    var getchunk = fileContents.substring(startPosition, endPosition);
                    var fDetails = {};
                    fDetails.fileName = reader.fName;
                    fDetails.base64Data = encodeURIComponent(getchunk);
                    fDetails.contentType = reader.fType;
                    fileDetails.files.push(fDetails);

                    if(idx == len-1)
                    {
                        console.log('fileDetails..!',fileDetails);
                        var actSave = component.get("c.saveFilesData");
                        actSave.setParams({
                            "fileWrap": 'fileDetails'
                        });
                        actSave.setCallback(this, function(response) {
                            var state = response.getState();
                            console.log(response.getReturnValue());
                        });
                        $A.enqueueAction(actSave);
                    }
                }
                reader.readAsDataURL(file);
            })(files[i],i,files.length);
        }
    }
})

Above method is in helper.js. When user try to save attachments, above method will invoke.

I put a console log in callback. It is not invoking.

  • Is the condition if(idx == len-1) satisfied? Is console.log('fileDetails..!',fileDetails); showing expected result? – Sikha Baid Oct 24 '17 at 17:37
  • if(idx == len-1) is satisfied. console.log('fileDetails..!',fileDetails); also executing and giving expected results. But problem is I'm not able to make a server call . – manoj Oct 24 '17 at 17:48
  • I am afraid if you have issues with your class. It would be good to see the class code as well. – Sikha Baid Oct 24 '17 at 18:01
  • Is your apex method marked with@auraenabled annotation? – Rao Oct 24 '17 at 18:01
  • @s @AuraEnabled public static String saveFilesData(String fileWrap) { system.debug('fileWrap..!'+fileWrap); return fileWrap; } This is the method I'm using to save attachments. – manoj Oct 24 '17 at 18:05
0

I had a similar problem here. you probably need the same solution:

execute your onload function from $A.getCallback:

reader.onload = $A.getCallback(function() {

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.