Open Closed

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


User avatar
0
aeffegroup created
  • ABP Framework version: v4.1.2
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Seperated (Angular): no

Hello, we have activated the File-Management module in our project and we wanted to replicate a simple file upload feature in one of the Angular components that we have created with the CRUD generator of the Abp Suite. The @abp/uppy package is not documented at all and your installation instructions (using npm -i) is wrong; we managed to install the @abp/uppy package only using yarn. Since the file-management module is completely locked we cannot inspect the sources and we haven't found any documentation regarding the integration of the file upload component in a "standard" Angular component created with the Abp Suite or manually.

Can you please provide us a code sample or some instructions to help us add file upload features to our ABP.IO project ? In the backend we are using your BlobService configured to store files on the file system and it is working correctly.

Thank you very much, Regards, David Bandinelli Aeffegroup


2 Answer(s)
  • User Avatar
    0
    Mehmet created

    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

  • User Avatar
    0
    ServiceBot created
    Support Team Automatic process manager

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

Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11