UnimFileUploadButton Show button only

[Hayri ASLAN]

Hello

With below code you can change the apperance of the unimfileuploadbutton.

BEFORE:

 

AFTER:

procedure TMainmForm.UnimFormReady(Sender: TObject);
begin
  with UnimFileUploadButton1, JSInterface do
  begin
    JSAssign('element.dom.querySelector(".x-label-el").style.display', ['none']);
    JSAssign('element.dom.querySelector(".x-input-el").style.display', ['none']);
    JSAssign('element.dom.querySelector(".x-input-wrap-el").style.border', ['none']);
    JSAssign('element.dom.querySelector(".x-after-input-el").style.width', ['100%']);
    JSAssign('element.dom.querySelector("#ext-field-trigger-file-1").style.width', ['100%']);
    JSAssign('element.dom.querySelector("#ext-filebutton-1").style.width', ['100%']);
    JSAssign('element.dom.querySelector(".x-text-el").innerText', ['Take a Picture']);
  end;
end;

 

[likemike]

Hello Hayri!

This post is very helpful. 

Can I set the background color und rounded edges too?

Where can I find which elements are available and what are the possible settings?

Regards

Mike 

[Hayri ASLAN]

17 hours ago, likemike said:

Hello Hayri!

This post is very helpful. 

Can I set the background color und rounded edges too?

Where can I find which elements are available and what are the possible settings?

Regards

Mike 

Hello Mike

Please add below lines to your code.

  with UnimFileUploadButton1, JSInterface do
  begin
    JSAssign('element.dom.querySelector(".x-label-el").style.display', ['none']);
    JSAssign('element.dom.querySelector(".x-input-el").style.display', ['none']);
    JSAssign('element.dom.querySelector(".x-input-wrap-el").style.border', ['none']);
    JSAssign('element.dom.querySelector(".x-after-input-el").style.width', ['100%']);
    JSAssign('element.dom.querySelector("#ext-field-trigger-file-1").style.width', ['100%']);
    JSAssign('element.dom.querySelector("#ext-filebutton-1").style.width', ['100%']);
    JSAssign('element.dom.querySelector(".x-text-el").innerText', ['Take a Picture']);

    JSAssign('element.dom.querySelector(".x-inner-el").style.backgroundColor', ['red']);
    JSAssign('element.dom.querySelector(".x-inner-el").style.borderColor', ['red']);
    JSAssign('element.dom.querySelector(".x-inner-el").style.borderRadius', ['25px']);

  end;

 

[likemike]

Works great!

Last question: what about the text color?

[Hayri ASLAN]

6 minutes ago, likemike said:

Works great!

Last question: what about the text color?

Hello Mike

you can use the below code

JSAssign('element.dom.querySelector(".x-text-el").style.color', ['blue']);

 

[likemike]

Sorry to disturb again, but this JS-assignments work the first time. The second time I get an AJAX-error.

The UnimFileUploadButton is placed on an extra form, which is closed and opened by the user.

Should I clear the JS-assignments before assigning them?

Thanks

 

[Hayri ASLAN]

3 hours ago, likemike said:

Sorry to disturb again, but this JS-assignments work the first time. The second time I get an AJAX-error.

The UnimFileUploadButton is placed on an extra form, which is closed and opened by the user.

Should I clear the JS-assignments before assigning them?

Thanks

 

Hi

Can you make a simple test case so I can work on it

[likemike]

No problemunigui3.rar

1. press "Open form" on Mainform -> 2. form opens and all works fine
2. close the 2. form
3. press "Open form" on Mainform again -> error

[Hayri ASLAN]

6 hours ago, likemike said:

No problemunigui3.rar

1. press "Open form" on Mainform -> 2. form opens and all works fine
2. close the 2. form
3. press "Open form" on Mainform again -> error

Hello Mike,

Please use below code.

procedure TUnimForm1.UnimFormCreate(Sender: TObject);
begin
  with UnimFileUploadButton1, JSInterface do
  begin
    JSCallGlobal('Ext.util.CSS.createStyleSheet', ['#'+JSId+' .x-inner-el{ '+
                                                              ' background-color: #f5e971; '+
                                                              ' border-color: #055af7; '+
                                                              ' border-radius: 25px; '+
                                                              ' border-width: bold; '+
                                                              '}'+
                                                   '#'+JSId+' .x-text-el{ '+
                                                              ' color: #525452; '+
                                                              ' 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%; '+
                                                              '}'+
                                                   '#'+JSId+' .x-filetrigger{ '+
                                                              ' width: 95%; '+
                                                              ' margin-left: 1em; '+
                                                              '}'+
                                                   '#'+JSId+' .x-button-action{ '+
                                                              ' width: 100%; '+
                                                              '}'

                                                              ]);
  end;
end;

procedure TUnimForm1.UnimFormReady(Sender: TObject);
begin
  with UnimForm1.UnimFileUploadButton1, JSInterface do begin
      JSAssign('element.dom.querySelector(".x-text-el").innerText', ['New media']);
  end;
end;

 

[likemike]

That's working like a charm! Thanks!!