(I'm new to the Lit element environment, so please forgive my rookie question)
Code Overview
Below is the code for a File Uploader web component created using Lit Element. When a file is selected, the _inputHandler function validates the file. If it's valid, it enables/triggers the upload functionality to the server side.
Inquiry
How can I apply the CSS styling of visibility:visible to the #cancel-btn when a file is selected?
(By default/upon page load) The cancel button remains hidden until a file is chosen.
Once a valid file is selected, the Cancel button should become visible (e.g., set to visibility: visible).
The complete code for Uploader.ts :
import { html, LitElement, css } from "lit";
import { customElement, property, query } from "lit/decorators.js";
import { styles } from "./Style.Uploader.js";
@customElement("file-uploader")
export class Uploader extends LitElement {
// CSS Styling
static get styles() {
return styles;
}
// Properties
@property()
fileName = `Accepted File Types : ${getValidFileTypes().toString()}`;
@property() fileType = "";
@property() fileSizeInKB: Number = 0;
private files: FileList | null = null;
// Actual HTML elements Rendered
render() {
return html`
<section>
<form action="" autocomplete="off" enctype="multipart/form-data">
<h3>Upload your File</h3>
<div class="box" id="box">
<input
type="file"
name="uploadedFile"
id="input-box"
class="input-box"
style="display: none"
@change="${this._inputHandler}"
/>
<label for="input-box" class="input-label" id="input-label">
${this.fileName}
</label>
</div>
<div class="buttons">
<button
class="upload-btn"
id="upload-btn"
@click="${this._uploadHandler}"
>
<span class="upload-btn-span" id="upload-btn-span">
⇪ Upload
</span>
<span class="uploading-span" id="uploading-span">
Uploading...
</span>
</button>
<button
class="cancel-btn"
id="cancel-btn"
@click="${this._cancelHandler}"
>
Cancel
</button>
</div>
</form>
</section>
`;
}
@query("upload-btn") uploadButton!: HTMLButtonElement;
get cancelButton() {
return this.querySelector("#cancel-btn"); // ?? null
}
// @query("cancel-btn") cancelButton!: HTMLButtonElement;
private async _inputHandler(e: Event) {
const input = e.target as HTMLInputElement;
// array of files selected to upload
this.files = input.files;
if (!(this.files && this.files[0])) {
return;
} else {
const uploadedFileSize = this.files[0]?.size;
const uploadedFileName = this.files[0]?.name;
const uploadedFileType =
FileExtensionService.getFileExtension(uploadedFileName);
// Trying to Change the visibility of the Cancel button to visible
this.cancelButton!.style.visibility = "visible";
// Validating file size and file type
const validFileSize = await validateFileSize(uploadedFileSize);
const validFileType = await validateFileType(uploadedFileType);
if (!validFileSize.isValid) {
...
}
}
}
/**
*
* @returns
*/
private _cancelHandler(e: Event) {
e.preventDefault();
this.files = null;
this.fileName = "";
this.fileType = "";
this.fileSizeInKB = 0;
this.requestUpdate();
}
}
I am attempting to modify the button's style (which I believe I can access through a getter or @query) but encountering an Error:
Property 'style' does not exist on type 'Element'.ts(2339)this.cancelButton!.**style**.visibility = "visible";