TWebFileUpload issue

WEB TMS WEB Core
1

I have an TWebFileUpload on a TWebForm and I am using templates. I set a Div with the elementid of the FileUpload and I get the following error when the form loads.

WEBLib.WebCtrls.pas:2926 
        
     Uncaught TypeError: Cannot read properties of null (reading 'children')
    at Object.UpdateElement (WEBLib.WebCtrls.pas:2926)
    at Object.EndUpdate (WEBLib.Controls.pas:2792)
    at Object.EndUpdate (WEBLib.Controls.pas:5392)
    at Object.AfterLoadDFMValues (classes.pas:5350)
    at Object.LoadDFMValues (ImportDonorsForm.pas:153)
    at Object.CreateNewForm (WEBLib.Forms.pas:3160)
    at Object.DoFormLoad (WEBLib.Forms.pas:3243)
    at XMLHttpRequest.cb (rtl.js:249)

This is created in

procedure TImportDonorsJob.LoadDFMValues;
begin
  inherited LoadDFMValues;

  FileUpload := TFileUpload.Create('FileUpload');

  FileUpload.BeforeLoadDFMValues;
  JobMessage.BeforeLoadDFMValues;
  try
    FileUpload.SetParentComponent(Self);
    FileUpload.Name := 'FileUpload';
    FileUpload.Left := 63;
    FileUpload.Top := 292;
    FileUpload.Width := 330;
    FileUpload.Height := 69;
    FileUpload.HeightStyle := ssAuto;
    FileUpload.WidthStyle := ssAuto;
    FileUpload.HeightPercent := 100.000000000000000000;
    FileUpload.WidthPercent := 100.000000000000000000;
    FileUpload.Caption := 'Choose a file';
    FileUpload.ChildOrder := 6;
    FileUpload.DragCaption := 'or drag it here';
    FileUpload.ElementFont := efCSS;
    FileUpload.ShowFiles := True;
    JobMessage.Top := 367;
  finally
    FileUpload.AfterLoadDFMValues; //<-- HERE
    JobMessage.AfterLoadDFMValues;
  end;
end;

the problem is in

procedure TFileUpload.UpdateElement;
var
  el:TJSHTMLElement;
begin
  inherited;

  CreateCSS;

  if Assigned(ElementHandle) then
  begin
    ElementHandle.style.setProperty('display','flex');

    el := TJSHTMLElement(ElementHandle.children[0]);
    el := TJSHTMLElement(el.children[0]); //<-----

...
end

If I don't add the div with the fileupload id, it is fine - but I can't see the upload area.

Also, even though the div is within a the fileupload creates it's own.

Now, before anyone asks me to create a small app that illustrates this, I've tried and they work. So, any ideas where to start?

2

if I give my form the same id as the TWebFileUpload, then I get a different error when the form is loaded

procedure TFileUpload.UpdateElement;
var
  el:TJSHTMLElement;
begin
  inherited;

  CreateCSS;

  if Assigned(ElementHandle) then
  begin
    ElementHandle.style.setProperty('display','flex');

    el := TJSHTMLElement(ElementHandle.children[0]);
    el := TJSHTMLElement(el.children[0]);

    if not ShowPicture then
       el.style.setProperty('display','none') //<--- HERE
    else
      el.style.removeProperty('display');
3

TWebFileUpload can't be mapped on a DIV.
This component uses internally several other HTML elements.
If you want to use this in a template, put TWebFileUpload in a TWebHTMLDIV and map the TWebHTMLDiv on a DIV element in the template.

1 Like
4

I'll give this a go, although the filepicker is fine for my current requiremenrs