karmaworld/assets/js/lightboxupload.js

   1 $(function(){
   2
   3   var showForm = function() {
   4     $('#add-note-form').show();
   5     $('#add-note-btn').hide();
   6   };
   7   var hideForm = function() {
   8     $('#add-note-form').hide();
   9     $('#add-note-btn').show();
  10   };
  11
  12   // some but not all validation happens here
  13   var validateAndSubmit = function() {
  14     var year = $('#id_year').val()
  15     if (year.match(/\d{4}/) || year === '') {
  16       $('form#add-note').submit();
  17     } else {
  18       $("#id_year").css({'background-color': '#f05a28'});
  19       console.log('Date is invalid');
  20     };
  21   };
  22
  23   // check if we arrived at this page planning on uploading a note
  24   if(window.location.hash) {
  25
  26     // Get the first hash, remove the # character
  27     var hash = window.location.hash.substring(1);
  28     if (hash === 'upload-note'){
  29       showForm();
  30     }
  31   }
  32
  33   $('#add-note-btn').click(function(){
  34     // hide the thankyou message on add-another uploads
  35     $('#thankyou-wrapper').hide();
  36     showForm();
  37     // Bring up the file picker automatically
  38     $('input#file_upload_input').click();
  39     // disable the save button -- it will be enabled when the upload is complete
  40     $('#save-btn').addClass('disabled');
  41   });
  42
  43
  44   // Dismiss x click
  45   $(".icon-remove-sign").click(function() {
  46     hideForm();
  47   });
  48
  49   var uploader = new qq.FileUploader( {
  50       action: ajax_upload_url, // added to page via template var
  51       element: $('#file-uploader')[0],
  52       multiple: false,
  53
  54       onSubmit: function (id, fileName) {
  55         $('#file-uploader').hide();
  56         $('div.upload-status').show();
  57         // hide the button added by qq
  58         $('#file-uploader').hide();
  59         // show the progress bar
  60         $('div.upload-status').show();
  61         console.log('fileName:', fileName);
  62       },
  63       onError: function (id, fileName, errorReason) {
  64         console.log('FileUploader error:', errorReason);
  65       },
  66       onCancel: function (id, fileName) {
  67         console.log('FileUploader cancel:', onCancel);
  68       },
  69       onComplete: function( id, fileName, responseJSON ) {
  70         if( responseJSON.success ) {
  71           console.log("responseJSON.note_url " + responseJSON.note_url);
  72           // activate the form for submitting
  73           $('form#add-note').attr('action', responseJSON.note_url);
  74           // inform the user of success
  75           $('#add-note-status').text('Uploaded');
  76           // activate the save button
  77           $('#save-btn').removeClass('disabled');
  78           // add a click handler to submit the add-note form
  79           $('#save-btn').click(function(){
  80             validateAndSubmit();
  81           });
  82         }
  83       },
  84       onAllComplete: function( uploads ) {
  85         // uploads is an array of maps
  86         // the maps look like this: { file: FileObject, response: JSONServerResponse }
  87         console.log( "All complete!" );
  88       },
  89       onProgress: function(id, fileName, loaded, total) {
  90         console.log("running onProgress " + fileName + " " + loaded);
  91         console.log(String((100*loaded/total)+'%'));
  92         // Animate the progress bar
  93         $('#progress-fill').animate({
  94           width: String((100*loaded/total)+'%')}, 200);
  95         // fill out the filename
  96         $('#filename').text(fileName);
  97         $('#id_name').attr('placeholder', fileName);
  98       },
  99       params: {
 100         'csrf_token': csrf_token,
 101         'csrf_name': 'csrfmiddlewaretoken',
 102         'csrf_xname': 'X-CSRFToken',
 103         'course_id': courseId, // added to page via template var
 104       },
 105     }) ;
 106 });