Repository: goauthentik/authentik
File: web/src/admin/files/FileUploadForm.ts (TypeScript)

Code before:
        }
    };

    protected clearFileInput() {
        this.selectedFile = null;
        this.#formRef.value?.reset();
    }

    public override async send(data: Record<string, unknown>): Promise<void> {
        if (!this.selectedFile) {
            throw new PreventFormSubmit("Selected file not provided", this);
        }

        const api = new AdminApi(DEFAULT_CONFIG);
        const customName = typeof data.name === "string" ? data.name.trim() : "";

        // If custom name provided, validate and always append original extension
        // Only validate the original filename if no custom name is provided
        let finalName = this.selectedFile.name;
        if (customName) {
            assertValidFileName(customName);
            const ext = getFileExtension(this.selectedFile.name);
            finalName = ext ? `${customName}${ext}` : customName;
        } else {
            assertValidFileName(this.selectedFile.name);
        }

        assertValidFileName(finalName);

        await api.adminFileCreate({
            file: this.selectedFile,
            name: finalName,
            usage: this.usage,
        });

        showMessage({
            level: MessageLevel.success,
            message: msg("File uploaded successfully"),
        });

        this.reset();
        this.clearFileInput();
    }

    renderForm() {
        return html`
            <form ${ref(this.#formRef)} class="pf-c-form pf-m-horizontal">
                <ak-form-element-horizontal label=${msg("File")} required>
                    <input
                        type="file"
                        class="pf-c-form-control"

Review comment (refactor):
Since `getFileExtension` always returns a string, inccluding an empty string if there is no extension, you could re-write this entire block:

```
const finalName = customName
    ? `${customName}${getFileExtension(this.selecteFile.name)}`
    : this.selectedFile.name;

assertValidFileName(finalName);
```

... and remove the assertion that follows it, since the `else` clause only duplicates exactly what the assertion that follows does.  You want to validate that the filename _produced_ by these decisions is valid for storage.  The code and comments as they stand obscure that.

Code after:
    #fileChangeListener = (e: Event) => {
        const input = e.target as HTMLInputElement;
        if (input.files?.length) {
            this.selectedFile = input.files[0];
        } else {
            this.selectedFile = null;
        }
    };

    protected clearFileInput() {
        this.selectedFile = null;
        this.#formRef.value?.reset();
    }

    public override async send(data: Record<string, unknown>): Promise<void> {
        if (!this.selectedFile) {
            throw new PreventFormSubmit("Selected file not provided", this);
        }

        const api = new AdminApi(DEFAULT_CONFIG);
        const customName = typeof data.name === "string" ? data.name.trim() : "";

        // If custom name provided, append original file extension; otherwise use original filename
        const finalName = customName
            ? `${customName}${getFileExtension(this.selectedFile.name)}`
            : this.selectedFile.name;

        assertValidFileName(finalName);

        await api.adminFileCreate({
            file: this.selectedFile,
            name: finalName,
            usage: this.usage,
        });

        showMessage({
            level: MessageLevel.success,
            message: msg("File uploaded successfully"),
        });

        this.reset();
        this.clearFileInput();
    }

    renderForm() {
        return html`
            <form ${ref(this.#formRef)} class="pf-c-form pf-m-horizontal">
                <ak-form-element-horizontal label=${msg("File")} required>
                    <input
                        type="file"
                        class="pf-c-form-control"