Lightning Web Component lightning-file-upload and edit file content
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.
to use lightning-file-upload you must have recordId of the record that the uploaded file is associated with, lightning-file-upload component will appear to disable in the absence of recordId.
Below code will upload the images and displays them with onclick functionality which will enable you to edit the title and description of uploaded files with delete functionality.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <lightning-card> | |
| <div class="slds-grid slds-wrap"> | |
| <lightning-file-upload label="Upload Image" name="fileUpload" accept={acceptedFilesFormat} | |
| record-id={recordId} multiple onuploadfinished={handleFileUpload}></lightning-file-upload> | |
| <template if:false={isPreview}> | |
| <template if:true={files}> | |
| <div class="slds-col slds-size_12-of-12"> | |
| <template if:true={files}> | |
| <template for:each={files} for:item="fUrl"> | |
| <div style="margin: 5px; border: 2px solid #ccc; float: left;width: 180px;" key={fUrl.Id}> | |
| <img src={fUrl.src} title={fUrl.name} onclick={handleFilePreview} data-id={fUrl.Id} width="600" height="400"> | |
| <div style="padding: 15px;text-align: center;">{fUrl.Description}</div> | |
| </div> | |
| </template> | |
| </template> | |
| </div> | |
| </template> | |
| </template> | |
| <div class="slds-col slds-size_12-of-12"> | |
| <template if:true={isPreview}> | |
| <lightning-record-edit-form record-id={currentRecId} object-api-name="ContentDocument" | |
| onsubmit={handleSubmit} onsuccess={handleSuccess}> | |
| <lightning-input-field field-name="Title"></lightning-input-field> | |
| <lightning-input-field field-name="Description"></lightning-input-field> | |
| <div style="text-align:center"> | |
| <lightning-button class="slds-m-top_small" variant="brand" type="submit" name="update" | |
| label="Update"></lightning-button> | |
| <lightning-button label="Delete" name="delete" onclick={handleDelete} variant="brand"></lightning-button> | |
| </div> | |
| </lightning-record-edit-form> | |
| </template> | |
| </div> | |
| </div> | |
| </lightning-card> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { LightningElement, track, api} from 'lwc'; | |
| import { deleteRecord } from 'lightning/uiRecordApi'; | |
| import { ShowToastEvent } from 'lightning/platformShowToastEvent'; | |
| const url = '/sfc/servlet.shepherd/document/download/'; | |
| export default class LwcFilePreview extends LightningElement { | |
| @track files = []; | |
| @track isPreview; | |
| @track currentRecId; | |
| @api recordId; | |
| get acceptedFilesFormat() { | |
| return ['.jpg', '.jpeg', '.png']; | |
| } | |
| handleFileUpload(event) { | |
| let uploadedFiles = event.detail.files; | |
| for (let index = 0; index < uploadedFiles.length; index++) { //for(let index in uploadedFiles) { | |
| if ({}.hasOwnProperty.call(uploadedFiles, index)) { | |
| this.files = [...this.files, { | |
| Id: uploadedFiles[index].documentId, | |
| name: uploadedFiles[index].name, | |
| src: url + uploadedFiles[index].documentId, | |
| description: '' | |
| }]; | |
| } | |
| } | |
| console.log(" ==== ", JSON.stringify(this.files)); | |
| this.dispatchEvent( | |
| new ShowToastEvent({ | |
| title: 'Succesful Uploads', | |
| message: this.filesName + ' Files uploaded Successfully!', | |
| variant: 'Success', | |
| }), | |
| ); | |
| } | |
| handleFilePreview(event) { | |
| let previewId = event.target.getAttribute('data-id'); | |
| this.currentRecId = previewId; | |
| this.isPreview = true; | |
| } | |
| handleDelete(event) { | |
| deleteRecord(this.currentRecId) | |
| .then(() => { | |
| for (let i = 0; i < this.files.length; i++) { | |
| if (this.files[i].Id === this.currentRecId) { | |
| this.files.splice(i, 1); | |
| } | |
| } | |
| this.dispatchEvent( | |
| new ShowToastEvent({ | |
| title: 'Success', | |
| message: 'Record deleted', | |
| variant: 'success' | |
| }) | |
| ); | |
| this.isPreview = false; | |
| }).catch(error => { | |
| this.dispatchEvent( | |
| new ShowToastEvent({ | |
| title: 'Error deleting record', | |
| message: error.body.message, | |
| variant: 'error' | |
| }) | |
| ); | |
| }); | |
| } | |
| handleSubmit(event) { | |
| event.preventDefault(); | |
| this.template.querySelector('lightning-record-edit-form').submit(event.detail.fields); | |
| this.isPreview = false; | |
| this.dispatchEvent(new ShowToastEvent({ | |
| title: 'Success!', | |
| message: ' file content updated.', | |
| variant: 'success' | |
| }), ); | |
| } | |
| handleSuccess(event) { | |
| var description = event.detail.fields.Description; | |
| for (let i = 0; i < this.files.length; i++) { | |
| if (this.files[i].Id === this.currentRecId) { | |
| this.files[i].Description = description.value; | |
| } | |
| } | |
| } | |
| } |
Points to remember:
1. Not supported in Lightning Out or standalone apps, and displays as a disabled input.
2. The file uploader cannot be used to upload files with the following file extensions: .htm, .html, .htt, .htx, .mhtm, .mhtml, .shtm, .shtml, .acgi, .svg.
3. lwc file-upload multiple don't work in android, In android you cannot upload multiple files, pls refer this link
Reference: lwc deveoper guide, W3School, Salesforce Ideas
