Defining custom setting which is of type image file #2708

1 Answer(s)

• 

  0

  muhammedaltug created 2 years ago

  Hello,

  Setting definitions does not support blob types. You can make this feature by following the steps below.

  1. Make an endpoint for file upload.
  2. Create your setting class like in the document (Note: You need to create SettingDefinition with IsVisibleToClients parameter's value true)
  3. Add your component to the settings tab like in the document
  4. Make an input file and upload the file with your file upload endpoint in your setting component.
  5. Update setting value with image path
  6. Create logo component and replace logo component with existing, like the following example

  import { ConfigStateService } from '@abp/ng.core';
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-my-logo',
    template: `<a
      class="navbar-brand"
      routerLink="/"
      alt="logo"
      [style.backgroundImage]="bgUrl"
    ></a>`,
  })
  export class MyLogoComponent {
    bgUrl = `url("${this.configState.getSetting('YOUR_SETTING')}”)`;
    constructor(private configState: ConfigStateService) {
    }
  }
  
  

  //app.component.ts
  import { Component } from '@angular/core';
  import { eThemeLeptonComponents } from '@volo/abp.ng.theme.lepton';
  import { MyLogoComponent } from './my-logo.component';
  @Component({
    selector: 'app-root',
    template: `
      <abp-loader-bar></abp-loader-bar>
      <abp-dynamic-layout></abp-dynamic-layout>
    `,
  })
  export class AppComponent {
    constructor(
      private replaceableComponentsService: ReplaceableComponentsService
    ) {
      replaceableComponentsService.add({
        component: MyLogoComponent,
        key: eThemeLeptonComponents.Logo,
      });
    }
  }
  
  

  Save Cancel