Open Closed

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


User avatar
0
dev3.advantiss created

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)
  • User Avatar
    0
    muhammedaltug created

    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] },
      });
    };
    
  • User Avatar
    0
    dev3.advantiss created

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

  • User Avatar
    0
    muhammedaltug created

    Hello

    Yes you can paste in app.component.ts

  • User Avatar
    0
    dev3.advantiss created

    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"

  • User Avatar
    0
    muhammedaltug created

    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

  • User Avatar
    0
    dev3.advantiss created

    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?

  • User Avatar
    0
    muhammedaltug created

    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?

  • User Avatar
    0
    dev3.advantiss created

    Hello

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

    Thank you

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11