Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A small ajax upload component, like the one google's gmail has.
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.textile
upload.class.js

README.textile

This is a small “Ajax-upload” component, written in javascript.
It’s goal is to mimic the behavior of the google gmail attach file component.

The project is inspired by the post: Ajax File Upload

So far, the component can be initialized on a form tag, (using the form’s id). It will then hide the current form and add it’s own.
The newly added form’s file field, will have an “onchange” event, that automatically submits the chosen file, to the forms action.

After you have chosen a file to upload, a nice “Uploading File…” text appears and a new file field is added (with it’s own form and iframe), ready to upload more data to the backend.

Options

You can use the following options to pass to the object, when initializing it:

Option name Description
formId The id of the form to do the magic on. REQUIRED
includeFields If the upload should send the current fields to the upload. (e.g. hidden fields etc). This is true as default
uploadingText Pass this to set a different text when uploading.
uploadDoneText Pass this to set a different upload done text.

How to

It is really easy to get started. All you need to do, is have a normal form, with the enctype set and have a file field inside it. Add the correct action and method (POST) and you are ready to start.

Example

I have added a small example to help you get started.

To initialize the component, all you need is to call the following javascript:

new Westsworld.Upload({
  formId: 'uploadForm'
});

The formId references the id of the form we are doing the magic on. But other that that, you are ready to upload your files!

More complete upload form

A complete example of a page with an upload form, could be like the following:


<html>
	<head>	
		<title>Ajax upload demo</title>
		<script type="text/javascript" src="scripts/prototype.js"></script>
		<script type="text/javascript" src="scripts/scriptaculous.js"></script>
		<script type="text/javascript" src="scripts/upload.class.js"></script>
	</head>
	<body>

		<form id="uploadForm" method="post" action="upload-images.php" enctype="multipart/form-data">
			<input type="hidden" name="someId" value="1" />
			<div>Choose a file to upload:</div>
			<input type="file" name="file" /><br/>
			<textarea name="textarea_name" id="textarea_id"></textarea><br/>
			<input type="text" name="some_text_input_field" /><br/>
			<input type="submit" value="Upload..." />
		</form>
	
		<script type="text/javascript">
			new Westsworld.Upload({
				formId: 'uploadForm'
			});
		</script>
	</body>
</html>

The same script, as earlier, is called at the bottom of the page. Please note the javascripts added in the HEAD section. Currently both prototype and scriptaculous ( and my script ofcourse) is needed to make it all work.

Upload Handling (the backend)

But (yes, there’s always a but), you need to fix your backend slightly. In order for the ajax upload to remove the old form, display a nice message when done etc, you need to call a javascript when you are done with the upload.

This is actually more simple than it might seem.

We need to “catch” a parameter from the POST request, and use this information to call a script. The parameter to catch is called: javascript_formid
This parameter contains data about what form called the upload script. It is used to close and remove the form fields the component adds on your page.

All you need to do, is to add the following to you upload-images.php/upload-images.asp/upload-images.whatever_extension_you_might_have file. (I’m using PHP as an example here, just exchange the $POST[’javascriptformid’] with what your language uses to fetch a post parameter)


<html>
	<head>	
		<title>Upload catcher temp file</title>
		<script type="text/javascript" src="scripts/prototype.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			window.parent.document.fire('westsworld:components:upload:ended', {formId: '<?php echo $_POST["javascript_formid"]; ?>'});
		</script>
	</body>
</html>

Using the event from the upload-images.php page.

After talking with janusc (the designer I originally created the script for), he wanted me to include a few pointers on what you else could use the script for.

On his page, he uses it for uploading images (yep…), and after he got it working, he of course wanted more.

“Could the script reload the images on my page” he asked. And yes, it can. Well, sort of. All you need to do, is use the event that is sent back the frontend, and call an additional javascript.

Here is what he did

First he added a div to hold the images:


<div id="recently-uploaded"></div>

Then he added a javascript to hook up on the event.


<script type="text/javascript">
	document.observe('westsworld:components:upload:ended', function(event) {
		new Ajax.Updater('recently-uploaded','/recently-uploaded-images.php', {
			parameters: {
				'gallery-id': 1
			}
		});
	});
</script>

This meant, that whenever he uploaded an image, the newest images would be displayed. With this feature, a user could easily delete the images again.

TODO

List of things that could be fun to have / add.

  • Show a nice progress bar when uploading.
Something went wrong with that request. Please try again.