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

8 Answer(s)

• 

  0

  muhammedaltug created one year 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] },
    });
  };
  

  Save Cancel
• 

  0

  dev3.advantiss created one year ago

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

  Save Cancel
• 

  0

  muhammedaltug created one year ago

  Hello

  Yes you can paste in app.component.ts

  Save Cancel
• 

  0

  dev3.advantiss created one year 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"

  Save Cancel
• 

  0

  muhammedaltug created one year 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: `
      <abp-loader-bar></abp-loader-bar>
      <abp-dynamic-layout></abp-dynamic-layout>
    `,
  })
  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

  Save Cancel
• 

  0

  dev3.advantiss created one year 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?

  Save Cancel
• 

  0

  muhammedaltug created one year 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?

  Save Cancel
• 

  0

  dev3.advantiss created one year ago

  Hello

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

  Thank you

  Save Cancel