Ajax file uploader

JavaScript
1

Hi,

What’s the best way to approach an ajax file uploader?
Anyone have a simple example they want to share? been looking at others and they seem very convoluted.

2

How about this?
Ajax File Upload

3

Yep :tup:

Thanks Paul, that’s the approach I ended up taking.
Basically all file uploads in the whole system will be handled by a centralised dialog with the multipart form.

This is still pretty rough but you’ll get the idea.


<div id="file-dialog" class="init" data-control="Dialog" data-title="File upload" data-modal="true" style="display: none">
	<form enctype="multipart/form-data" action="upload.php" id="file-form" target="file-frame" method="post">
		<div class="file">
			<input class="real" type="file" name="file" id="file">
			<input type="hidden" name="MAX_FILE_SIZE" value="5000">
			<span class="fake">
				<a href="#" class="button">Select file</a>
				<span id="file-name"></span>
				<img id="file-loader" src="img/loading.gif" style="display:none">
			</span>
		</div>
		<br>
		<p><b>File restrictions</b><br>
		Accepted file types: doc, pdf, txt, xls, ppt, jpg, bmp, png &amp; gif<br>
		Max file size: 5MB</p>
	</form>
	<iframe src="javascript:false;" id="file-frame" name="file-frame" style="display:none"></iframe>
</div>

The places in forms I need to attach files I just have a button which launches the dialog


<div class="file init" data-control="FileUpload">
	<img class="preview" src="img/blank.gif" style="display:none">
	<span class="filename" style="display:none"></span>
	<a href="#" class="button upload">Upload file</a>
	<input class="value" type="hidden" name="icon">
</div>

The js


(function() {
	
var activeControl,file,form,dialog,frame,loader,filename,message;
var docTypes = /(txt|doc|pdf|xls|ppt)$/
var imgTypes = /(jpg|bmp|gif|png)$/;

Controls.FileUpload = {
	initOnce: function() {
		file = $('#file');
		form = $('#file-form');
		dialog = $('#file-dialog');
		frame = $('#file-frame');
		loader = $('#file-loader');
		filename = $('#file-name');
		message = $('#file-messsage');
		
		file.change(function() {
			loader.show();
			filename.html(this.value.replace(/^(.*)?\\\\/g, ''));
			form.submit();
		});
		$body.delegate('.file .upload', 'click', function() {
			activeControl = $(this).parent('.file');
			dialog.dialog('open');
			return false;
		});
	},
	uploaded: function(success, data) {
		var name = activeControl.find('.filename'),
		preview = activeControl.find('.preview'),
		value = activeControl.find('.value');
		var ext = data.path.substr(data.path.lastIndexOf('.')+1, data.path.length);
		if (success) {
			if (imgTypes.test(ext)) {
				preview[0].src = data.path;
				name.hide();
			}
			else {
				ext = (docTypes.test(ext)) ? ext : 'txt';
				preview[0].src = 'img/file.'+ext+'.png';
				name.html(data.filename).show();
			}
			preview.show();
			value.val(data.path);
			
			dialog.dialog('close');
			loader.hide();
			filename.html('');
		}
		else {
			$('#message').html(options.message);
			loader.hide();
			filename.html('');
		}
	}
}

})();

The upload page calls a function on the parent with the file info


<script>
parent.Controls.FileUpload.uploaded({SUCCESS}, {
    path: '{PATH-SAVED-IN-FORM}',
    filename: '{PATH-DISPLAYED-ON-SCREEN}'
});
</script>

Thanks for your help, as always.