259 lines
9.3 KiB
HTML
259 lines
9.3 KiB
HTML
<template>
|
|
|
|
<!-- The lightning-card component is a container for a single item in a list or related group of items -->
|
|
|
|
<lightning-card title="File Upload LWC" icon-name="custom:custom14">
|
|
|
|
|
|
<!-- The custom profile photo shower -->
|
|
|
|
<lightning-card>
|
|
|
|
<div class="image-container">
|
|
|
|
|
|
<!-- Spinner -->
|
|
<template if:true={spinner}>
|
|
<div class="slds-spinner_container">
|
|
<div role="status" class="slds-spinner slds-spinner_medium">
|
|
<span class="slds-assistive-text">Loading</span>
|
|
<div class="slds-spinner__dot-a"></div>
|
|
<div class="slds-spinner__dot-b"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<template if:true={imageUrl}>
|
|
|
|
<img class="image" src={imageUrl} />
|
|
|
|
</template>
|
|
|
|
<template if:false={imageUrl}>
|
|
|
|
<img class="image" src="https://www.lightningdesignsystem.com/assets/images/avatar2.jpg" alt="No" />
|
|
|
|
</template>
|
|
<div class="overlay-icon-1" >
|
|
<template if:true={imageUrl}>
|
|
<lightning-icon icon-name="utility:delete"
|
|
alternative-text="Description of icon when needed"
|
|
size="xx-small" style="cursor: pointer;"
|
|
onclick={deletePhoto}></lightning-icon>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</div>
|
|
<div class="overlay-icon" >
|
|
|
|
<lightning-icon icon-name="utility:photo"
|
|
alternative-text="Description of icon when needed"
|
|
size="x-small" style="cursor: pointer;">
|
|
</lightning-icon>
|
|
|
|
<!-- Drop down List -->
|
|
<div class="dropdown-content" style="z-index: 1;">
|
|
|
|
<p onclick={uploadPhoto}>Upload Photo</p>
|
|
|
|
<p onclick={showPhoto}>Show Photo</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<p>Profile Photo
|
|
|
|
|
|
</p>
|
|
|
|
</lightning-card>
|
|
|
|
|
|
<!-- Upload Photo Promt starts-->
|
|
|
|
|
|
<!-- This template tag with if:true directive renders the contained markup if the uploadPhotoPrompt property is truthy -->
|
|
|
|
<template if:true={uploadPhotoPrompt}>
|
|
|
|
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
|
|
|
|
<div class="slds-modal__container">
|
|
|
|
<!-- close icon button -->
|
|
<lightning-button-icon
|
|
icon-name="utility:close"
|
|
variant="bare"
|
|
alternative-text="Delete"
|
|
class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
|
|
title="Delete"
|
|
onclick={hidePrompt}>
|
|
</lightning-button-icon>
|
|
|
|
|
|
<div class="slds-modal__header">
|
|
|
|
<!-- The h1 tag defines the title of the modal dialog -->
|
|
|
|
<h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Upload Photo</h1>
|
|
|
|
</div>
|
|
|
|
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
|
|
|
|
<div class="slds-modal__content slds-p-around_medium" id="prompt-message-wrapper">
|
|
|
|
<div class="slds-m-around_medium">
|
|
|
|
|
|
|
|
<!-- The lightning-input component represents an input element of type file for uploading photos -->
|
|
|
|
<lightning-input type="file" accept=".JPEG,.JPG" label="Photo/File" onchange={UploadFilechange}></lightning-input>
|
|
|
|
</div>
|
|
|
|
<!-- This template tag with if:true directive renders the contained markup if the fileData property is truthy -->
|
|
|
|
<template if:true={fileData}>
|
|
|
|
<!-- This p tag displays the filename of the uploaded file -->
|
|
|
|
{fileData.filename}
|
|
|
|
<span onclick={removeReceiptImage} class="removeImage">X</span>
|
|
|
|
</template>
|
|
|
|
<!-- <div class="image-preview-container" >
|
|
<div class="preview">
|
|
<img id="preview-selected-image"/>
|
|
<a href={fileUrl} target="_blank">{fileName}</a>
|
|
</div>
|
|
</div> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- The div with class slds-modal__footer contains the footer of the modal dialog, including the Cancel and Submit buttons -->
|
|
|
|
<div class="slds-modal__footer">
|
|
|
|
<!-- These buttons are used to cancel and submit the form, respectively -->
|
|
|
|
<button class="slds-button slds-button_neutral" onclick={hidePrompt}>Cancel</button>
|
|
|
|
<button class="slds-button slds-button_neutral" onclick={handleClick}>Submit</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</template>
|
|
|
|
<!-- Upload Photo Promt ends-->
|
|
|
|
|
|
<!-- Show Photo Promt starts-->
|
|
|
|
<!-- This template tag with if:true directive renders the contained markup if the showPhotoPrompt property is truthy -->
|
|
|
|
<template if:true={showPhotoPrompt}>
|
|
|
|
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
|
|
|
|
<div class="slds-modal__container">
|
|
|
|
<!-- close icon button -->
|
|
|
|
<lightning-button-icon icon-name="utility:close"
|
|
variant="bare" alternative-text="Delete"
|
|
class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
|
|
title="Delete" onclick={hidePrompt} >
|
|
</lightning-button-icon>
|
|
|
|
<div class="slds-modal__header">
|
|
|
|
<!-- The h1 tag defines the title of the modal dialog -->
|
|
|
|
<h1 class="slds-modal__title slds-hyphenate">View Photo</h1>
|
|
|
|
</div>
|
|
|
|
<div class="slds-modal__content slds-p-around_medium">
|
|
|
|
<div class="slds-modal__content slds-p-around_medium">
|
|
<div class="card-image">
|
|
<img src={imageUrl} alt="view Image" >
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</template>
|
|
|
|
<!-- show Photo Promt ends-->
|
|
|
|
<!-- delete Photo Promt Starts-->
|
|
|
|
<!-- This template tag with if:true directive renders the contained markup if the showPhotoPrompt property is truthy -->
|
|
|
|
<template if:true={deletePhotoPrompt}>
|
|
|
|
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
|
|
|
|
<div class="slds-modal__container">
|
|
|
|
<!-- close icon button -->
|
|
|
|
<lightning-button-icon
|
|
icon-name="utility:close"
|
|
variant="bare"
|
|
alternative-text="Close"
|
|
class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
|
|
title="Close"
|
|
onclick={hidePrompt}>
|
|
</lightning-button-icon>
|
|
|
|
|
|
<div class="slds-modal__header">
|
|
|
|
<!-- The h1 tag defines the title of the modal dialog -->
|
|
|
|
<h1 class="slds-modal__title slds-hyphenate">Delete Photo</h1>
|
|
|
|
</div>
|
|
|
|
<div class="slds-modal__content slds-p-around_medium">
|
|
<p style="text-align: center;">Are You Sure? Do You Want Delete This Record?</p>
|
|
<div style="display: flex; justify-content: center; margin-top: 20px;">
|
|
<button class="slds-button slds-button_neutral" onclick={hidePrompt}>Cancel</button>
|
|
<button class="slds-button slds-button_neutral" onclick={handleDelete}>Delete</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</template>
|
|
|
|
|
|
</lightning-card>
|
|
|
|
</template> |