WebCore img upload

[Feichtenschlager_Thomas]

I need to upload the image (directly, not a saved file) of an WebImageControl via
xhr.open('POST', 'http://localhost:2001/tms/sparkle/upload');
But I'm struggling to prepare the formdata.append - content correctly in WebCore. Maybe it must be converted into a blob, but my JavaScript knowledge is not enough to manage that.

Or is there an easier way in WebCore to achieve that ?

Thanks for any help on this issue !

Regards, Tom

[Podboj_Igor]

You can mix Javascript with Pascal code and use "this" keyword in Javascript as you would "self" in Pascal. You can expand the framework without limitations from Web Core. Looping asm blocks does not work so keep it linear.

function TMyOtherClass.DoUploadComplete(Event: TEventListenerEvent): Boolean;
var
LTarget: TJSXMLHttpRequest;
begin
LTarget := TJSXMLHttpRequest(Event.target);
Result := (LTarget.Status = 200) or (LTarget.Status = 201) or (LTarget.Status = 204);
if Result then
begin
Log('DoUploadComplete: ' + DateTimeToStr(Now) + ' OK');
end else
Log('DoUploadComplete: ' + DateTimeToStr(Now) + ' FAILED');
end;

TMyClass = class
FileContents: TBytes;
OnUploadComplete: TJSEventHandler;
URL: String;
procedure Upload();
end;

procedure TMyClass.Upload();
begin
asm
var send_data;
var is_array = (this.FileContents.buffer == undefined);
if (is_array==true)
{
send_data = new Blob([this.FileContents], {type: 'application/octet-stream'}); // array of uint8
//send_data = encode_int8array_to_base64(this.FileContents);
} else
{
send_data = new Blob([this.FileContents.buffer], {type: 'application/octet-stream'});
}
var oReq = new XMLHttpRequest();
oReq.open("POST", decodeURIComponent(this.URL, true);
oReq.responseType = "blob";
oReq.setRequestHeader("Cache-Control", 'no-cache, no-store, must-revalidate');
// add custom headers
oReq.onload = this.OnUploadComplete;
oReq.send(send_data);
end;
end;

Kind Regards

[Feichtenschlager_Thomas]

Thanks - and how do I get my WebImageControl1.Picture into FileContents ?
Regards, Tom

[brunofierens]

You can get it as base64 data with
WebImageControl.Base64Image: string;

[Feichtenschlager_Thomas]

Thanks - great - this was very valueable!
Since I want to upload the img via formdata I choose this way and it uploads a file properly without errors to the planned folder.

var FileContent: TBytes;
...
FileContent:= BytesOf(WebImageControl1.Base64Image);
  asm
    formData = new FormData();
    formData.append('doctyp', document.getElementById('exampledoctyp').value);
    formData.append('emailAddress', document.getElementById('exampleInputEmail1').value);

    var blob = new Blob([new Uint8Array(FileContent)], { type: 'image/png' });

    formData.append('fileUpload', blob,'a.png');
  end;
...

But when I try to open the saved a.png I get a message the the file is not a valid format.
So I guess I did something wrong somewhere in the conversion.

Thanks again for any help on this issue !

Regards, Tom

[brunofierens]

Well, this is normal. You are literally taking the base64 encoding string characters to a byte array. But you need the byte array itself which is the PNG data and not the byte array of a base64 encoded string.
In WEBLib.Utils, the function Base64ToArrayBuffer() performs this conversion.

[Feichtenschlager_Thomas]

Thanks again to all for your patience and support !

I finally got it working this way - it's possible to directly upload a WebCamera-Image to the sparkle-server now.

procedure TForm1.btnSnapShotClick(Sender: TObject);
begin
  WebImageControl1.URL := WebCamera1.SnapShotAsBase64;
end;

procedure TForm1.WebButton1Click(Sender: TObject);
var
  formData: JSValue;
  lmaxfsize: LongInt;
  FileContent: TJSArrayBuffer;
begin
  mem_Summary.Lines.Clear;
  FileContent := WEBLib.Utils.Base64ToArrayBuffer(WebImageControl1.Base64Image);

  asm
    formData = new FormData();
    formData.append('doctyp', document.getElementById('exampledoctyp').value);
    formData.append('emailAddress', document.getElementById('exampleInputEmail1').value);

    var blob = new Blob([new Uint8Array(FileContent)], { type: 'image/png' });

    formData.append('fileUpload', blob,'a.png');
  end;

  xhr := TJSXMLHttpRequest.new;

  xhr.open('POST', 'http://localhost:2001/tms/sparkle/upload');

  xhr.upload.addEventListener('loadend', @_loadend);
  xhr.upload.addEventListener('progress',@_progress);
  xhr.upload.addEventListener('error', @_error);
  xhr.upload.addEventListener('timeout', @_timeout);
  xhr.upload.addEventListener('abort', @_abort);

  xhr.addEventListener('loadend', @_final);

  xhr.send(formData);
end;

For details also see
[File Upload Example - WEB / TMS WEB Core - TMS Support Center (tmssoftware.com)]

Regards, Tom