Skip to main content The Trailblazer Community will be unavailable from 2/1/2025 to 2/2/2025. Please plan your activities accordingly.
Hi,

I am developing a lightning component to upload file in contentVersion object. I am refering to this site : 

http://webcache.googleusercontent.com/search?q=cache:yDEYXecmDHMJ:peterknolle.com/file-upload-lightning-component/+&cd=1&hl=en&ct=clnk&gl=in

I was successful uploading files upto 3 MB without chunking but I am facing some issue in chunking the file to upload the large files.

Wherever i upload the file , it gives me following error :

System.StringException: Unrecognized base64 character: %

I am attaching code for helper class and apex controller.

Helper Class :

({

MAX_FILE_SIZE: 4 500 000, /* 6 000 000 * 3/4 to account for base64 */

CHUNK_SIZE: 950 000, /* Use a multiple of 4 */

readFile: function(component, helper, file) {

if (!file) return;

var reader = new FileReader();

self = this;

reader.onload = function() {

var dataURL = reader.result;

component.set("v.pictureSrc", "https://s3-us-west-1.amazonaws.com/sfdc-demo/image-placeholder.png");

self.upload(component, file, dataURL);

};

reader.readAsDataURL(file);

},

upload: function(component, file, dataURL) {

console.log('uploading file ...');

var fromPos = 0;

var toPos = Math.min(dataURL.length, fromPos + this.CHUNK_SIZE);

console.log('toPos '+toPos);

console.log(' fromPos '+fromPos);

this.uploadChunk(component, file, dataURL, fromPos, toPos,'');

},

uploadChunk : function(component, file, dataURL, fromPos, toPos,contentDocumentId){

console.log('uploading chunk ');

var action = component.get("c.saveTheChunkChatterFile");

var chunk = dataURL.substring(fromPos, toPos);

console.log(chunk);

action.setParams({

parentId: component.get("v.recordId"),

fileName: file.name,

base64Data: encodeURIComponent(chunk),

contentType: file.type,

contentDocumentId :contentDocumentId

});

var self = this;

action.setCallback(this, function(a) {

contentDocumentId = a.getReturnValue();

console.log('return value '+contentDocumentId);

fromPos = toPos;

toPos = Math.min(dataURL.length, fromPos + self.CHUNK_SIZE);

if (fromPos < toPos) {

self.uploadChunk(component, file, dataURL, fromPos, toPos, contentDocumentId);

}else{

component.set("v.message", "File Uploaded");

}

});

component.set("v.message", "Uploading...");

$A.enqueueAction(action);

}

})

Apex Controller : 

 

@AuraEnabled

public static Id saveChatterFiles(Id parentId, String fileName, String base64Data, String contentType) {

system.debug('Saving chatter files '+fileName + ' '+ contentType);

ContentVersion testContentInsert =new ContentVersion();

testContentInsert.Title =fileName;

testContentInsert.VersionData=EncodingUtil.base64Decode(base64Data);

testContentInsert.PathOnClient='/' + fileName ;

insert testContentInsert;

system.debug('testContentInsert.id '+ testContentInsert.id);

testContentInsert = [select id, ContentDocumentId from ContentVersion WHERE Id =: testContentInsert.Id];

ContentDocumentLink cl = new ContentDocumentLink();

cl.ContentDocumentId = testContentInsert.ContentDocumentId;

cl.LinkedEntityId = parentId;

cl.ShareType = 'V';

cl.Visibility = 'AllUsers';

insert cl;

system.debug('testContentInsert.id');

return testContentInsert.id;

}

@AuraEnabled

public static Id saveTheChunkChatterFile(id parentId,String fileName, String base64Data, String contentType, String contentDocumentId){

system.debug('saving chatter file');

if (contentDocumentId == '' || contentDocumentId==null ) {

system.debug('null id');

contentDocumentId = saveChatterFiles(parentId, fileName, base64Data, contentType);

} else {

system.debug('not null id');

system.debug('id '+contentDocumentId);

appendToFileChatter(contentDocumentId, base64Data);

}

return Id.valueOf(contentDocumentId);

}

@AuraEnabled

public static void appendToFileChatter(Id contentDocumentId, String base64Data) {

base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');

system.debug('appending');

ContentVersion a = [

SELECT Id, VersionData,ContentDocumentId

FROM ContentVersion

WHERE Id = :contentDocumentId

];

String existingBody = EncodingUtil.base64Encode(a.VersionData);

a.VersionData = EncodingUtil.base64Decode(existingBody + base64Data);

update a;

}

Any kind of help or alternative to upload file in contentVersion using lightning component will be greatful.

 
8 answers
  1. Jan 18, 2019, 10:48 AM
    Hi Guys,

    I am also trying to upload the large files using the CHUNKING but it was not working for the ContentVersion because by default IsMajorVersion field in the ContentVersion object is TRUE and its not updatable also. So While inserting the ContentVersion make IsMajorVersion 

     false so CHUNKING will work in the ContentVersion object.

    ContentVersion testContentInsert =new ContentVersion(); 

            testContentInsert.Start_Date__c = Date.valueOf(startDate);

            testContentInsert.End_Date__c = Date.valueOf(endDate);

            testContentInsert.Title = fileName; 

            testContentInsert.IsMajorVersion = false;

            testContentInsert.VersionData = EncodingUtil.base64Decode(base64Data);

            testContentInsert.PathOnClient='/' + fileName ;

            

            try{

                insert testContentInsert;

            }

            catch(Exception Ex){

                System.debug('Ex==>'+Ex); 

            }

            

            

            testContentInsert = [select id, ContentDocumentId from ContentVersion WHERE Id =: testContentInsert.Id];

            

            ContentDocumentLink cl = new ContentDocumentLink();

            cl.ContentDocumentId = testContentInsert.ContentDocumentId;

            cl.LinkedEntityId = parentId; 

            cl.ShareType = 'V';

            cl.Visibility = 'AllUsers';

            

            try{

                insert cl;

            }

            catch(Exception Ex){

                System.debug('Ex==>'+Ex); 

            }

            

     
  2. Sep 4, 2017, 2:15 PM
    In action.setParams(), directly pass the base64data:chunk. Don't use encodeURIComponent(chunk).
  3. Mar 22, 2021, 10:44 AM
    Anybody found solution on this?

    anyone know any better alternative approach?
  4. Apr 9, 2020, 11:09 PM
    Hi i am also facing with the same issue. Is this resolved??? The uploaded file is getting corrupted and if i upload a 4MB file after successfully uploading when i check the file size it is displaying just 900KB? Any solution is appreciated.Thanks
  5. Aug 14, 2018, 12:15 PM

    Any solution? I am getting heap size error while upload file from Apex.

    I tried from AJAX and native JS, i got error 405(method not allowed).

  6. Jan 25, 2017, 4:49 AM
    Can anyone please suggese me some solution..

     
0/9000