1

I'm trying to read a file in an async way on aura helper, but recursion is not happening, is just executed once. The code is pretty simple and tried a lot of approaches but no one work.

I try with the return keyword on the onload function, also with the keyword self but looks like aura does not find the function this.uploadPromise to be invoked again.

Controller

handleFilesChange:function (component, event, helper) {
    var fileSize = component.get("v.FileList")[0].size;
    var file = component.get("v.FileList")[0];

    helper.uploadPromise(0, fileSize, file).then(function (result) {
        console.log('done!!!'+result);
    },function (error) {
        console.log(error);
    }).catch(function (error) {
        $A.reportError("error message here", error);
    });
}

Helper

 uploadPromise: function (startposi, endposi, file) {
    console.log('coming into  recursive function : startposition:' + startposi + ',endpposition' + file.size + '.file:' + file);
    var BYTES_PER_CHUNK = 320 * 1024;
    return new Promise(function (resolve, reject) {
        if (startposi < endposi) {
            console.log('Reading from:' + startposi + ',until;' + (startposi + BYTES_PER_CHUNK ) + '/' + endposi);
            var chunk = file.slice(startposi, BYTES_PER_CHUNK);
            var reader = new FileReader();
            reader.readAsArrayBuffer(chunk);
            reader.onload = function (e) { // return handler function for 'onload' event
                startposi+= e.target.result.byteLength;
                console.log('before recursion: startposition:' + startposi + ',endpposition' + file.size + '.file:' + file + ",chunk size:" + e.target.result.byteLength);
                this.uploadPromise(startposi, file.size, file);
            }
        } else {
            console.log('finished reading file'); // it shows the content of the file
            return new Promise(function (resolve, reject) {
                resolve("finish");
            })
        }
    });
}

Component

<!-- language-all: lang-html -->
<aura:component description="FileUploadPromises" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global">
    <aura:attribute name="uploadUrl" type="string" default=""/>
    <aura:attribute name="FileList" type="Object"/>
    <ui:inputText label="Enter URL" class="field" value="{!v.uploadUrl}"/>
    <lightning:input aura:id="file-input" type="file" files="{!v.FileList}" label="Files promises"
                     name="file" multiple="false" onchange="{! c.handleFilesChange }"/>
</aura:component>

I expected the recursion to be executed as a normal recursion call but just is invoked once. I already tested this approach with a pure javascript approach and works fine, the issue is when is migrated to aura in salesforce.

0

You are trying to call helper from the helper. The trick to do this is to pass the helper instance from the Controller:

Controller:

handleFilesChange:function (component, event, helper) {
    var fileSize = component.get("v.FileList")[0].size;
    var file = component.get("v.FileList")[0];

    helper.uploadPromise(0, fileSize, file, helper).then(function (result) {
        console.log('done!!!'+result);
    },function (error) {
        console.log(error);
    }).catch(function (error) {
        $A.reportError("error message here", error);
    });
}

Helper:

uploadPromise: function (startposi, endposi, file , helper) {
    console.log('coming into  recursive function : startposition:' + startposi + ',endpposition' + file.size + '.file:' + file);
    var BYTES_PER_CHUNK = 320 * 1024;
    return new Promise(function (resolve, reject) {
        if (startposi < endposi) {
            console.log('Reading from:' + startposi + ',until;' + (startposi + BYTES_PER_CHUNK ) + '/' + endposi);
            var chunk = file.slice(startposi, BYTES_PER_CHUNK);
            var reader = new FileReader();
            reader.readAsArrayBuffer(chunk);
            reader.onload = function (e) { // return handler function for 'onload' event
                startposi+= e.target.result.byteLength;
                console.log('before recursion: startposition:' + startposi + ',endpposition' + file.size + '.file:' + file + ",chunk size:" + e.target.result.byteLength);
                helper.uploadPromise(startposi, file.size, file,helper);
            }
        } else {
            console.log('finished reading file'); // it shows the content of the file
            return new Promise(function (resolve, reject) {
                resolve("finish");
            })
        }
    });
}
  • Thanks for answering Pranay, just tried the approach you suggest but only get executed twice. – Omar Polania Aug 23 at 15:24
  • My bad, I forgot to send helper from 'uploadPromise'. Updated code with fix. – Pranay Jaiswal Aug 23 at 15:26
  • Thanks Pranay, now the recursion works pretty well. Now i have an issue reading the file because its triggering the recursion before reading the file so the recursion goes to an endless loop. Do you have any suggestion? – Omar Polania Aug 23 at 15:44

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.