File Upload and capture response

WEB TMS WEB Core
1
Use Case:  User needs to be able to select a file to upload and save the filename upon a successful upload or capture errors.

After working through the File Upload Demo, with Wagner's help, I managed to create my Server and add upload capabilities to it. Using the Upload Demo as a temlate, the file, regardless of size uploads properly.  

Next steps.  
Upon successful upload I need to capture the fact that the file was successful along with the filename so I can store it.

Using Aurelius and Sparkle on the backend.  TMS Web on the user side.
Web Form, Web Button, WebEdit,  Web HTML Container.
The WebHTMLContainer displays the upload HTML code as a popup modal window thus preventing the user from interacting with the form until the upload is complete.
User selects the file and uploads it.  Sparkle returns success via Context.Response, just like in the Demo. 
After a successful upload, the filename should be returned to the web form in a Webedit box or String variable.
If failure, some error message based on the Context.response? 


Question is,  how do I capture, on the client form,  the response and filename or the error returned from the server if it fails? 

Also, it seems the TWebFileUpload component is more suited for this sort of thing.  The drag/drop feature would be especially nice in this cases.  However, I don't see any examples or documentation on it.  Perhaps this is a better way to do it?

2

Since this is the Sparkle based upload handler, my colleague Wagner will be able to assist with the response handling. My colleague is travelling now and will get back to you as soon as possible.

3
Thanks Bruno.  I'll circle back to this when Wagner gets caught up.  I'm still not convinced that doing this via HTML file upload is the best way to do this and monitor responses at the same time.  We can wait to see what Wagner proposes.


4

Bump

5

Wagner is on a trip right now, he will handle your request as soon as possible.

6

Hi Scott, sorry for the delay. Here is a sample code for uploading the files directly from code instead of HTML. You can adapt it to your situation, in this sample I'm getting the email and file values from existing controls in the form (I used the same names (id) used in the FileUploadSample, but you might have different ones). I'm also reporting the returned status code and content in a WebButton1 and WebMemo1 controls. You can of course adapt to put those values in variables and process them.




procedure TForm1.WebButton1Click(Sender: TObject);
var
  formData: JSValue;
  xhr: TJSXMLHttpRequest;


  procedure _load;
  begin
    WebButton1.Caption := IntToStr(xhr.Status);
    WebMemo1.Lines.Text := xhr.responseText;
  end;


begin
  asm
    formData = new FormData();
    formData.append('fileUpload', document.getElementById('exampleFormControlFile1').files[0]);
    formData.append('emailAddress', document.getElementById('exampleInputEmail1').value);
  end;


  xhr := TJSXMLHttpRequest.new;
  xhr.open('POST', 'http://localhost:2001/tms/sparkle/upload');
  xhr.addEventListener('load', @_load);
  xhr.send(formData);
end;