Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Upload files using XHR object

    Hello all,

    Short Version:
    How can I upload a file asynchronously using a XHR object??
    ***********************************


    Long Version:
    I am trying to upload files to my server using AJAX. I cannot use regular html forms, since I want to be able to upload large files (exceeding 5 GB in some cases), thus it is imperative to do it asynchronously using the PUT method, as opposed as the traditional POST and GET methods.

    The problem is that when I use a regular form element, I can only access restricted properties of that object (name, value, type) but I do not know how to access the data inside the file itself. (see below).

    The code below will successfully create a file w/ the appropriate name in the server. Unfortunately it copies an empty file.



    Thank you in advance for any help..

    ~G.

    -----------------------------------------------------------

    <html><head>

    <script type="text/javascript" >

    var xmlHttp;
    function HandleFile (form) {
    var file = form.uploadedFile; //get file element
    var filename = file.value;
    xmlHttp=new XMLHttpRequest();

    if(xmlHttp!=null){
    xmlHttp.onreadystatechange=function(){
    if((xmlHttp.readyState==4)&&(xmlHttp.status == 200)){
    alert("File Uploaded");
    }
    }
    xmlHttp.open("PUT",'path/in/the/server/' + filename , true);
    xmlHttp.setRequestHeader('Content-type', 'text/plain');
    xmlHttp.send(file);
    }
    }

    </script>


    </head>
    <body>
    <form name="putform" id="putform" onsubmit="return HandleFile(this);">
    Upload File <input type="file" id="uploadedFile" name="uploadedFile" />'
    <input type="submit" name="submit" value="Upload File"/>
    </form>
    </body>
    </html>

    ---------------------------------------------------------------

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Code:
        function aPut(turl, data, mType, fnCallBack ) {
            var XHRt =  !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
            XHRt.onreadystatechange = fnCallBack  || (function () { return; })
            XHRt.open("PUT", turl, true);
            XHRt.setRequestHeader("Content-Type", (mType || "text/html") );
            XHRt.send(data);
            return XHRt;
        }
    only turl and data are required arguments...

    you will need to get the file data into a string to upload actual files like this.

    only in firefox 3 can you upload files directly without a server-side script to catch the data, authenticate, and create the file.
    Last edited by rnd me; 06-27-2008 at 05:41 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #3
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your quick reply.

    Couple of things.. How can I put the data into a string?
    More importantly, is it possible to do it w/out uploading it all at once? For small files, this method should not be a problem. However, my application must support files exceeding 5 GB. Thnx.

    ~G

  • #4
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    The XMLHttpRequest object does not support uploading of files. You need to pos to a hidden field to do it. Plenty of solutions online with a good search on Google.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    the form element's value property will only contain the filename.

    only firefox3 can provide the data from a file input to javascript.
    Code:
    var f =document.getElementById("file1");
    tval = f.files.item(0).getAsBinary(); 
    alert(tval);
    you can PUT this data into a new url to publish it to your server,
    no server-side script needed.


    check out this thread for a binary file saving example.


    edit: stumbled across this interesting post
    Last edited by rnd me; 07-02-2008 at 07:15 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #6
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    first let me say sorry for digging up such an old host, but i wanted to ask if this script would work??

    Code:
    <html><head>
    
    <script type="text/javascript" >
    
    var xmlHttp;
    function HandleFile (form)
    {
            var f = document.getElementById("uploadedFile");
            var file = f.files.item(0).getAsBinary();
            var filename = window.document.putform.uploadedFile.value;
            var dest = window.document.putform.dest.value;
            xmlHttp=new XMLHttpRequest();
            if(xmlHttp!=null)
            {
                    xmlHttp.open("PUT", dest+filename, true);
                    xmlHttp.setRequestHeader('Content-type', 'text/plain');
                    xmlHttp.send(file);
                    xmlHttp.onreadystatechange=function()
                    {
                            if((xmlHttp.readyState==4)&&(xmlHttp.status == 200))
                            {
                                    alert("File Uploaded");
                            }
                    }
            }
    }
    
    </script>
    
    
    </head>
    <body>
    <form name="putform" id="putform" onsubmit="return HandleFile(this);">
    Where to upload: <input type="text" id="dest" name="dest" /> <I>ie http://foobar.com/files/</i><BR>
    Upload File <input type="file" id="uploadedFile" name="uploadedFile" />
    <input type="submit" name="submit" value="Upload File"/>
    </form>
    </body>
    </html>

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by emadaadame View Post
    first let me say sorry for digging up such an old host, but i wanted to ask if this script would work??
    ...

    it would break binary files; the high-order char encoding of the sent string would not match the original.


    replace xmlHttp.send(file);
    with xmlHttp.sendAsBinary(file);

    checkout
    https://developer.mozilla.org/en/XML...#sendAsBinary()

    for more info...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #8
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ty rnd me for your help


  •  

    Posting Permissions

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