fixing filepicker upload behavior - keep upload botton visible when user cancels...

diff --git a/karmaworld/assets/js/lightboxupload.js b/karmaworld/assets/js/lightboxupload.js
index a49f996d1100adf854c155b60bbb318a3cffa4d7..0dd94763343196e481f9dcebf408e2d51e4cdd0e 100644 (file)
--- a/karmaworld/assets/js/lightboxupload.js
+++ b/karmaworld/assets/js/lightboxupload.js
@@ -12,14 +12,11 @@ $(function(){
     var hash = window.location.hash.substring(1);
     if (hash === 'add-note'){
       $('#add-note-form').show();
-      $('div.upload-status').hide();
       $('#add-note-btn').hide();
     }
   }
 
   $('#add-note-btn').click(function(){
-    // hide the button added by qq
-    $('#file-uploader').hide();
     // show the add note form
     // TODO: rewrite to .show the form with a slide transition
     $('#add-note-form').show();
@@ -43,8 +40,18 @@ $(function(){
       onSubmit: function (id, fileName) {
         $('#file-uploader').hide();
         $('div.upload-status').show();
+        // hide the button added by qq
+        $('#file-uploader').hide();
+        // show the progress bar
+        $('div.upload-status').show();
+        console.log('fileName:', fileName);
+      },
+      onError: function (id, fileName, errorReason) {
+        console.log('FileUploader error:', errorReason);
+      },
+      onCancel: function (id, fileName) {
+        console.log('FileUploader cancel:', onCancel);
       },
-
       onComplete: function( id, fileName, responseJSON ) {
         if( responseJSON.success ) {
           console.log("responseJSON.note_url " + responseJSON.note_url);

diff --git a/karmaworld/templates/partial/add_note.html b/karmaworld/templates/partial/add_note.html
index 58c025eecd6403c565eccd60ef136e90f43cf8a4..202297afb39f60ac1c8f7ca5084c370793e1fee3 100644 (file)
--- a/karmaworld/templates/partial/add_note.html
+++ b/karmaworld/templates/partial/add_note.html
@@ -9,7 +9,7 @@
   <form id=add-note method="POST">
     {% csrf_token %}
     <div class="row">
-      <div class="four columns offset-by-one upload-status">
+      <div class="four columns offset-by-one upload-status" style="display:none">
         <legend><span id=add-note-status>Uploading</span> <span id=filename>note</span>...</legend>
         <div class=progress> <div id="progress-fill"></div> </div>
       </div>