Skip to content

Instantly share code, notes, and snippets.

@mloberg

mloberg/File.Upload.js

Created November 6, 2011 04:23
Show Gist options
  • Save mloberg/1342473 to your computer and use it in GitHub Desktop.
Save mloberg/1342473 to your computer and use it in GitHub Desktop.
Download ZIP
MooTools Ajax File Upload
Raw
example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ajax File Upload</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<input type="file" name="image" id="image" /><br />
<input type="file" name="image2" id="image2" /><br />
<button type="button" id="btn">Upload</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
<script src="File.Upload.js"></script>
<script>
window.addEvent('domready', function(){
$("btn").addEvent('click', function(){
var upload = new File.Upload({
url: 'upload.php',
data: {
foo: 'bar'
},
images: ['image', 'image2'],
onComplete: function(response){
console.log(response);
}
});
upload.send();
});
});
</script>
</body>
</html>
Raw
File.Upload.js
/*
name: [File.Upload, Request.File]
description: Ajax file upload with MooTools.
license: MIT-style license
author: Matthew Loberg
requires: [Request]
provides: [File.Upload, Request.File]
credits: Based off of MooTools-Form-Upload (https://github.com/arian/mootools-form-upload/) by Arian Stolwijk
*/
File.Upload = new Class({
Implements: [Options, Events],
options: {
onComplete: function(){}
},
initialize: function(options){
var self = this;
this.setOptions(options);
this.uploadReq = new Request.File({
onComplete: function(){
self.fireEvent('complete', arguments);
this.reset();
}
});
if(this.options.data) this.data(this.options.data);
if(this.options.images) this.addMultiple(this.options.images);
},
data: function(data){
var self = this;
if(this.options.url.indexOf('?') < 0) this.options.url += '?';
Object.each(data, function(value, key){
if(self.options.url.charAt(self.options.url.length - 1) != '?') self.options.url += '&';
self.options.url += encodeURIComponent(key) + '=' + encodeURIComponent(value);
});
},
addMultiple: function(inputs){
var self = this;
inputs.each(function(input){
self.add(input);
});
},
add: function(input){
var input = document.id(input),
name = input.get('name'),
file = input.files[0];
this.uploadReq.append(name, file);
},
send: function(input){
if(input) this.add(input);
this.uploadReq.send({
url: this.options.url
});
}
});
Request.File = new Class({
Extends: Request,
options: {
emulation: false,
urlEncoded: false
},
initialize: function(options){
this.xhr = new Browser.Request();
this.formData = new FormData();
this.setOptions(options);
this.headers = this.options.headers;
},
append: function(key, value){
this.formData.append(key, value);
return this.formData;
},
reset: function(){
this.formData = new FormData();
},
send: function(options){
var url = options.url || this.options.url;
this.options.isSuccess = this.options.isSuccess || this.isSuccess;
this.running = true;
var xhr = this.xhr;
xhr.open('POST', url, true);
xhr.onreadystatechange = this.onStateChange.bind(this);
Object.each(this.headers, function(value, key){
try{
xhr.setRequestHeader(key, value);
}catch(e){
this.fireEvent('exception', [key, value]);
}
}, this);
this.fireEvent('request');
xhr.send(this.formData);
if(!this.options.async) this.onStateChange();
if(this.options.timeout) this.timer = this.timeout.delay(this.options.timeout, this);
return this;
}
});
Raw
upload.php
<?php
print_r($_GET); // data is store in get
print_r($_FILES); // our images
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment