Restrict file uploads on a custom dashboard

Hi all,

I am following Warrens great explanation of file uploads - Best way of dealing with file uploads in Bellissima UI? - Umbraco community forum

However I have hit a road block with limiting the allowed file extensions. I have tried [“csv”] and [“.csv”] but it never applies to the file selection modal.

@customElement('ds-manager')
export class DataSetsManagementDashboardElement extends UmbLitElement {

  private _fileExtensions = [".csv"];

  #onUploadChange(event: Event) {
    // Fires when upload has been saved as temp file
    // And also if the file is cleared
    const uploaderEl = event.target as UmbInputUploadFieldElement;

    const uploadValue = uploaderEl.value;
    const tempFile = uploaderEl.temporaryFile;

    console.log('[CHANGE] Upload .value:', uploadValue);
    console.log('[CHANGE] Upload .temporaryFile:', tempFile);

    // Call C# API to Persist & Save file and store entry in DB
  }

  override render() {
    return html`
    <uui-box>
      <h3>Datasets Manager</h3>
      <p>This dashboard is for managing the data that powers the Business Wizard.</p>
    </uui-box>
    <uui-box>
    
    <umb-debug visible></umb-debug>
      <umb-input-upload-field 
        .allowedFileExtensions=${this._fileExtensions} 
        id="uploader" 
        @change=${this.#onUploadChange}>
      </umb-input-upload-field>
    </uui-box>
    `;
  }

  static override readonly styles = [
    css`
      :host {
        display: block;
        padding: 24px;
      }
    `,
  ];
}

It appears this might be a regression? As in Storybook v14 is working but v15 and 16 versions does not.

set allowedFileExtensions to [“.csv”] and only 14 will limit the file picker

14 - Components / Inputs / Upload Field - Docs ⋅ Storybook

15 - Components / Inputs / Upload Field - Docs ⋅ Storybook

16 - Components / Inputs / Upload Field - Docs ⋅ Storybook

2 Likes

Added a comment to this issue as it looks related - Upload Field validation not working properly when choosing wrong file type. · Issue #19482 · umbraco/Umbraco-CMS

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.