From f2272f26b9cd33d0ad02ddf5780128d0791e96e9 Mon Sep 17 00:00:00 2001
From: Dell Sala <dell@dellsala.com>
Date: Tue, 27 Mar 2012 12:25:55 -0400
Subject: [PATCH] initial commit

---
 demo/index.html    | 60 ++++++++++++++++++++++++++++++++
 demo/upload.php    |  5 +++
 jquery.uploader.js | 85 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 150 insertions(+)
 create mode 100644 demo/index.html
 create mode 100644 demo/upload.php
 create mode 100644 jquery.uploader.js
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..efe1e8b
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<title>jQuery Asynchronous Upload</title>
+    <style type="text/css">
+    
+    #uploadButton {
+        padding: 0;
+        margin: 0;
+        border-radius: 5px;
+        background-color: #660;
+        color: #FFF;
+        width: 150px;
+        height: 40px;
+        border: none;
+        vertical-align: middle;
+    }
+
+    #uploadButton.disabled {
+        background-color: #999;
+    }
+    
+    #loading {
+        vertical-align: middle;
+        background-color: #FF9;
+    }
+
+
+    </style>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+	<script src="../jquery.uploader.js"></script>
+	<script>
+	
+$(function () {
+	$('#uploadButton').uploader({
+	    url : './upload.php',
+	    onStart : function (data) {
+	        $('#loading').show();
+	        this.$button.addClass('disabled');
+	    },
+	    onComplete : function (data) {
+	        $('#loading').hide();
+	        this.$button.removeClass('disabled');
+	        alert(data);
+	    }
+	});
+});
+	
+	</script>
+</head>
+<body>
+
+    <div>
+        <input type="button" id="uploadButton" value="Upload File">
+        <span id="loading" style="display:none;">Loading…</span>
+    </div>
+
+</body>
+</html>
diff --git a/demo/upload.php b/demo/upload.php
new file mode 100644
index 0000000..c5f640e
--- /dev/null
+++ b/demo/upload.php
@@ -0,0 +1,5 @@
+<?php
+
+sleep(2);
+
+echo "This is the server upload response!";
\ No newline at end of file
diff --git a/jquery.uploader.js b/jquery.uploader.js
new file mode 100644
index 0000000..67e42d6
--- /dev/null
+++ b/jquery.uploader.js
@@ -0,0 +1,85 @@
+(function ($) {
+
+
+    $.fn.uploader = function (options) {
+    
+        this.each(function (index) {
+
+            var uploaderOptions = $.extend({}, options);
+            uploaderOptions.buttonElement = this;
+            new Uploader(uploaderOptions);
+        
+        });
+    
+    }
+
+
+    function Uploader (options) {
+
+        var that = this;
+
+        this.options = $.extend({}, {
+            url : 'upload.php',
+            buttonElement : null,
+            inputName : 'ajax_file',
+            onStart : function () {},
+            onComplete : function (response) {}
+        }, options);
+    
+        this.id = ((new Date()).getTime());
+        this.$button = $(this.options.buttonElement);
+
+
+        // assemble upload form/frame mechanics
+
+        this.$form = $('<form id="uploader_form_'+this.id+
+            '" action="'+this.options.url+'" method="post" '+
+            'enctype="multipart/form-data" target="uploader_frame_'+this.id+
+            '"></form>');
+            
+        this.$frame = $('<iframe name="uploader_frame_' + this.id + '" src="about:blank" \/>');
+        this.$frame.css("display", "none");
+
+        this.$input = $('<input type="file" name="'+this.options+'">');
+        this.$input.on('change', function () {
+            that.$input.attr('disabled', 'disabled');
+            this.form.submit();
+            that.options.onStart.call(that);
+        });
+
+
+        // position upload over button
+
+        var buttonOffset = this.$button.offset();
+
+        this.$form
+            .width(this.$button.outerWidth())
+            .height(this.$button.outerHeight())
+            .css({
+                overflow : 'hidden',
+                position : 'absolute',
+                top : buttonOffset.top+'px',
+                left : buttonOffset.left+'px',
+                opacity: '0'
+            });
+
+        this.$input.css({
+            fontSize : (this.$button.outerHeight() + 20) + 'px',
+            cursor: 'pointer'
+        });
+
+        // attach to document
+
+        this.$form.append(this.$input);
+        $('body').append(this.$form).append(this.$frame);
+
+        this.$frame.on('load', function (e) {
+            var $body = $(window.frames['uploader_frame_'+that.id].document.getElementsByTagName('body')[0]);
+            that.options.onComplete.call(that, $body.html());
+            that.$input.removeAttr('disabled');
+            that.$form.get(0).reset();
+        });
+        
+    }
+
+})(jQuery);
\ No newline at end of file
