0

I have an LWC component with a lightning-input tag for uploading a file.

<lightning-layout-item size="6">
    <lightning-combobox label={label.GotPOD} placeholder={label.SelectType} 
                        options={docTypeOptions} 
                        onchange={fileTypeSelectedHandler}></lightning-combobox>
</lightning-layout-item>
<lightning-layout-item size="6">
    <lightning-input type="file" accept="image/png, image/jpg, image/gif" 
                     disabled={isFileUploadDisabled} 
                     onchange={fileSelectedHandler}></lightning-input>
</lightning-layout-item>

The JS code grabs the file no problem and uploads it to my controller:

fileTypeSelectedHandler(event) {
    this.docType = event.target.value;
}

fileSelectedHandler(event) {

    let theFile = event.target.files[0];
    let reader = new FileReader();
    let temp = this;

    // note that "this" is the FileReader
    reader.onload = function() {

        uploadFile({ loadId: temp.recordId, filename: temp.docType, contentType: theFile.type, contents: this.result })
        .then(result => {             
            LightningUtil.processMessagesAndErrors(temp, result);   
        })
        .catch(error => {
            LightningUtil.logError(temp, error);
        });    
    }

    reader.readAsBinaryString(theFile);
}

My uploadFile creates an attachment from the passed up blob:

@AuraEnabled(cacheable=false)
public static LightningResponse uploadFile(Id loadId, String filename, String contentType, Blob contents) {

    LightningResponse response = new LightningResponse();

    try {
        if(UserInfo.getUserType() == 'Standard') {

            Load l = new Load((Load__c)DB.getCompleteObject(Load__c.SObjectType, loadId));

            Attachment att = new Attachment();
            att.Name = filename + '.' + contentType.split('/')[1];
            att.Body = contents;
            att.ContentType = contentType;
            att.ParentId = loadId;
            DB.insert2(att);

However the created file is unreadable as a PNG. The file also larger than the original PNG and seems to have been subtly modified to make it unreadable.

I assume reader.readAsBinaryString(theFile) is not doing what is should.... Any ideas?

Thanks!

1 Answer 1

2

JSON can't handle binary data, so it would necessarily have to be encoded. The traditional way of doing this would be to base64 encode it. This would explain the difference in size. That said, perhaps it's best if you encode it yourself:

uploadFile({ 
  loadId: temp.recordId, 
  filename: temp.docType, 
  contentType: theFile.type, 
  // format is data:image/png;base64,BASE64ENCODEDIMAGEDATA
  contents: this.result.split(/,/)[1] }) 

...

reader.readAsDataURL(theFile)

...

public static LightningResponse uploadFile(Id loadId, String filename, String contentType, String contents) {
    Blob fileContents = EncodingUtil.base64Decode(contents);
    ...
1
  • You are the best!! Works great. Thank you.
    – Dave C
    May 19, 2020 at 21:04

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .