Bulk upload in Lightning Component not working

Question

we have a requirement where we need to upload contacts in bulk from lightning. We have set the maximum limit to 75k. But when we upload csv, it is considering a file of only 200-300. We need to upload contacts in bulk i.e. above 3k. Please find the code helper code.

    ({
    MAX_FILE_SIZE: 750000,

    save : function(component) {
        var fileInput = component.find("file").getElement();
        var file = fileInput.files[0];

        if (file.size > this.MAX_FILE_SIZE) {
            alert('File size cannot exceed ' + this.MAX_FILE_SIZE + ' bytes.\n' +
                  'Selected file size: ' + file.size);
            return;
        }

        var fr = new FileReader();

        var self = this;
        fr.onload = function() {
            var fileContents = fr.result;
            var base64Mark = 'base64,';
            var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;

            fileContents = fileContents.substring(dataStart);
            self.upload(component, file, fileContents);
        };

        fr.readAsDataURL(file);
    },

    upload: function(component, file, fileContents) {
        var action = component.get("c.saveTheFile"); 
        action.setParams({
            parentId: component.get("v.recordId"),
            fileName: file.name,
            base64Data: encodeURIComponent(fileContents), 
            contentType: file.type
        });

        action.setCallback(this, function(a) {
            var attachId = a.getReturnValue();
            this.doneWaiting(component, event, helper);
            console.log(attachId);
            component.set("v.response",attachId);
        });

        /* $A.getCallback(function() {
            $A.enqueueAction(action); 
        });*/
        $A.enqueueAction(action);
    },

      $A.util.addClass(component.find("uploading").getElement(), "notUploading");
    }
})({
    MAX_FILE_SIZE: 750000,

    save : function(component) {
        var fileInput = component.find("file").getElement();
        var file = fileInput.files[0];

        if (file.size > this.MAX_FILE_SIZE) {
            alert('File size cannot exceed ' + this.MAX_FILE_SIZE + ' bytes.\n' +
                  'Selected file size: ' + file.size);
            return;
        }

        var fr = new FileReader();

        var self = this;
        fr.onload = function() {
            var fileContents = fr.result;
            var base64Mark = 'base64,';
            var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;

            fileContents = fileContents.substring(dataStart);
            self.upload(component, file, fileContents);
        };

        fr.readAsDataURL(file);
    },

    upload: function(component, file, fileContents) {
        var action = component.get("c.saveTheFile"); 
        action.setParams({
            parentId: component.get("v.recordId"),
            fileName: file.name,
            base64Data: encodeURIComponent(fileContents), 
            contentType: file.type
        });

        action.setCallback(this, function(a) {
            var attachId = a.getReturnValue();
            console.log(attachId);
            component.set("v.response",attachId);
        });

        /* $A.getCallback(function() {
            $A.enqueueAction(action); 
        });*/
        $A.enqueueAction(action);
    },


})

Please suggest any changes

Answer 1

Why don't you simply use lightning:fileUpload to upload the file and then using ID you can get the body in controller. Using this component you can skip the many limits which you are facing with your existing code. Once done with upload you can simply delete the file.

<lightning:fileUpload label="Attach receipt"
    name="fileUploader"
    multiple="true"
    accept=".pdf, .png"
    recordId="{!v.myRecordId}"
    onuploadfinished="{!c.handleUploadFinished}" />

You can refer to this blog post where I have used it upload file to drive. But instead of that you can write your own logic there.