How to add files into Document Object and access in LWC Salesforce.

Before going to use Document Object you must know what is Document Object and what are some use cases of Document object.

Document object is a standard object available in Salesforce which used to store multiple types of fields. This Object help users to add and organise files in simple way , where user can create different folders to store various types of files.

In Document Object if you want to share any folder with specific user then you can also manage access of that folder. In this tutorial we will create a folder for Images into Document and we will use those images into our Lightning Component.

Now let’s see how to add files into your Document Object , If you are using Salesforce lightning then switch to Salesforce classic and add create tab for Document object. Then create a new folder for images and upload your images to your folder.

Watch the following video more detail explanation

Use files from document object in lighting web component.

Now to access files from your folder into Lightning Web Component you have to create a APEX class with method which will return list of available files from your folder .

public with sharing class GetDocuments {
    @AuraEnabled(cacheable=true)
    public static List<Document> getImages()
    {
        List<Document> lstImages = new List<Document>();
        for(Document images : [SELECT Id, body FROM Document WHERE Folder.Name = 'Images'])
        {
            lstImages.add(images);
        }
        return lstImages;
    }
}

The method getImages will give you all files from Images folder , now import that getImages method in your JavaScript file .

import { LightningElement,wire,track } from 'lwc';
import getImages from "@salesforce/apex/GetDocuments.getImages";

export default class UseDocumentObject extends LightningElement {
    @track allRecordsFromDocutemtObject = [];
    sfdcBaseURL
    @track imagesArray= [];
    @wire(getImages)
    documentRecords({ data, error })
    {
        this.sfdcBaseURL = window.location.origin;
        if(data)
        {
            this.allRecordsFromDocutemtObject = data;
            let documentRecords = this.allRecordsFromDocutemtObject;
            documentRecords.forEach(element => {
                    this.imagesArray.push({ url: this.sfdcBaseURL+'/servlet/servlet.FileDownload?file='+ element.Id})
            });
        }
        else if (error){
            console.log('error in getting images===>' +JSON.stringify(error));
        }
    }
}

As you can see I have getImages as wired method which will give me array with URL of images available in my images folder . Now you can imagesArray to access URL’s of your images . In the HTML file we have img tag where source will be the url from imagesArray array .

<template>
    <template for:each={imagesArray} for:item="record">
            <div key={hey} style="width:20rem">
                <div class="slds-file slds-file_card">
                    <figure>
                        <a href="#" class="slds-file__crop">
                            <span class="slds-assistive-text">Preview:</span>
                                <img src={record.url} alt="Description of the image" />
                        </a>
                    </figure>
                </div>
            </div>
    </template>
</template>

Hope you find this tutorial helpful , If you find any issue then feel free to post in comment section , we will help you ASAP.