LWC FileReader throwing uploadn.map is not a function

Question

I have a file upload LWC component that used to work but now it's throwing an "uploadn.map is not a function error" when I call reader.readAsDataURL(file). I imagine updates to locker service are to blame but wondering if anyone else has run into this or if there's a solution? At the end of the day I just want to upload an image

            <template if:true={showUpload}>
                <lightning-input type="file" 
                accept=".png, .gif, .jpg, .jpeg"
                label="" onchange={updateSignature} data-id="fileupload"></lightning-input>
            </template>

    updateSignature(event) {
        
        let file = event.target.files[0];
        console.log(event.target.files[0]);

        if(!file) {
            const toast = new ShowToastEvent({
                "title" : "Error",
                "message": "Please select a file",
                "variant": "error"
            });
            this.dispatchEvent(toast);
            return;
        }
        
        let reader = new FileReader();
        reader.onload = () => {
            let parts = reader.result.split(',');
            updateSignatureImage({recordId: this.recordId, base64Image: parts[1]}).then(result => {
                
                this.update = false;
                this.uploaded = true; 
                refreshApex(this.getRecord);
                getRecordNotifyChange(this.recordId);
                const toast = new ShowToastEvent({
                    "title" : "Success!",
                    "message": "Signature image updated successfully",
                    "variant": "success"
                });
                this.dispatchEvent(toast);

            }).catch(error => {

                const toast = new ShowToastEvent({
                    "title" : "Error",
                    "message": "Signature image failed to upload"+error.message,
                    "variant": "error"
                });
                this.dispatchEvent(toast);
            })
        }
        

        console.log('readingDataUrl');
        reader.readAsDataURL(file);
            
    } 

Answer 1

hope everything goes well.

I can see you're working on an image uploader in a Lightning Web Component and encountering an error. I'd recommend utilizing the standard Lightning Component lightning-file-upload (https://developer.salesforce.com/docs/component-library/bundle/lightning-file-upload/documentation) for your image upload needs, as it simplifies the process considerably, and as you're said it's just an IMGs uploader.

Here's an example of how you can achieve this:

In your template file

<template>
    <lightning-card title="Image Uploader">
        <h1>Record to relate: {recordId}</h1>
        <lightning-file-upload accept={acceptedIMGFormats} label="Upload Images" multiple="multiple"
            onuploadfinished={uploadFileHandler} record-id={recordId}></lightning-file-upload>
    </lightning-card>
</template>

JavaScript file

import { LightningElement, api, track } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import controllerPostOperations from '@salesforce/apex/DummyClass.controllerPostOperations';

export default class ImgUploader extends LightningElement {
    @track error;
    @track data;

    @api recordId;

    // accepted parameters
    get acceptedIMGFormats() {
        return ['.png', '.jpg', '.jpeg'];
    }
    
    uploadFileHandler(event) {
        // Get the list of records from the uploaded files
        const uploadedFiles = event.detail.files;

        // files are already uploaded
        // here I am passing the first documentId to the apex controller
        // to make any other post operations.
        // This is optional, you can remove this part if you don't need it.
        controllerPostOperations({contentDocumentId : uploadedFiles[0].documentId})
        .then(result => {
            window.console.log('result ===> '+result);
            this.data = result;
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success!!',
                    message: 'post operation done!!!',
                    variant: 'Success',
                }),
            );
        })
        .catch(error => {
            this.error = error;
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error!!',
                    message: JSON.stringify(error),
                    variant: 'error',
                }),
            );     
        })

    }
}

Apex Controller

public with sharing class DummyClass {
    @AuraEnabled
    public static String controllerPostOperations(String contentDocumentId) {
        try {
            // Perform your post-upload operations here
            return 'Done';
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}

Hope this helps you,