Checking file type with javascript before uploading

Limit the types of files users can upload
The following JavaScript function can be used to validate that the type of file that a user tries to upload is of a certain format. It does this by checking that the files extention (eg .html) is in an array of allowed extensions that is passed to the function as an argument.

< type="text/JavaScript">

< !-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;

dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];

return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') :
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -- >
< /script >

You can test it using the file upload below which will only accept image files that end in either .gif, .jpg or .png:



You can then call the function from an event like the onClick of the above button, which looks like:

onClick="TestFileType(this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']);"


or, alternatively, you could put it in the onChange event of the file upload element.

Note that the above example assumes that you know the "name" attribute of the file upload element. In domino R5 you can do this to an upload by putting a name in its HTML attributes. In R4 you cannot do this so you can either create the upload yourself by using the following pass-thru html

Otherwise you would need to loop through all elements on the form looking for any input of type "file" and then validating this. This method is demonstrated here.

Note: This is not entirely foolproof as people can easily change the extension of a file before uploading it, or do some other trickery, as in the case of the "LoveBug" virus.

Get Dynamic Thumbnail for you site

I implemented a new feature over at my Jenny McCarthy and Hayden Panettiere websites this past week.

I've been posting YouTube videos on both sites for quite some time, but have only been providing text descriptions to go along with the links from the main video pages. I finally decided that I wanted to figure out how to dynamically include thumbnail image previews of the clips, not only to display on the main video pages, but also in web feeds where applicable.

First I got all fancy and was sending in YouTube API requests to get at the information. The youtube.videos.get_details function provides thumbnail information in its node.

However, once I had implemented a preliminary approach using that method, I quickly realized there was a very obvious pattern to the thumbnail URLs being returned with each call:

http://img.youtube.com/vi/LiIboq6XCOg/2.jpg

The only portion of the above URL that seems to change is the video ID between the fourth and fifth forward slashes.

So rather than calling the API multiple times to get thumbnails for all the videos presented on the page, I decided to keep all function calls local, opting to create my own internal function for extracting the YouTube video ID from my XHTML-compliant embed code using a regular expression and then inserting that between the http://img.youtube.com/vi/ and /2.jpg portions of the static thumbnail URL.

The result is much faster and works like a charm.