Avatar post to XMLHttpRequest object example

Suite and Optimus Suite 8
#1

I am trying to use the avatar API in a form that will post a file object to older server technology. The following demo works, and was wondering if the avatar API could be set up to do the same … where the class included in server-side code accepts a file object submitted by the form action and saves to a folder on the server

client-side

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM ACTION = "clsUpload.asp" ENCTYPE="multipart/form-data" METHOD="POST">
File Name: <INPUT TYPE=FILE NAME="avatar"><P>
<INPUT TYPE = "SUBMIT" NAME="cmdSubmit" VALUE="SUBMIT">
</FORM>

</BODY>
</HTML>

server-side

<!--#include file="freeASPUpload.asp"-->

<%
  Set o = new clsUpload

  If o.Exists("cmdSubmit") Then

   o.FileInputName = "avatar"
   o.FileFullPath = Server.MapPath(".") & "\UploadedFiles\" & o.FileNameOf("avatar")
   o.Save

   If o.Error = "" then
    Response.Write o.FileFullPath 
   End if
  
   Set o = nothing

  End If
%>

I do not know how to access the file object under the avatar API…

Unless there is something better…I am trying to mimic above with the following :

Note - some pseudocode as I do not know how to access form object from avatar AP or pass form inputs as parameters to server along with the avatar (image)I

client-side dhtmlx form

    <div id="container"></div>

    <script>

      const form = new dhx.Form("container", { 
 
        rows: [
          {
            name: "avatar",
            type: "avatar",
            size: "medium", // "small" | "medium" | "large" | number
            labelWidth: 140,
            label: "Avatar",
            labelPosition: "top",
            icon: "dxi dxi-person",
            placeholder: "Add image",
            updateFromResponse:true,
            fieldname: "file",
            accept: "image/*",
            successMessage: "Success",
            errorMessage: "Error",       
            alt: "Avatar",
            target: "https://server/clsUpload.asp",
            value: [] //src, etc. ?
            parameters: // how to submit image AND other form inputs?          
            
          },

          {
            type: "input", 
            name: "displayname",
            label: "Display Name"
          },

          {
            name: "cmdSubmit",
            type: "button",  // submit ? <<< server looks for submitted objects called cmdSubmit and avatar (See example code above)
            text: "Submit"
          }                             

       ]
     });



   form.events.on("click", function(name,e){
         obj = form.getItem("avatar").getProperties();

   url = obj.target

   params = obj.parameters

   var xhttp;

   xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() 
   {

    if (this.readyState == 4 && this.status == 200) 
      {  
        
        response = this.responseText; // server path and file saved

        if (response.length > 0) {         
                    
          dhx.message({
               	       text: "Form Posted",
                       expire: 1500,
                       icon: "dxi_pass dxi-check",
                       position: "bottom-right",
                       css: "dhx_message--success custom-message"
                     });
          
          form.clear();

          }

        else {

    
          dhx.message({
               	       text: "Form was not posted",
                       expire: 1500,
                       icon: "dxi_fail dxi-close",
                       position: "bottom-right",
                       css: "message-fail custom-message"
                    });


           }

              

      }


    else {}
  };


  xhttp.open("POST", url, true);
  xhttp.send();
  }

    });

});
   </script>
#2

After some research I found out how to access the form object. I applied it as follows and works for legacy asp…I certainly would prefer to use a more elegant solution like your send method, But I believe I would need to include another class to handle the json. If I am wrong…would love to see an example that may work in my situation - thanks!

DHX Form to classic asp example using

DHX form

<div id="container"></div>

<script>

    const form = new dhx.Form("container", { 
 
        rows: [
          {
            name: "avatar",
            type: "avatar",
            size: "medium",            
            label: "Avatar",
            labelPosition: "top",
            icon: "dxi dxi-person",
            placeholder: "Add image",
            alt: "Avatar",
            target: "https://server/server_side.asp"
          },

          {
            type: "input", 
            name: "displayname",
            label: "Display Name",
            placeholder: "John Smith",
            width: 344
          },

          {
            name: "cmdSubmit",
            type: "button", 
            text: "Submit"
          }                             

       ]
     });


   form.events.on("click", function(name,e) 
    {
       // call function
       postForm(); 
    });

</script>

function to pass to form data to server

<script>

 function postForm() {

   properties = form.getItem("avatar").getProperties();
   values = form.getItem("avatar").getValue();

   target = properties.target;
   
   objFile = values.file;
   displayname = form.getItem("displayname").getValue();

   const objForm = new FormData();
  
   objForm.append("cmdSubmit", "submit");
   objForm.append("avatar", objFile); 

   params = "?displayname=" + displayname;

   xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() 
    {
     if (this.readyState == 4 && this.status == 200) 
      {  
        response = this.responseText;   

        alert(response) 

        // code to do whatever with server response
      }
   };
    
    
   xhttp.open("POST", target + params, true);
   xhttp.setRequestHeader("Content-Type", "multipart/form-data");
   xhttp.send(objForm);
 }

</script>

classic asp server-side code to handle form submission

  • requires freeASPUpload class
<!--#include file="freeASPUpload.asp"-->

<%
  on error resume next

  displayname = Request("displayname")

  Set o = new clsUpload

  If o.Exists("cmdSubmit") Then


   o.FileInputName = "avatar"
   o.FileFullPath = Server.MapPath(".") & "\UploadedFiles\" & o.FileNameOf("avatar")
   o.Save

   If o.Error = "" then
    Response.Write "Path: " & o.FileFullPath & vbcrlf & "Display Name: " & displayname
   Else
    Response.Write o.Error
   End if
  
   Set o = nothing
  Else
   Response.Write "No file object!"
  End If    

 If err.number <> 0 Then response.write err.description 
%>