File Upload from HTML form: client and server validation for maximum size

File uploading normally requires client validation (mainly as a UI improvement) and server validation (in case the client validation is bypassed/hacked).

The code

<input type="hidden" name="MAX_FILE_SIZE" 

only imposes a soft limit (in bytes) on the server side, therefore not a good practice since it can be altered by the user. The solution I adopted is composed by a server side validation AND a client validation (in JavaScript, mainly for a better user experience since it can be easily hacked as all the other JS solutions)

Client validation (JavaScript)

The idea is accessing the files JS property of the input field and read the file size on the ‘change’ event (when a file is selected by the user). If the selected files exceed the max size, I simply display a clear user warning and disable the submit button. I’ve created a generic script that automatically listens to the change event for any file upload element, and reads the max upload size in bytes from the MAX_FILE_SIZE HTML input hidden element in the same form.

Server side validation (PHP)

Just set the desired value for ‘upload_max_filesize’ and ‘post_max_size’ PHP settings (php.ini). Alternatively, if you need application specific settings and you use apache as web server, add the following lines into the .htaccess in your web root

php_value upload_max_filesize 25M
php_value post_max_size 25M

Doctrine 2 + zf2 working with both SQL server and MySQL

The web application I’m working on (PHP 5.3, zf2, Doctrine2, on MySQL/Apache) has recently raised interest from the clients and it now needs to be installed on their premises, often a Windows server( arghhh!). That meant we had to make the application compatible with both MySQL and SQL-Server.
Here I summarize the changes and the solutions we adopted.
Continue reading

Chrome, Firefox, IE browser plugin to reload CSS without reloading the page

When developing and adjusting the CSS, a methodology is using firebug to directly edit the styles and then re-apply the change on the real file with the editor.
In other cases, it’s more practical to change the CSS directly, but reloading the full page is a bit time consuming.

Here is a trick to reload only the CSS. There are browser extensions for it, but at the time of writing, none of existing ones works as expected, at least on chrome.
So, I simply solved by creating a browser tool-bar link that reloads the CSS without reloading the full page, with one-line of JavaScript.

From your browser toolbar: right click and select the option to add a new URL (“Add Page” on Chrome)
name: “Reload CSS”
url: the following script

Or just drag this into the toolbar Reload CSS

Chrome command line options for windowed HTML applications

An example of combination of chrome command line arguments to launch an HTML page…

  • windowed, that means in “app mode” (no toolbars, –app=”<url>” argument),
  • with no web security checks (= allowed DOM manipulation of frame loaded on a different domain, –-disable-web-security), that allows Javascript to modify the content of forms loaded in other frames from external URLs, for full-flegded interactions.
  • with a custom user-agent (–user-agent). I personally use it for a website that – with a mobile User-Agent – displays much less annoying banners and a layout that better fits its small frame;
  • with independent user session settings (–user-data-dir=”C:/path-to-temp-files”). That’s necessary to avoid chrome sharing settings with your current chrome user session, and mandatory to enable ad-hoc settings like the web security

How to modify PDF files, inserting text and image / signature

This post is not related to PHP nor software development, it’s just a a simple tip about speeding up a small everyday task I’ve been having:

Adding text and signature (image) to a PDF (definitely more practical then print + fill it in + sign + scan and send it back).

PDF-XChange Viewer (v 2.5 free, for windows) is a simpler alternative to PDF editing software, and is able to add images (including your scanned signature) and text into a PDF, and save the changes. If the link is broken or not available, or the app is not free anymore, maybe I still have a copy on my dropbox.

Steps to add a signature

  • (only the first time) Tools -> Comment and markup tools -> show Stamps Palette. Create new collection -> From Image
  • Tools -> Comment and markup tools -> Stamp Tool -> [select your signature]

Steps to add text

  •  Tools -> Comment and markup tool -> Typewriter tool

Last time I found a free sofware able to do that I then forgot the name and I was unable to find a valid one. Next time it happens I’ll search in my blog first 🙂

Firefox user preferences with selenium (behat+mink) to bypass a proxy or disable cache

At work we are testing an existing application with behat+mink. We normally use goutte driver, but in some cases (when javascript is needed) we need to use selenium server piloting firefox.

When using firefox, the page is loaded including external javascript (google analytics, network ads etc..) so it needs connetivity. An alternative is disabling external requests on the testing environment or use a fake DNS entry, but that wasn’t a viable solution for us.

A small problem I had was bypassing the office network proxy, that requires a proxy auto config file (PAC) when firefox was running. You can find many links online mentioning the various firefox preferences you can set, for example network.proxy.http and network.proxy.http_port to specify a proxy, or network.http.use-cache to enable/disable the browser cache.

In my configuration (ubuntu 12.04, with selenium 2.28, firefox 18.0.1), the preferences file read by firefox is located at /usr/lib/firefox/defaults/pref/proxy.js, where you can add the various calls to user_pref([settings], [value]) .

Here an example of how I changed the puppet manifest of the box to make things working for us

file { "/usr/lib/firefox/defaults/pref/proxy.js":
 content =>
'user_pref("network.proxy.autoconfig_url", "http://chante-with-your-value/default.pac");
user_pref("network.http.use-cache", false);
user_pref("network.dnsCacheExpiration", 1);
user_pref("network.proxy.type", 2);'

Composer: how to use your github forks


Imagine you are using a github project in your composer file

"require": {
  "original-user/project": "dev-bugfix"

Now, this dependency does not do exactly what you want, so you want to change it and use your fork instead (and potentially submit a pull-request).

How to use your fork

Just add your repository into composer.json

"repositories": [
     "type": "vcs",
     "url": ""

Important: Do not change the “require” part, it must continue using original-user/project.
Run a “./composer.phar update” and composer will then download your fork (even though it echoes “installing  original-user/project” during the operation).

Go into “vendor/original-user/project” and run “git remote -v” for a double check, you’ll see the remote source “composer” that is your fork, and “origin” that is the original project. From there you can commit the changes to your fork and update it from origin (git pull origin master).




Loading a package from a VCS repository# There are a few use cases for this. The most common one is maintaining your own fork of a third party library. If you are using a certain library for your project and you decide to change something in the library, you will want your project to use the patched version. If the library is on GitHub (this is the case most of the time), you can simply fork it there and push your changes to your fork. After that you update the project’s composer.json. All you have to do is add your fork as a repository and update the version constraint to point to your custom branch. For version constraint naming conventions see Libraries for more information. Example assuming you patched monolog to fix a bug in the bugfix branch:

MongoDB + MySQL with Doctrine 2. Example of listener to maintain redundant data (alternative to joins)

If you are developing an application with MongoDb, sooner or later you will face the need of solving a query that involves more than one collections (or a MongoDB collection with a MySQL table). In this case, an SQL join operation won’t be available.

If you have a small amount of data, you can perform two MongoDB/MySQL queries and then join the results at the application level, but – depending on your needs – that could be not feasible or turn out to be inconvenient. A possible better solution for that could be redundancy.

Continue reading

97 things every programmer should know: personal notes

Last month I saw a book flying about the office, containing useful tips from developers. 97 suggestions from experienced developers. Amazon is still selling it, so I suggest you read it if work as a software developer or you occasionally dip into coding: 97 Things Every Programmer Should Know: Collective Wisdom from the Experts

I’ve finished reading it, and I took some notes while reading. Some concepts and suggestions were obvious, as I hear them many times from the community (blogs, conferences, colleagues) or I’ve already personally experienced them. I’ll paste those my notes here, with the hope that you can find something valuable from looking through them.

Continue reading