New call-to-action
Results 1 to 4 of 4

Thread: Custom File Upload - parsing XML "POST"

  1. #1
    Member MichaelCarroll's Avatar
    Real Name
    Michael Carroll
    Join Date
    Feb 2008
    Posts
    467

    Default Custom File Upload - parsing XML "POST"

    Hello,

    I am creating an upload page for my web app. I am wanting feedback on the upload process, and the ability to do some file manipulation both on the server and with SQL. So the standard Alpha Five file upload modules will not work for me.

    Here is a script that I found that looks quite promising: http://exposureroom.biz/upload.aspx

    Every thing on this page looks like it can easily be done in an A5w page. Where I am pushing my knowledge limits is how to get the POST data collected by the javascript function to xbasic.

    Here is the javascript function snipit and the POST command that calls a aspx page. Again I would like to call xbasic here.


    Clip of code is from http://exposureroom.biz/upload.aspx)

    Code:
    function uploadFile() {
      var xhr = new XMLHttpRequest();
      var fd = document.getElementById('form1').getFormData();
    
      /* event listners */
      xhr.upload.addEventListener("progress", uploadProgress, false);
      xhr.addEventListener("load", uploadComplete, false);
      xhr.addEventListener("error", uploadFailed, false);
      xhr.addEventListener("abort", uploadCanceled, false);
      /* Be sure to change the url below to the url of your upload server
    side script */
      xhr.open("POST", "UploadMinimal.aspx");
      xhr.send(fd);
    }
    How could I pass this "POST" data to an xbasic script?

    Obviously this script calls a aspx page with some code behind script
    that is writing the POST data to the server. But I would like to avoid
    doing this and use only xbasic.

    Can the a5 xbasic stay on the same page?

    I would like to do something like this:

    Code:
    <%a5
    if eval_valid("fileToUpload")
            dim fn as C
    
           fn = "[PathAlias.ADB_Path]\images\\" + FileToUpload.filename
            fn = FileToUpload.filename
    
            file.from_blob(fn, FileToUpload.data)
    %>
    Thanks for your help,

  2. #2
    Volunteer Moderator
    Real Name
    Alan Buchholz
    Join Date
    Oct 2000
    Location
    Delavan, Wisconsin
    Posts
    9,662

    Default Re: Custom File Upload - parsing XML "POST"

    Al Buchholz
    Bookwood Systems, LTD
    Weekly QReportBuilder Webinars Thursday 1 pm CST

    Occam's Razor - KISS
    Normalize till it hurts - De-normalize till it works.
    Advice offered and questions asked in the spirit of learning how to fish is better than someone giving you a fish.
    When we triage a problem it is much easier to read sample systems than to read a mind.

  3. #3
    Alpha Software Employee Lenny Forziati's Avatar
    Real Name
    Lenny Forziati
    Join Date
    Nov 2001
    Location
    Alpha Software
    Posts
    4,701

    Default Re: Custom File Upload - parsing XML "POST"

    POSTed data is put into the Request variables, just like any query string data. Simply use Request.Variables.<your_form_element> as needed.

    Lenny Forziati
    Vice President, Internet Products and Technical Services
    Alpha Software Corporation

  4. #4
    Member MichaelCarroll's Avatar
    Real Name
    Michael Carroll
    Join Date
    Feb 2008
    Posts
    467

    Default Re: Custom File Upload - parsing XML "POST"

    Thanks to Lenny and Al for your suggestions.

    To get this to work I needed to see how the POST function worked.

    The HTML section basically calls the page that it is on "uploader.a5w" and passes the file name and the data that was selected using the input type control to the javascript that is listed above on that page.

    Code:
    <body>
    <form id="form1" enctype="multipart/form-data" method="post" action="uploader.a5w">
      <div class="row">
        <label for="fileToUpload">Select a File to Upload</label><br />
        <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>  
      </div>
    So to get the javascript to pass this POST data to xbasic so I can work with the files I changed the function uploadFile() section of javascript code so that instead of calling an asp.net page (UploadMinimal.aspx) it now calls an a5w page (upload.a5w).

    Where I got stuck was not knowing how the POST data would be able to be read by my upload.a5w page. So here is the javascript code and its change.
    Code:
    function uploadFile() {
      var xhr = new XMLHttpRequest();
      var fd = document.getElementById('form1').getFormData();
    
      /* event listners */
      xhr.upload.addEventListener("progress", uploadProgress, false);
      xhr.addEventListener("load", uploadComplete, false);
      xhr.addEventListener("error", uploadFailed, false);
      xhr.addEventListener("abort", uploadCanceled, false);
      /* Be sure to change the url below to the url of your upload server
    side script */
      xhr.open("POST", "UploadMinimal.aspx");
      xhr.send(fd);
    The last part of the above code is changed to:

    Code:
      /* Be sure to change the url below to the url of your upload server
    side script */
      xhr.open("POST", "upload.a5w");
      xhr.send(fd);
    Now on to the code in the upload.a5w page and what I typed to get this to work.

    Code:
    <body>
    <%a5
        dim fn as C
    
        fn= "aj_images/" + FileToUpload.filename
        file.from_blob(fn1, FileToUpload.data)
        msg = "<a href=\"/" + fn1 + "\" target=\"_blank\">" + FileToUpload.filename + "</a>Your image was uploaded<br /><br />"
        ? msg
    %>
    </body
    What is cool here is that the FileToUpload.filename is what is automatically passed to this page when xhr.open("POST", "upload.a5w");
    and xhr.send(fd); call the upload.a5w page.

    The page runs saves the file to the server and then prints the xbasic msg back to the javascript code on my uploader.a5w page so the page never refreshes but just displays to the user what is going on. Giving the users a hyperlink to the file uploaded on the server and letting them know it was successful.

    Now for the next part of this is getting the server to scale the images. Which I have in another thread.

    Before I end this post I would also like to acknowledge the site and the person that wrote the HTML5 uploader script:

    Html5 File Upload with Progress Posted by Shiv Kumar on 25th September, 2010 Categorized Under: Html 5 File Upload

    Tagged With: File API File Upload XMLHttpRequest

    on the site: http://www.matlus.com/html5-file-upload-with-progress/
    Last edited by MichaelCarroll; 10-29-2011 at 08:15 AM.

Similar Threads

  1. Where is ""ApplicationServerConfig.xml" in VISTA
    By dchiass in forum Application Server Version 10 - Web/Browser Applications
    Replies: 4
    Last Post: 05-19-2010, 12:02 PM
  2. "File Select" Control reverts to "Type in Field"
    By Citadel in forum Alpha Five Version 9 - Desktop Applications
    Replies: 3
    Last Post: 03-03-2010, 06:22 AM
  3. Web Dialog: Custom control / input type="file"
    By Antony in forum Application Server Version 8
    Replies: 7
    Last Post: 07-17-2008, 03:32 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •