Cannot use file upload feature in one of our Angular component #851

2 Answer(s)

• 

  0

  Mehmet created 3 years ago

  Hi,

  @abp/uppy package is created for MVC projects. This package only uses the uppy as a dependency. Has no extra feature.

  Unfortunately, you can not use any service from the FileManagement module for now. We may add a utility service in the future to the FileManagement or CoreModule for uploading files easily.

  You can use the uppy by following its documentation.

  We have used the uppy in upload.service.ts like this:

  import { ApiInterceptor } from '@abp/ng.core';
  import { Uppy, UppyFile } from '@uppy/core';
  import Dashboard from '@uppy/dashboard';
  import XHRUpload from '@uppy/xhr-upload';
  import { HttpXsrfTokenExtractor } from '@angular/common/http';
  // ...
  
  export class UploadService {
    uppy: Uppy;
    subscriptions: Subscription[] = [];
  
    onBeforeUpload = (files: { [key: string]: UppyFile<{}, {}> }) => {
      if (this.filesAlreadyChecked) {
        return true;
      }
      // you can check the files here
      return false;
    };
  
      cancelModal = () => {
      this.uppy.cancelAll();
      const dashboard = this.uppy.getPlugin('Dashboard') as Dashboard;
      if (dashboard.isModalOpen()) {
        dashboard.closeModal();
      }
    };
  
    constructor(
      private apiInterceptor: ApiInterceptor,
      private httpXsrfToken: HttpXsrfTokenExtractor,
    ) {}
  
  initUppy({ trigger }) {
      const headers = this.apiInterceptor.getAdditionalHeaders();
      headers[this.headerName] = this.httpXsrfToken.getToken();
      this.uppy = new Uppy({
        onBeforeUpload: this.onBeforeUpload,
      })
        .use(Dashboard, {
          trigger,
          inline: false,
          target: 'body',
          metaFields: [
            {
              id: 'name',
              name: 'Name',
              placeholder: 'FileName',
            },
          ],
          browserBackButtonClose: true,
          proudlyDisplayPoweredByUppy: false,
          onRequestCloseModal: this.cancelModal,
          locale: {
            strings: {}, // translatations,
          },
        })
        .use(XHRUpload, {
          endpoint: this.getRawApiUrl(),
          formData: true,
          fieldName: 'file',
          headers,
        });
  
      this.subscriptions.push(
        fromEvent(this.uppy, 'file-added')
          .pipe(
            map((files) => files[0]),
            bufferTime(500),
            filter((args) => args.length > 0)
          )
          .subscribe(() => {
            // triggers when a file added
          })
      );
  
      this.subscriptions.push(
        fromEvent(this.uppy, 'complete').subscribe((_) => {
          // triggers when completed
        })
      );
    }
  }
  

  The code snippet above I shared is just an example. If you copy directly, it may not work.

  You can call the initUppy method like this:

  this.uploadService.initUppy({ trigger: `#upload-button-id` });
  

  @volo/abp.ng.file-management package uses packages below as dependency:

  "@uppy/core": "^1.13.2",
  "@uppy/dashboard": "^1.12.6",
  "@uppy/xhr-upload": "^1.6.4",
  

  BTW, you can achieve that easily without using the uppy. Please visit the link below to learn file uploading in Angular: https://stackoverflow.com/a/47938117/9455416

  Save Cancel
• 

  0

  ServiceBot created 3 years ago

  Support Team Automatic process manager

  This question has been automatically marked as stale because it has not had recent activity.

  Save Cancel