Added callback example + new minified version

assets/css/application.css

@@ -51,20 +51,20 @@ hr {
   border-bottom: 1px solid #bdc3c7;
   margin: 30px 0; }
 
-#image-preview {
+#image-preview, #callback-preview {
   width: 400px;
   height: 400px;
   position: relative;
   overflow: hidden;
   background-color: #ffffff;
   color: #ecf0f1; }
-  #image-preview input {
+  #image-preview input, #callback-preview input {
     line-height: 200px;
     font-size: 200px;
     position: absolute;
     opacity: 0;
     z-index: 10; }
-  #image-preview label {
+  #image-preview label, #callback-preview label {
     position: absolute;
     z-index: 5;
     opacity: 0.8;

assets/css/application.scss

@@ -61,7 +61,7 @@ hr {
   margin: 30px 0;
 }
 
-#image-preview {
+#image-preview, #callback-preview {
   width: 400px;
   height: 400px;
   position: relative;

index.html

@@ -18,6 +18,15 @@
         preview_box: "#audio-preview",
         no_label: true
       });
+
+      $.uploadPreview({
+        input_field: "#callback-upload",
+        preview_box: "#callback-preview",
+        label_field: "#callback-label",
+        success_callback: function() {
+          alert("File will now be previewed");
+        }
+      });
     });
     </script>
     <link rel="stylesheet" href="assets/css/application.css" type="text/css" />
@@ -144,6 +153,29 @@ <h2>Image File Example</h2>
 
     <hr />
 
+    <h2>Callback Example</h2>
+<pre>
+&lt;script type="text/javascript"&gt;
+$(document).ready(function() {
+  $.uploadPreview({
+    input_field: "#callback-upload",
+    preview_box: "#callback-preview",
+    label_field: "#callback-label",
+    success_callback: function() {
+      alert("File will now be previewed");
+    }
+  });
+});
+&lt;/script&gt;
+</pre>
+
+    <div id="callback-preview">
+      <label for="callback-upload" id="callback-label">Choose File</label>
+      <input type="file" name="image" id="callback-upload" />
+    </div>
+
+    <hr />
+
     <h2>Audio File Example</h2>
 <pre>
 &lt;style type="text/css"&gt;