| Jaxer Update Available. |
Jaxer 1.0 RC A is now available through the Aptana Cloud Early Access Program. This new Jaxer release has many new features and updated APIs. Jaxer 1.0 RC A API docs: Available inside Aptana Studio after you run the update. Additional Info: Jaxer 0.9 Beta to Jaxer 1.0 RC A Migration Guide. |
One of the common web tasks that always seems to involve a lot of arcane knowledge of backend systems, is how to upload files. Like most systems, Aptana Jaxer uses the post/receive model, where a web form is posted to the server, and the target of that form will receive and process the content. Where Jaxer makes this really easy is that it is all done with regular JavaScript and HTML. No special enviroment vars, excessive string processing, or finding handles to oddly named temp files is required.
All you need is a form to present to the user, which contains an input element of type upload, and an HTML page to receive the submitted form containing a "runat=server" script block that retrieves the data from the request. You could have the form and the recipient be the same page, however in this example I'll use two files for clarity. As an aside in Jaxer you can actually send the form directly to a JavaScript function living on the server but we'll look at that configuration in a future blog entry.
This example upload form simply allows you to select up to 2 files for upload from the local filesystem. Pressing 'upload' posts the contents of that form to an HTML page containing the JavaScript shown later.
The form will look like the following when viewed in a browser. Pressing the browse button will present you with a file selection dialog, or you can type the path into the input box directly. I've used 2 file slots in this example to demostrate that the files passed in are available as part of an files array contained in the request object (a JavaScript representation of the HTTP request) and are accessed like any other JavaScript array.
'upload' sends the selected file(s) to the server.
To receive the data from the form when submitted we put some Jaxer code into the page the form will be submitted to. The code below should be in script block with a runat = 'server' attribute, which makes the code run serverside and doesn't present it to the client so you don't expose any serverside filenames or folder structures.
The data posted by the form is available within the Jaxer.request object.
For the purposes of this example we are specifically interested in the Jaxer.request.files array which contains an array of Jaxer.Request.FileInfo objects, one for each file posted with the form.
The Jaxer.Request.FileInfo object contains some useful properties describing the file, such as fileName, contentType, etc.Uploading two files from my filesystem from the form in this example would return a page of output like below. We have uploaded the file to same location as the submission.html file used as the form action in the originating HTML.
Saved to : C:\aptana\JaxerDev\public\work\bar.txt original filename : bar.txt temp filename : C:\aptana\JaxerDev\tmp\tmp contentType : text/plain size : 15754 Saved to : C:\aptana\JaxerDev\public\work\foo.txt original filename : foo.txt temp filename : C:\aptana\JaxerDev\tmp\tmp-1 contentType : text/plain size : 816
Well that's really all there is to it. It's simple and easy and you never have to think about anything other than HTML and Javascript.
API docs for the FileInfo object and the Jaxer.Request object are available online.
