上傳檔案

Web 上傳檔案元件提供完整的檔案管理功能，支援多檔案上傳、下載、預覽等操作。

Import 相依

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

欄位 module providers

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

imports: [UofxFileModule],
providers: [UofxFilePluginService]

外掛頁面、外掛面板範例

1.提供 module 與 pluginCode

pluginCode 可從 manifest 檔案中取得。

以下範例為將 manifest 引入至 environment 檔案的使用方式：

environment.ts

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

2.檔案變更事件，透過綁定 ngModel 可取得完整的 UofxFileGroupModel。

3.在儲存前，請務必進行「提交」動作，此步驟會將檔案由暫存區搬移至正式區。

page.html

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

page.ts

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

@Components({ ... })
export class Page implements OnInit {

  pluginCode = env.manifest.code;

  fileGroup: UofxFileGroupModel;

  // 從您的api取得資料
  yourData: {
    attachments: UofxFileGroupModel;
  }

  constructor(private filePluginService: UofxFilePluginService) {
    super();
  }

  ngOnInit() {
    // 從您的api取得檔案資料
    this.fileGroup = this.yourData.attachments;
  }

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

  onSaveClick() {
    this.filePluginService.submitFile(this.fileGroup).subscribe({
        next: () => {
          UofxConsole.log('已提交');
        }
      });
  }
}

外掛欄位範例

請於欄位的 props 檔案中（例如：advanced-field.props.component.ts）的 initPluginSettings 加入(請參考設定欄位屬性)

fileJsonPath: ['attachments'],

advanced-field.write.component.html

<div>
  <uofx-form-field-name [name]="name" [required]="required">
  </uofx-form-field-name>
</div>
<div class="fw-control">
  <form [formGroup]="form">
    <uofx-file-upload
      formControlName="attachments"
      [module]="'Plugin'" 
      [pluginCode]="pluginCode">
    </uofx-file-upload>
  </form>
</div>

advanced-field.write.component.ts

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

@Components({ ... })
export class AdvancedFieldWriteComponent extends BpmFwWriteComponent implements OnInit {
  pluginCode = env.manifest.code;

  form: FormGroup;

  constructor(
    private fb: FormBuilder,
    private filePluginService: UofxFilePluginService) {
    super();
  }

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.form = this.fb.group({
      'attachments': null
    });

    setTimeout(() => {
      this.form.controls.attachments.setValue(this.value.attachments);
    });
  }

  checkBeforeSubmit(checkValidator: boolean): Promise<boolean> {
    this.filePluginService.submitFile(this.fileGroup).subscribe({
        next: () => {
          UofxConsole.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>。