File uploader with hidden IFrame

iframe_file_uploader.js

	/* FILE UPLOADER */
	var CLASS_UPLOADING = 'file-uploading';
	var CLASS_UPLOADING_COMPLETE = 'file-uploading-complete';
	var CLASS_LOADER_WIDGET = 'file-upload-loader';
	var CLASS_LOADER_LABEL = 'file-upload-loader-label';
	var CLASS_LOADER_CONTAINER = 'file-upload-container';
	var FILE_UPLOAD_URL = '/path/to/handler';
	var updateFileContainerState = function(file_input)
	{
		// hide input
		file_input.closest('.ajax-video-form').hide();
		// determine index of this input
		var current_file_uploader_count = parseInt($('.' + CLASS_LOADER_CONTAINER).length);
		var file_uploader_index = 1;
		if( !isNaN(current_file_uploader_count) ) {
			file_uploader_index = current_file_uploader_count + 1;
		}
		console.log('uploading index: ' + file_uploader_index);
		// show the loader
		var loader_container = $('<div/>')
									.addClass(CLASS_LOADER_CONTAINER)
									.addClass(CLASS_UPLOADING)
									.append($('<div/>').addClass(CLASS_LOADER_WIDGET))
									.append($('<span/>').addClass(CLASS_LOADER_LABEL).text('Uploading file...'))
									.append($('<div/>').addClass('clear'));
		file_input.closest('.mtm0')
						.prepend(loader_container)
						.find('.delete-mtm').remove();
		// return index
		return file_uploader_index;
	}
	var postFileToIframe = function(file_input,file_uploader_index)
	{
		var iframe_name = 'iframe_'+file_uploader_index;
		// create iframe
		var iframe = $('<iframe/>')
						.attr('name',iframe_name)
						.appendTo('body');
		// create and post the form
		var form = $('<form/>')
						.attr('action',FILE_UPLOAD_URL + '/id/<?php echo $_GET['id']; ?>/index/'+file_uploader_index)
						.attr('method','POST')
						.attr('enctype','multipart/form-data')
						.attr('encoding','multiplart/form-data')
						.attr('MAX_FILE_SIZE','500000000000')
						.attr('target',iframe_name)
						.append(file_input)
						.hide()
						.appendTo('body')
						.submit();
				//console.log(form.find('input'));
	}
	var uploadFile = function(file_input)
	{
		// change appearance state, removing input
		var file_uploader_index = updateFileContainerState(file_input);
		// post file to iframe
		postFileToIframe(file_input,file_uploader_index);
	}
	var updateFileContainerStateComplete = function(file_uploader_index)
	{
		var complete_container = $($('.' +CLASS_LOADER_CONTAINER)[(file_uploader_index - 1)]);
		// change state of loader to complete
		complete_container.html(
								$('<div/>')
									.append($('<div/>').addClass(CLASS_UPLOADING_COMPLETE))
									.append($('<div/>').addClass('clear'))
		);
	}



                // Use
		// Upload file through iframe
		$('input[type="file"]').live('change',function() {
			uploadFile($(this));
		});