how to add a TUniFileUploadButton in a menu

[PS1]

No, i've just made style for UploadButton so it would looks like normal button. 

[gerhardhziegler]

3 hours ago, PS1 said:

No, i've just made style for UploadButton so it would looks like normal button. 

would you like to share your code, it would be great!

[PS1]

procedure TUMM.UniGUIMainModuleNewComponent(AComponent: TComponent);
var
  c1, c2 : string;
begin
  if (AComponent is TUnimFileUploadButton) then
    begin
      if AnsiUpperCase(dMotyw) = 'ZIELONY'then
        begin
          c1 := '#53af48';
          c2 := '#53af48';
        end
      else
        begin
          c1 := 'rgb(33, 150, 243)';
          c2 := 'rgb(18 128 215)';
        end;

       with (AComponent as TUnimFileUploadButton), JSInterface do
        begin
          JSCallGlobal('Ext.util.CSS.createStyleSheet', ['#'+JSId+' .x-inner-el{ '+
            ' background-color: white; '+
            ' border-color: '+c1+'; '+
            ' border-width: 2px; '+
            '}'+
            '#'+JSId+' .x-text-el{ '+
            ' color: '+c2+'; '+
            ' font-weight: #525452; '+
            '}'+
            '#'+JSId+' .x-label-el{ '+
            ' display: none; '+
            '}'+
            '#'+JSId+' .x-input-el{ '+
            ' display: none; '+
            '}'+
            '#'+JSId+' .x-input-wrap-el{ '+
            ' border: none; '+
            '}'+
            '#'+JSId+' .x-after-input-el{ '+
            ' width: 100%; '+
            ' background-color: white; '+
            '}'+
            '#'+JSId+' .x-filetrigger{ '+
            ' width: 100%; '+
            //      ' margin-left: 1em; '+
            '}'+
            '#'+JSId+' .x-button-action{ '+
            ' width: 100%; '+
            ' height: 100%; '+
            '}'+
            '#'+JSId+' .x-field{ '+
            ' width: 100% !important; '+
            '}'
            ]);
        end;
    end;

//
end;

Above is code in MainModule - adding styles

And this can change text of the button:

  UnimFileUploadButton1.JSInterface.JSAssign('element.dom.querySelector(".x-text-el").innerText', ['Upload file']);

 

[gerhardhziegler]

9 hours ago, PS1 said:

procedure TUMM.UniGUIMainModuleNewComponent(AComponent: TComponent);
var
  c1, c2 : string;
begin
  if (AComponent is TUnimFileUploadButton) then
    begin
      if AnsiUpperCase(dMotyw) = 'ZIELONY'then
        begin
          c1 := '#53af48';
          c2 := '#53af48';
        end
      else
        begin
          c1 := 'rgb(33, 150, 243)';
          c2 := 'rgb(18 128 215)';
        end;

       with (AComponent as TUnimFileUploadButton), JSInterface do
        begin
          JSCallGlobal('Ext.util.CSS.createStyleSheet', ['#'+JSId+' .x-inner-el{ '+
            ' background-color: white; '+
            ' border-color: '+c1+'; '+
            ' border-width: 2px; '+
            '}'+
            '#'+JSId+' .x-text-el{ '+
            ' color: '+c2+'; '+
            ' font-weight: #525452; '+
            '}'+
            '#'+JSId+' .x-label-el{ '+
            ' display: none; '+
            '}'+
            '#'+JSId+' .x-input-el{ '+
            ' display: none; '+
            '}'+
            '#'+JSId+' .x-input-wrap-el{ '+
            ' border: none; '+
            '}'+
            '#'+JSId+' .x-after-input-el{ '+
            ' width: 100%; '+
            ' background-color: white; '+
            '}'+
            '#'+JSId+' .x-filetrigger{ '+
            ' width: 100%; '+
            //      ' margin-left: 1em; '+
            '}'+
            '#'+JSId+' .x-button-action{ '+
            ' width: 100%; '+
            ' height: 100%; '+
            '}'+
            '#'+JSId+' .x-field{ '+
            ' width: 100% !important; '+
            '}'
            ]);
        end;
    end;

//
end;

Above is code in MainModule - adding styles

And this can change text of the button:

  UnimFileUploadButton1.JSInterface.JSAssign('element.dom.querySelector(".x-text-el").innerText', ['Upload file']);

 

extremely helpful, thank you so much, @PS1.

Does anyone have an idea, how to place an image into that button and remove the border. Then I would be completely happy!

[PS1]

Try this

1. Border

You can change style in my code, by setting ,,border-width: 0px"

2.Image

Try  writing some html with image instead of just text in code below (you can use <img> too for your pictures)

UnimFileUploadButton1.JSInterface.JSAssign('element.dom.querySelector(".x-text-el").innerText', ['TEST<i class="fa fa-arrow-up" style="margin-right: 4px;"></i>']);