Activity Forums Salesforce® Discussions How to upload a pdf using lightning web component in salesforce?

  • Nikita

    Member
    November 13, 2019 at 5:15 pm

    Hi Piyush,

    A 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.

    This component inherits styling from file selector in the Lightning Design System.

    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 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.

    This example creates a file uploader that allows multiple PDF and PNG files to be uploaded. Change the record-id value to your own.

    <template>
        <lightning-file-upload
                label="Attach receipt"
                name="fileUploader"
                accept={acceptedFormats}
                record-id={myRecordId}
                onuploadfinished={handleUploadFinished}
                multiple>
        </lightning-file-upload>
    </template>

    You must handle the uploadfinished event, which is fired when the upload is finished.

    import { LightningElement, api } from 'lwc';
    export default class MyComponentName extends LightningElement {
        @api
        myRecordId;
    
        get acceptedFormats() {
            return ['.pdf', '.png'];
        }
    
        handleUploadFinished(event) {
            // Get the list of uploaded files
            const uploadedFiles = event.detail.files;
            alert("No. of files uploaded : " + uploadedFiles.length);
        }
    }

    for more details, you can refer https://developer.salesforce.com/docs/component-library/bundle/lightning-file-upload/documentation

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos