上傳檔案

Import 相依¶

import { UofxFileModule, UofxFilePluginService } from "@uofx/web-components/file";

欄位 module providers¶

請於欄位的 module.ts 檔案中（例如：advanced-field.module.ts）的 providers 區段加入：

imports: [UofxFileModule],
providers: [UofxFilePluginService]

使用方式¶

使用上傳元件必須要提供 module 與 pluginCode。

pluginCode 可從 manifest 檔案中取得，以下範例為放在 environment 檔案中的使用方式：

environment.ts

export const environment = {
  production: false,
  manifest: require('/src/plugin.manifest.json'),
};

page.ts

import { environment as env } from '@env/environment';

pluginCode = env.manifest.code;

page.html

<uofx-file-upload [module]="'Plugin'" [pluginCode]="pluginCode"> </uofx-file-upload>

檔案變更事件¶

透過綁定 ngModel 可取得完整的 file group，而 fileChanged 可取得。

page.ts

import { environment as env } from '@env/environment';
import { UofxFileGroupModel } from '@uofx/web-components/file';
import { UofxFileModel } from '@uofx/web-components/file-helper';

@Components({ ... })
export class Page {
  pluginCode = env.manifest.code;
  fileGroup: UofxFileGroupModel;

  ngModelChange() {
    console.log('fileGroup', this.fileGroup); // 輸出變更後的 file group
  }
}

page.html

<uofx-file-upload 
  [(ngModel)]="fileGroup"
  [module]="'Plugin'" 
  [pluginCode]="pluginCode" 
  (fileChanged)="onFileChanged($event)"
> </uofx-file-upload>

提交檔案¶

儲存前需要進行提交，將暫存區的檔案存放至正式區。

page.ts

import { UofxFileGroupModel, UofxFilePluginService } from '@uofx/web-components/file';

@Components({ ... })
export class Page {
  private filePluginService = inject(UofxFilePluginService);
  fileGroup: UofxFileGroupModel;

  onSaveClick() {
    this.filePluginService.submitFile(this.fileGroup).
      .subscribe(console.log);
  }
}

API 參考¶

可用參數¶

參數名稱	說明
`module`	上傳的模組，固定填寫 `Plugin`
`pluginCode`	整合包代號號
`disabled`	是否禁用，預設為 `false`
`allowMultiple`	是否允許多筆檔案，預設為 `true`
`allowExtensions`	允許上傳的檔案類型，範例：`['.doc', '.xlsx']`
`showAllowExtensionsTip`	是否顯示允許的檔案類型提示，預設為 `true`
`allowDownloadFile`	是否允許下載原始檔，預設為 `true`
`allowDuplicateName`	是否允許重複檔名，預設為 `true`
`recordFileAction`	是否紀錄檔案操作，如檢視或下載..等，預設為 `false

可用方法¶

hasFileUploading: 是否有檔案正在上傳。
hasFileError: 是否有檔案有錯誤。
hasFileUploadingOrError: 是否有檔案正在上傳中或有錯誤。

Outputs¶

fileChanged: 接收變更後的檔案清單，包含已存在與剛上傳的檔案。回傳類型為 Array<UofxFileModel>。