Upload Custom File in Lightning Web Component(LWC)

public class CustomFileUploadLWCCtrl {

    @AuraEnabled
    public static String uploadFile(String fileName, String base64Data, Id recordId) {
        // Decoding the base64Data
        base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');
        ContentVersion cv = new ContentVersion();
        cv.Title = fileName;
        cv.PathOnClient = '/' + fileName;
        cv.FirstPublishLocationId = recordId;
        cv.VersionData = EncodingUtil.base64Decode(base64Data);
        cv.IsMajorVersion = true;
        Insert cv;
        return 'File upload successfully!';
    }
}

<template>
	  <!-- loader -->
    <div if:true={showSpinner}>
        <lightning-spinner
            alternative-text="Loading..." variant="brand" class="slds-is-fixed">
        </lightning-spinner>
    </div>
    <!-----/loader------>
    <!----header -->
    <div class="slds-tabs_card">
		<div class="slds-page-header">
			<div class="slds-page-header__row">
				<div class="slds-page-header__col-title">
					<div class="slds-media">
						<div class="slds-media__figure">
							<span class="slds-icon_container slds-icon-standard-opportunity">
								 <lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
                            </span>
						</div>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
									<h1>
										<span>Box API Call From Apex</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
									</h1>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div> <br/>
    <!----/header -->
    <!-- Upload files card -->
    <lightning-card  variant="Narrow"  title="Upload Files" icon-name="standard:file">
        <div class="slds-var-p-around_small">
            <lightning-layout multiple-rows>
				<lightning-layout-item padding="around-small" size="12" medium-device-size="12" large-device-size="12">
                    <lightning-input label="File" name="file uploader" 
                                     onchange={handleFileChange} type="file"
                                     accept=".jpg, .csv, .png, .doc, .pdf">
                    </lightning-input>
					<p if:true={fileName}>{fileName}</p>
				</lightning-layout-item>

                <lightning-layout-item size="12" class="slds-var-p-top_small">
					<lightning-button class="slds-align_absolute-center" variant="brand" label="Upload Files"
						onclick={uploadFile}>
                    </lightning-button>
				</lightning-layout-item>
            </lightning-layout>
        </div>
    </lightning-card>
    <!-- /Upload files card -->
</template>

import { LightningElement, track, api } from 'lwc';
import uploadFile from '@salesforce/apex/CustomFileUploadLWCCtrl.uploadFile';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class CustomFileUploadLWC extends LightningElement {
    @track showSpinner = false;
    @track fileData;
    @api recordId;
    @track fileName;
     // getting file 
    handleFileChange(event) {
        if(event.target.files.length > 0) {
            const file = event.target.files[0]
            var reader = new FileReader()
            reader.onload = () => {
                var base64 = reader.result.split(',')[1]
                this.fileName = file.name;
                this.fileData = {
                    'filename': file.name,
                    'base64': base64
                }
                console.log(this.fileData)
            }
            reader.readAsDataURL(file)
        }
    }

    uploadFile() {
        this.handleSpinner();
        const {base64, filename} = this.fileData

        uploadFile({ fileName:this.fileName, base64Data : base64, recordId:this.recordId }).then(result=>{
            this.fileData = null
            let title = `${filename} uploaded successfully!!`;
            this.ShowToast('Success!', title, 'success', 'dismissable');
            this.updateRecordView(this.recordId);
        }).catch(err=>{
            this.ShowToast('Error!!', err.body.message, 'error', 'dismissable');
        }).finally(() => {
            this.handleSpinner();
        })
    }

    handleSpinner(){
        this.showSpinner = !this.showSpinner;
    }

    ShowToast(title, message, variant, mode){
        const evt = new ShowToastEvent({
            title: title,
            message:message,
            variant: variant,
            mode: mode
        });
        this.dispatchEvent(evt);
    } 

    //update the record page
    updateRecordView() {
       setTimeout(() => {
            eval("$A.get('e.force:refreshView').fire();");
       }, 1000); 
    }
}