Closed

Need to add filter to extensions for file-management #4432

dev3.advantiss created 2 years ago

By default file-management can upload all types of file
Need to upload only some types of files with extensions "JPEG,PNG,ICO.GIF,TIFF".
Could I do this simple or I need to correct file-management module?
Maybe simple solution exists, but I can not found it.

ABP Framework version: v5.3.3
UI type: Angular
DB provider: MongoDB
Tiered (MVC) or Identity Server Separated (Angular): yes

Best regards
Advantiss.

8 Answer(s)

muhammedaltug created 2 years ago

Hello,

Currently, the File Management module does not have a service for configuring uppy. But there is a workaround below to override uppy config.

// app.component.ts
import { FileManagementButtonsComponent } from '@volo/abp.ng.file-management';
import { Uppy } from '@uppy/core';

const afterViewInit = FileManagementButtonsComponent.prototype.ngAfterViewInit;

FileManagementButtonsComponent.prototype.ngAfterViewInit = function () {
  afterViewInit.call(this);
  (this.uploadService.uppy as Uppy).setOptions({
    restrictions: { allowedFileTypes: ['.jpg', ...otherfiletypes] },
  });
};

0

dev3.advantiss created 2 years ago

Hello
Where I need to paste this code in app.component.ts?
0

muhammedaltug created 2 years ago

Hello

Yes you can paste in app.component.ts
0

dev3.advantiss created 2 years ago

Hello

I tried to paste this code in different places(constructor, ngOnInit...) but can not get any changes in UI.
File Management module always show "All Files"

muhammedaltug created 2 years ago

Hello

Can you replace your app.component with following

import { Component } from '@angular/core';
import { FileManagementButtonsComponent } from '@volo/abp.ng.file-management';
import { Uppy } from '@uppy/core';

@Component({
  selector: 'app-root',
  template: `
    &lt;abp-loader-bar&gt;&lt;/abp-loader-bar&gt;
    &lt;abp-dynamic-layout&gt;&lt;/abp-dynamic-layout&gt;
  `,
})
export class AppComponent {}

const afterViewInit = FileManagementButtonsComponent.prototype.ngAfterViewInit;

FileManagementButtonsComponent.prototype.ngAfterViewInit = function () {
  afterViewInit.call(this);
  (this.uploadService.uppy as Uppy).setOptions({
    restrictions: { allowedFileTypes: ['.jpg'] },
  });
};

Result

0

dev3.advantiss created 2 years ago

Hello
I added this code after class AppComponent and I did not see any changes in UI
It is does not work for my application
Does my version of Abp(5.3.3) support it decision?
0

muhammedaltug created 2 years ago

Hello,

Yes, we tested in ABP 5.3.3 application. Can you send your app.module.ts, app-routing.module.ts and app.component.ts?
0

dev3.advantiss created 2 years ago

Hello

We have already used file-manager from code
I found and corrected code
Problem was solved

Thank you