Brussels web design blog

jqUploader: jQuery plugin for javascript / flash file upload and progressbar

I just released my first plugin for jQuery, the best of the best javascript libraries.

jqUploader is a jquery plugin that substitutes file input fields ( form input with type attribute set to”file”) with a flash uploader, containing a progressbar.

In other terms, this small script allows you to display a progress bar showing the upload progress, via javascript and a small flash file. You can modify the look by tweaking the source flash file provided with the plugin. Note that it is completely unobtrusive: users with javascript turned off will simply see the classic html file upload field.

How it works:

The plugin uses the form action attribute value (normally pointing to a server side script handling the upload and other data manipulations, and appends a variable “jqUploader=1″ so that the upload code is initiated when it sees that key/value is on the posted data.

jqUploader

NB: for use in a cakePHP application:
Make sure that you put in the full local dev path instead of /admin/.
So you can do something like:

$("input#ImageFilename").jqUploader({
src: '/js/jqUploader/jqUploader.swf',
uploadScript: '< ?php echo $html->url('/admin/images/
add/');?>',
afterScript: '< ?php echo $html->url('/admin/images/
add/');?>',
background: 'FFFFDF',
barColor: '64A9F6',
allowedExt: 'jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF'
});


a few mysql tricks

Here are a 2 mySQL tricks i write down here for myself, hopefully it is of some use to you.

have a date formatted correctly via mysql, no need for php to do that:

To have a mysql formated date (2007-02-17) rendered as 17-02-2007, you would do this:

SELECT field1, date_format(dateFieldName,'%d-%m-%Y') as nice_date FROM tableName

(see here for more date formatting masks).

Select only a part of a text (for abstract or excerpts)

For instance, if you want to get only the 50 first words of a text stored in a “body” field, you’d do this:

SELECT SUBSTRING_INDEX(body,' ',50) as excerpt from ...

Using select queries inside a main select

Case: I have a table “images” and an “album” . I would like to display the list of available albums, showing the album name, the number of images inside, and say, a thumbnail of the last uploaded image. This is how i achieve it:

SELECT a.album_id
, a.album_name
, ( SELECT COUNT(image_id)
FROM images as i1
WHERE i1.album_id = a.album_id
) AS total_images
, ( SELECT thumb_file_path
FROM images as i2
WHERE i2.album_id = a.album_id
ORDER BY i2.image_id DESC LIMIT 0,1 ) AS last_image
from albums as a
WHERE project_id='2'

new html canvas tag

<canvas> is a new HTML element which can be used to draw graphics using scripting (usually JavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations.

<canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari. Gecko-based applications support this new element starting with Gecko 1.8 (i.e. Firefox 1.5 and later). Opera 9 supports as well.

The <canvas> element is part of the WhatWG Web applications 1.0 specification also known as HTML 5.

a demo here: http://www.tapper-ware.net/canvas3d/ (use arrows / space bar to navigate)

about the canvas tag: http://developer.mozilla.org/en/docs/Canvas_tutorial

Make your pages load faster by combining and compressing javascript and css files

Niels Leenheer came up with a brilliant solution to speed up html page download.

His solution addresses the issues that arise when your page contains multiples calls to external css/ javascript files. Any contemporary webdoohoo  page has a bunch of these, and if yours does to, read on.

The principle is easy: combine all these external files into one gzip compressed file, and also, cache them so you don’t have to wait for the server’s processing.

Read it at rakaz Make your pages load faster by combining and compressing javascript and css files

jQuery search engine plugin

Click on the link below to install a search engine to search the jQuery API at the jQuery API Browser.

Install jquery API search engine

Thanks to Jörn Zaefferer for the nice resource !