Asynchronous file uploads

Here is a screen-shot of the async file upload I talked about in the earlier post.
The iframe is the "Upload File" UI element. It is embedded in the main form.
The main form has no idea of there being a file input element. All the file input logic is in the form element within the iframe. This way the file upload can even be re-used in different forms.

In fact livemocha has 2 forms where users can upload pictures. The first is when the user activates their account, the next is when they later would want to edit their profile information. I use the iframe code for both of those views. And that includes the controler logic that processes the image as well.

GMail like Asynchronous file upload from a form

Web forms that allow you to upload files typically insist on clicking on a "Submit" button to upload the file to the web server.
Most input data can be submitted to the web server from the client using Ajax, thus bypassing a "Submit" button. However file data cannot be serialized and passed to the web server with Ajax.
It is possible to use Javascript (NOT Ajax) and call form.submit() directly, thus bypassing the "Submit" button.
The only issue here is that, we have no control over how the submit() call renders data. One specific issue is that this call would cause the whole form to re-load which results in the user losing any other data she may have entered on the same page.

It is possible to use an iFrame within the form, include the file input field within the iFrame and call iFrame.form.submit() to upload the file. Then only the iFrame will be re-loaded and the rest of the form will remain intact.

GMail uses a technique similar to this, that allows them to "see" the attachment before the user clicks "Send" on the email - this is a very useful feature, as users immediately get feedback, GMail can perform validations - eg: virus checks - on the file as the user is composing the email etc.

Examine the html at http://livemocha.com/profiles/create to get an idea

Notice the "src" parameter points to a different form for the file upload part. That is the mini-form that posts the file data asynchronously (using javascript) to the server.

The javascript does the direct submit to the webserver bypassing the "Submit" button - in fact the mini-form inside the iframe does not have a Submit button as you can see. The javascript is triggered via the "onchange" notification on the file input field, i.e: when a file is selected for upload by the user.

This is a feature that is now available at http://www.livemocha.com/profiles/basic - check it out so you can see some more nice interactions. For example, you can immediately show the new picture uploaded to the user - normally this is difficult to do on the web browser, as on the client we have no access to the local file system.

xdebug on centos

these instructions are from : http://tech.nigel.in/

So for those of you who need to install Xdebug, here is what you need to do.

1. You need to have PHP 5 and PECL installed and working with Apache already.
2. You need to install PHP's devel package. This is needed for the command phpize to work. Note that you need to have the CentosPlus repository enabled for this. So from the terminal as root run the command:

   yum install php-devel

3. Next you need to have GCC and GCC C++ compilers installed. The only way to install Xdebug on linux as of time of writing this is to compile the extension yourself. The good thing is that this turns out to be is really easy. Note that you also need Autoconf and Automake packages. Once again from the terminal as root run the command:

   yum install gcc gcc-c++ autoconf automake

4. Next its time to get the Xdebug package for php itself, and compile and install it. That is as simple as typing the following command as root:
   

   pecl install Xdebug

5. Now you need to configure your PHP to load the extension. On Centos, extensions are loaded from a folder most likely to be located at /etc/php.d In this folder you are most likely a bunch of .ini files corresponding to what ever extensions you have installed for use with PHP. You now need to create a file called xdebug.ini here as root. Next add the following lines to the file:

   ; Enable Xdebug extension module
   extension=xdebug.so
   
   ; Configure the extension [See Xdebug documentation for options to add here]
   xdebug.remote_enable=
   xdebug. .....
   

6. Restart Apache with service httpd restart and check the output of phpinfo() to see the if Xdebug is loaded and configured correctly.
   

replace a whole word with different text

The following examples replaces the whole word unidad with lección in a po file.
perl -p -i.bak -e 's/\bunidad\b/lección/g' wwwroot/app/locale/es_mx/LC_MESSAGES/default.po

the /b is used to match a "word boundary"

Behind the pesky HDMI cable

http://www.freedom-to-tinker.com/?p=1005
talks about the DHCP protocol used by HDMI compatible devices, and of course how it can be broken.

nginx as a reverse proxy to your web server

I'm experimenting with setting up nginx as a reverse proxy to a web server. The idea is to let nginx handle images, css and forward all php traffic to the regular apache web server.

This is a good article: http://www.guindilla.eu/blog/2006/12/31/deployement-nginx-reverse-proxy-my-network/

vpn to a PPTP network from Ubuntu (Feisty 7.04)

I couldn't use the NetworkManager to connect to the vpn. So I used pptpconfig directly for this purpose. Installing this is a little tricky as you have to add a couple of repositories to your /etc/apt/sources.list and the information is a bit scattered across the web.

After installation, you may have to meddle with some settings inside pptpconfig so that the handshake between your client and the vpn server succeeds. My steps may not work for you as it depends on how the peer (other side) is configured as well.

These are the steps I took to both install and connect with pptpconfig. (I have Ubuntu Feisty 7.04 kernel version 2.6.20.3)
---------------------------------------------------------------------------------------------
I enabled universe and used the following on my /etc/apt/sources.list:

deb http://quozl.linux.org.au/pptp/pptpconfig ./

i removed all others referring to the old repository http://quozl.netrek.org

with that, there were no errors shown on subsequent install steps, and pptpconfig was correctly installed.

these are the install steps:

sudo apt-get update
sudo apt-get install pptpconfig

I had to meddle a bit with the tunnel settings to get it to connect. Under 'Encryption' tab in pptpconfig, I enabled the following:

Require Microsoft Point-to-Point Encryption (MPPE)
Refuse 128-bit Encryption
Refuse Stateless Encryption
Refuse to Authenticate with EAP

On the 'Routing' tab, I had to add a route (using Edit Network Routes) to the office network. Since it has a 192.168.10.0 address, I used the following:

Network: 192.168.10.0/24
Name: whatever

I could then successfully start and access hosts within the office network.