File Upload in Lightning Web Component(lwc)

File Upload in Lightning Web Component(lwc)

lightning-file-upload component provides an easy and integrated way for users to upload multiple files. The file uploader includes drag-and-drop functionality and filtering by file types.

File uploads are always associated to a record, so the record-id attribute is required. Uploaded files are available in Files Home under the Owned by Me filter and on the record’s Attachments related list that’s on the record detail page. Although all file formats that are supported by Salesforce are allowed, you can restrict the file formats using the accept attribute.

lightning-file-upload component inherits styling from file selector in the Lightning Design System.

LWC file upload Example

fileUploadLWC.html

<template>
    <lightning-card title="LWC File Upload Example" icon-name="custom:custom19">
        <lightning-file-upload
            label="Attach receipt"
            name="fileUploader"
            accept={acceptedFormats}
            record-id={recordId}
            onuploadfinished={handleUploadFinished}
            multiple>
    </lightning-file-upload>
    </lightning-card>
</template>

fileUploadLWC.js

import { LightningElement, api } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class FileUploadLWC extends LightningElement {
    @api recordId;
    get acceptedFormats() {
        return ['.pdf', '.png','.jpg','.jpeg'];
    }
    handleUploadFinished(event) {
        // Get the list of uploaded files
        const uploadedFiles = event.detail.files;
        let uploadedFileNames = '';
        for(let i = 0; i < uploadedFiles.length; i++) {
            uploadedFileNames += uploadedFiles[i].name + ', ';
        }
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: uploadedFiles.length + ' Files uploaded Successfully: ' + uploadedFileNames,
                variant: 'success',
            }),
        );
    }
}

fileUploadLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this lwc component on the account detail page.

• Go to one of account detail record
• Click Setup (Gear Icon) and select Edit Page.
• Under Custom Components, find your fileUploadLWC component and drag it on Account page.
• Click Save and activate.

We will get the following output where the user will be able to upload multiple files on the account record.

Once the user will click on Done, user will see a success message.

File Upload Limits

By default, you can upload up to 10 files simultaneously unless your Salesforce admin has changed that limit. The org limit for the number of files simultaneously uploaded is a maximum of 25 files and a minimum of 1 file. The maximum file size you can upload is 2 GB. In Communities, the file size limits and types allowed follow the settings determined by community file moderation. By default, guest users can’t upload files. You can enable the org preference. Allow site guest users to upload files.

Usage Considerations

This component is not supported in Lightning Out or standalone apps, and displays as a disabled input. Additionally, if the Don’t allow HTML uploads as attachments or document records security setting is enabled for your organization, the file uploader cannot be used to upload files with the following file extensions: .htm, .html, .htt, .htx, .mhtm, .mhtml, .shtm, .shtml, .acgi, .svg.

For more details please refer to official link. This example is copied from this official link with small tweaks.

Decorators in Lightning Web Component(LWC)

Decorators in Lightning Web Component(LWC)

The Lightning Web Components programming model has three decorators that add functionality to property or function. Decorators dynamically alter the functionality of a property or function. The ability to create decorators is part of ECMAScript, but these three decorators are unique to Lightning Web Components.

• @api: To expose a public property, decorate it with @api. Public properties define the API for a component. An owner component that uses the component in its markup can access the component’s public properties. Public properties are reactive. If the value of reactive property changes, the component’s template rerenders any content that references the property.
• @track: To track a private property’s value and rerender a component when it changes, decorate the property with @track. Tracked properties are also called private reactive properties.
• @wire: To read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adaptor or an Apex method.

Here are three decorators in LWC in more details

@api

Public properties are reactive. If the value of public property changes, the component rerenders. To expose a public property, decorate a field with @api. Public properties define the API for a component.

To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components.

Import @api decorator from lwc

import { LightningElement, api } from 'lwc';

@api Example

todoItem.js

// todoItem.js
import { LightningElement, api } from 'lwc';
export default class TodoItem extends LightningElement {
    @api itemName = 'New Item';
}

todoItem.html

<!-- todoItem.html -->
<template>
    <div class="view">
        <label>{itemName}</label>
    </div>

todoApp.html

<!-- todoApp.html -->
<template>
    <div class="listing">
        <c-todo-item item-name="Milk"></c-todo-item>
        <c-todo-item item-name="Bread"></c-todo-item>
    </div>
</template>

@track

Fields are reactive. If a field’s value changes, and the field is used in a template or in a getter of a property that’s used in a template, the component rerenders and displays the new value.

There is one use case for @track. When a field contains an object or an array, there’s a limit to the depth of changes that are tracked. To tell the framework to observe changes to the properties of an object or to the elements of an array, decorate the field with @track
Import @api decorator from lwc

@track example

helloWorld.html

<template>
    <lightning-card title="HelloWorld" icon-name="custom:custom14">
      <div class="slds-m-around_medium">
        <p>Hello, {greeting}!</p>
        <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
      </div>
    </lightning-card>
</template>

helloWorld.js

import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {
  greeting = 'World';
  changeHandler(event) {
    this.greeting = event.target.value;
  }
}

helloWorld.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

@wire

To read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adapter or an Apex method.

We need to import the @salesforce/apex scoped module into JavaScript controller class.

import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference';

Here is list of important point of importing apex method:

• apexMethodName : An imported symbol that identifies the Apex method.
• apexMethodReference : The name of the Apex method to import.
• Classname : The name of the Apex class.
• Namespace—The namespace of the Salesforce organization. Specify a namespace unless the organization uses the default namespace (c), in which case don’t specify it.

Call Apex Methods In Lightning web components Example

Apex class AccountHelper

 
public with sharing class AccountHelper {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccountList() {
        return [SELECT Id, Name, Type, Rating, Phone 
            FROM Account];
    }
}

We can call the apex class in  Lightning web component using these different ways:

• Wire a property
• Wire a function
• Call a method imperatively

Wire a property in lightning Web Component

We can invoke apex method from a component via the wire service. We can @wire a property or a function. Here is the syntax

 
import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod';
@wire(apexMethod, { apexMethodParams })
propertyOrFunction;

Lets see example of Wire an Apex Method to a Property

accountListLWC.js

 
import { LightningElement, wire } from 'lwc';
import getAccountList from '@salesforce/apex/AccountHelper.getAccountList';
 
export default class AccountListLWC extends LightningElement {
    @wire(getAccountList) accounts;
}

accountListLWC.html

 
<template>
    <lightning-card title="Account List From Apex" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <template if:true={accounts.data}>
                <template for:each={accounts.data} for:item="acc">
                    <p key={acc.Id}>{acc.Name}</p>
                </template>
            </template>
            <template if:true={accounts.error}>
                {accounts.error}
            </template>
        </div>
        </lightning-card>
</template>

accountListLWC.js-meta.xml

 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this lwc component on account detail page.

• Go to Home page
• Click Setup (Gear Icon) and select Edit Page.
• Under Custom Components, find your accountListLWC component and drag it on right hand side top.
• Click Save and activate.

We will have following output.

For more details about wire refer to Call Apex Method in LWC

For more details about decorators, please refer to official link.

Use Lightning Web Components in Visualforce

Use Lightning Web Components in Visualforce

In this post, we will see how we can use LWC in Visualforce Pages or how to display Lightning Web Component In Visualforce Page. Even though the use of lightning is growing day by day, still some customers are using salesforce classic because of many reasons. Sometimes there is a requirement to use lightning web component in visualforce page.

Lightning Web Components for Visualforce is based on Lightning Out, a powerful and flexible feature that lets you embed Lightning web components into almost any web page. When used with Visualforce, some of the details become simpler. For example, you don’t need to deal with authentication, and you don’t need to configure a Connected App. If you are looking for using lightning aura components in visualforce pages, please refer to Use Lightning Components in Visualforce Pages.

In this example, we will see a very basic example of the lightning web component and then display lightning web component in the visualforce page.

helloComponentForVFLWC.html

<template>
    <lightning-card title="Use LWC in Visualforce" icon-name="custom:custom19">
        <div class="slds-m-around_medium">
            Hello, This is LWC for visualforce page
        </div>
    </lightning-card>
</template>

helloComponentForVFLWC.js

import { LightningElement } from 'lwc';
export default class HelloComponentForVFLWC extends LightningElement {}

HelloLWCExampleApp.app

Here important point is that ltng:outApp needs to be extended in app.

ltng:outApp adds SLDS resources to the page to allow our Lightning components to be styled with the Salesforce Lightning Design System. If we don’t want SLDS resources added to the page, we need to extend from ltng:outAppUnstyled instead.

<aura:application extends="ltng:outApp" access="GLOBAL">
    <aura:dependency resource="helloComponentForVFLWC" />
</aura:application>

HelloLWCExampleVF.page

<apex:page showHeader="false" sidebar="false">
    <apex:includeLightning />    
    <div id="LightningComponentid" />    
    <script>
    $Lightning.use("c:HelloLWCExampleApp", function() {
        $Lightning.createComponent("c:helloComponentForVFLWC",
          { 
          },
          "LightningComponentid",
          function(cmp) {
             console.log('LWC Componenet added in VF page');
          });
    });
    </script>
</apex:page>

In the above Visualforce page, apex:includeLightning tag imports necessary dependencies and scripts to enable Visualforce to act as Lightning component container.

We can use $Lightning.use() method in JavaScript to refer to Lightning Application which extends ltng:outApp.

We can use $Lightning.createComponent create Lightning Component dynamically.

We can call $Lightning.use() multiple times on a page, but all calls must reference the same Lightning dependency app.

We will get the following output

For more detail please refer to official link