Show Thumbnail when Uploading Image
(This post is the English translation of the article posted on Codezine by Masato Bito, lead programmer of PhotoZou and CTO of Unoh Inc.)
The conventional way of uploading images on the Web― by selecting file names― is inconvenient. You have to retain from memory what is kept under each file. However, thumbnail image of the file being uploaded can be previewed on the browser when using the library introduced on this site.
Demo(IE Only)
Download[12.2KB]
Introduction
With the spread of Broadband and the continuing growth of capacity space for storing devices, many Websites today allow for frequent opportunities to handle large volumes of media such as image files. Unfortunately, the conventional way of uploading images requires the knowledge of what each File name signifies, which realistically speaking, doesn’t happen often.
The Website that I am in charge of developing, called PhotoZou (an online photo-sharing site), also faced the same dilemma. Therefore, in order to avoid this, I have created a Javascript Library that shows image thumbnails, which is currently in use for PhotoZou. By using this library, users can view the image on the browser before uploading.
Unfortunately, for security purposes Web browsers that allow this function is limited to Internet Explorer. IE boasts top shares in the browser market in Japan as well as the rest of the world. Even though this library supports IE only, it should greatly improve the users' experience of uploading for the better. Please feel free to introduce and use this library on your Websites.
Target Audience
The targeted audience are all of those who are developing a Website, are familiar with the basics of HTML, and are able to write JavaScript. This library is operated exclusively by JavaScript thus the server language can vary.
Supported Environment
The supported browser is IE only. It does not operate with Mozilla or Opera. In addition, the library uses prototype.js. prototype.js is one of the most significant libraries that support Web 2.0. I strongly recommend that you take this opportunity to familiarize yourself with it.
How to Use ImageThumnail.js
First, I would like to explain how to use the library. The below is the minimum HTML needed to use this library.
1 <script type="text/javascript" src="prototype.js"></script>
2 <script type="text/javascript" src="ImageThumbnail.js"></script>
3 <input type="file" id="photo">
4 <img src="empty.gif" id="thumbnail" width="80" height="0">
5 <script type="text/javascript">
6 <!--
7 new Image.Thumbnail('thumbnail', 'photo');
8 //-->
9 </script>
In lines 1 and 2, prototype.js and ImageThumbnail.js are loaded. Line 3 is an input tag for selecting files. Line 4 is an img tag for showing thumbnails. The width attribution of img tag is set to its biggest size. empty.gif is the image size of 1x1. Here, you may want to show your own default thumbnail image.
Lines 6 through 9 are calling the image thumbnail library. Image.Thumbnail is defined with a function of prototype.js as a class and becomes available by being, new. The first argument is the id of an img tag and the second argument is the id of an input tag.
ImageThumnail.js in Detail
I would like to continue by explaining the image thumbnail library in further detail.
1 var Image = Image || {};
2 Image.Thumbnail = Class.create();
3 Image.Thumbnail.prototype = {
....
87 }
Line 1 defines the Image object. Image object is merely an object. But in effect it is used as a name space. The image thumbnail library is a library of images and therefore I wanted it to be captured in the name space of Image. It is handy to keep in mind that prototype.js uses objects as a name space.
Image || { } is written in this way because of the reflection that the Image object is already defined. Typical programming languages evaluate A || B as TRUE or FALSE. But with JavaScript, if the left-hand side is a defined object, the left-hand side object is evaluated and if the left-hand side is not defined, the right-hand side is evaluated. Consequently, if Image of Image || { } is defined, then the Image is returned and if it is not defined the {} (empty object) is returned. Therefore, if the Image has been previously defined, it cannot be overwritten.
Line 2 is using the prototype.js function to make a class. The Image.Thumbnail is a member of the Image object and is captured inside of Image. It is easiest to think that Image.Thumbnail class is stated here.
Lines 3 through 87 is the definition of the actual class. Object is substituted for the member of prototype but please know that this is something like a lucky “spell” to make it work and let’s leave it at that.
4 initialize: function(img, input, options) {
5 this.setOptions(options);
6
7 var img = $(img);
8 this.img = img;
9 this._saveImageInfo();
10
11 var input = $(input);
12 this.input = input;
13 Event.observe(input, 'change', this.show.bind(this))
14 },
The initialize method is a method that is always called when made new when a class is defined with prototype.js. You can consider it as a constructor.
The necessary arguments are img and input. Options, as the name suggest, is an option and therefore not required.
Lines 7 through 9 are for img. Line 7 gets the object of the element specified by img and line 8 saves this object. In line 9, the information of img object is saved by this._saveImageInfo.
$ is a function that is defined by prototype.js that gets the element and works in the same way as document.getElementById. The function name can be kept short and keep in mind that this function is widely used in prototype.js.
Lines 11 through 13 handles input. Similar to img, the object is acquired and saved. In line 13, this.show is registered on the change event of input. Due to this, when a file is selected in the input tag (when the change event has occurred), this.show is performed.
Event.observe is a function offered by prototype.js that registers events. By using Event.observe of prototype.js, you can register events without considering behavior difference among browsers.
this.show.bind(this) is the lucky "spell" that is cast upon registering the class method to the events. I will not go into details of bind(this). By using bind(this), this object can be restricted.
16 setOptions: function(options) {
17 this.options = {
18 suffixes: {
19 gif: true,
20 jpeg: true,
21 jpg: true,
22 png: true
23 }
24 }
25 Object.extend(this.options, options || {});
26 },
setOptions sets the options that were given by the constructor. Lines 17 through 24 define the option defaults. The option that is used in image thumbnail library is suffixes. suffixes defines the extensions of supported image files.
Overwriting options are done in line 25. Object.extend is another function of prototype.js and by using this you can overwrite objects. If different suffixes are set with the constructor, the option value will be overwritten with that value.
28 _saveImageInfo: function() {
29 var img = this.img;
30 if (!img.width) {
31 setTimeout((function(){this._saveImageInfo()}).bind(this), 1000);
32 return;
33 }
34 var img_org = document.createElement('img');
35 this.img_org = img_org;
36 img_org.src = img.src;
37 img_org.width = img.width;
38 img_org.height = img.height;
39 },
_saveImageInfo saves the img element information that was set by the constructor.
The if clauses in lines 30 through 33 does something a little complicated. What is happening here is adjusting the timing. Depending on the network or the client situation, loading the HTML or image file may take some time. For that reason, line 30’s if is evaluating the value of the width attribute. If this value is not set then the image file has not been loaded yet. In this case, one second later it will call on itself again and by doing so it can be assured that the img element information will be attained .
Lines 34 though 38 saves the information of img element. A new img element, this.img_org, is generated and the information is saved on it. Saved information is the attributes of src, width, and height. The saved information here is used to restore original thumbnail images.
41 show: function() {
42 var filename = this.input.value;
43 if (!this.isValidSuffix(filename)) {
44 this.showOriginal();
45 return false;
46 }
47
48 var img_tmp = document.createElement('img');
49 filename = filename.replace(/\\/g, '/');
50 img_tmp.src = 'file:///'+filename;
51 this.img_tmp = img_tmp;
52 Event.observe(img_tmp, 'load', this._show.bind(this))
53 },
show method shows the thumbnail. File name is received with line 42 and in line 43 the extension of the file is checked to see if it is an image file. The isValidSuffix part will be explained later. If the file is rejected as an image file, the original thumbnail will be restored by the this.showOriginal. The information for the original thumbnail is stored in this.img_org. If the extension is that of an image file then it continues onto line 48.
Lines 48 through 52 retrieves the selected image file's information. The key here is that the selected image file is not directly applied to the thumbnail image. If it is directly applied, a bigger image will show. Therefore, selected image file needs to be read into temporary img element first, then further information will be acquired.
Line 48 generates img_tmp (temporary img element) and line 49 replaces file name's “\” to “/.” Line 50 reads the image file into img_tmp and line 51 saves img_tmp to this.img_tmp. Line 52 registers this._show method to the load event (called when loading has been completed) of img_tmp. When a value is substituted for src attribute, the reading is started but it takes time to complete so the value cannot be extracted right away. Hence, by registering to the load event, the information can be pulled out after loading has been completed.
55 _show: function() {
56 var img = this.img;
57 var img_tmp = this.img_tmp;
58 var max_length = this.img_org.width;
59 var ox = img_tmp.width;
60 var oy = img_tmp.height;
61
62 if ((img_tmp.width >= img_tmp.height) && (ox > max_length)) {
63 ox = max_length;
64 oy = img_tmp.height * max_length / img_tmp.width;
65 } else if (img_tmp.height > max_length) {
66 ox = img_tmp.width * max_length / img_tmp.height;
67 oy = max_length;
68 }
69
70 img.src = img_tmp.src;
71 img.width = ox;
72 img.height = oy;
73 },
The _show method is called once the image of this.img_tmp has finished being read. _show is the actual method that shows thumbnail image based on the image information.
The process being made here are not all that difficult. The image information is read by this.img_tmp and the values of the width and height are attained. The width of the image is extracted from this.img_org which is used as the maximum size for the thumbnail image. If the width or height is bigger than the maximum size, then it will be modified and the values of src, width, and height will be updated. Finally, the thumbnail images are completely displayed.
75 isValidSuffix: function(filename) {
76 filename.match(/\.([^.]*)$/);
77 return this.options.suffixes[RegExp.$1];
78 },
The isValidSuffix is the method that checks the extension of the file name that I previously wrote. Line 76 extracts the extension of file name and line 77 judges whether the extension is correct or not. Extensions are registered on this.options.suffixes and this value can be changed by the 3rd argument of the constructor. By default, gif, jpeg, jpg, and png are registered but if you wish to add or remove the supported extensions on your Website, overwrite them with your preferred values.
80 showOriginal: function() {
81 var img = this.img;
82 var img_org = this.img_org;
83 img.src = img_org.src;
84 img.width = img_org.width;
85 img.height = img_org.height;
86 }
87 }
showOriginal is a method that shows the original image. This method is called upon when the selected image has an unsupported extension. When nothing occurs when the image file has an unsupported extension, the previously displayed image will appear which is not preferred. Therefore, when selected image is not supported the original thumbnail image is displayed.
This process is pretty simple and what's happening here is that the information of the original image saved on this.img_org is being written in.
Summary
Using prototype.js is slightly different from the normal JavaScript, so you may have found some difficulties. However, prototype.js is significantly important for Web 2.0 so I highly recommend that you get familiar with it.
It is a hassle to check what files holds what images. By using Image Thumbnail Library, you can easily view the content of the file and this library is easy to set up. If you load the js file of the library, all you have to do is new it and you are able to use it right away.
Why not try this Image Thumbnail Library on your website?
