karmaworld/assets/js/lightboxupload.js

   1 $(function(){
   2
   3   // Show the 'add note' form
   4   // first, instantiate the fileuploader on page load
   5   // TODO: connect it to the '^ save' form submit
   6   // Show the upload lightbox on upload button click
   7
   8   $('#add-note-btn').click(function(){
   9     // show the add note form
  10     // TODO: rewrite to .show the form with a slide transition
  11     $('#add-note-form').show();
  12     // Bring up the file picker automatically
  13     $('input#file_upload_input').click();
  14     // hide the add a note button
  15     $('#add-note-btn').hide();
  16   });
  17
  18   // Dismiss x click
  19   // FIXME:
  20   $(".lightbox_close").click(function() {
  21     $(".modal_content").hide();
  22   });
  23
  24   var uploader = new qq.FileUploader( {
  25       action: ajax_upload_url, // added to page via template var
  26       element: $('#file-uploader')[0],
  27       multiple: false,
  28
  29       onComplete: function( id, fileName, responseJSON ) {
  30         if( responseJSON.success ) {
  31           console.log("responseJSON.note_url " + responseJSON.note_url);
  32           // activate the form for submitting
  33           $('form#add-note').attr('action', responseJSON.note_url);
  34           // inform the user of success
  35           $('#add-note-status').text('Uploaded');
  36           // TODO: activate the save button
  37           $('#save-btn').removeClass('disabled');
  38           // add the save url to form as ACTION
  39
  40           // add a click handler to submit the add-note form
  41           $('#save-btn').click(function(){
  42             $('form#add-note').submit();
  43           });
  44
  45         }
  46       },
  47       onAllComplete: function( uploads ) {
  48         // uploads is an array of maps
  49         // the maps look like this: { file: FileObject, response: JSONServerResponse }
  50         console.log( "All complete!" ) ;
  51         // TODO: set a success state
  52       },
  53       onProgress: function(id, fileName, loaded, total) {
  54         console.log("running onProgress " + fileName + " " + loaded);
  55         console.log(String((100*loaded/total)+'%'));
  56         // Animate the progress bar
  57         $('#progress-fill').animate({
  58           width: String((100*loaded/total)+'%')}, 5000);
  59         // fill out the filename
  60         $('#filename').text(fileName);
  61       },
  62       params: {
  63         'csrf_token': csrf_token,
  64         'csrf_name': 'csrfmiddlewaretoken',
  65         'csrf_xname': 'X-CSRFToken',
  66         'course_id': courseId, // added to page via template var
  67       },
  68     }) ;
  69 });