- 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)
-
0
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 theFileManagement
orCoreModule
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
-
0
This question has been automatically marked as stale because it has not had recent activity.