karmaworld/templates/partial/filepicker.html

   1 {% load url from future %}
   2 {% include 'partial/opentip.html' %}
   3 <section id=filepicker-form class="extend-form">
   4 <!-- Javascript -->
   5 <script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
   6   <div class="row" id="">
   7     <div class="small-8 small-offset-1 columns large-10">
   8         <input id="filepicker-file-upload"
   9           type="filepicker-dragdrop"
  10           data-fp-apikey="A5pg98pDjQk6k3lBZ8VDVz"
  11           data-fp-multiple="true"
  12           data-fp-folders="true"
  13           data-fp-button-class="add-note-btn small-10 columns large-4"
  14           data-fp-button-text="<i class=icon-upload></i> add notes"
  15           data-fp-drag-text="Drop Some Knowledge"
  16           data-fp-drag-class="dragdrop show-for-medium-up large-7 columns"
  17           data-fp-extensions=".pdf,.doc,.docx,.txt,.rtf,.odt,.png,.jpg,.jpeg,.ppt,.pptx"
  18           data-fp-store-path="{{ course.school.slug }}/ {{ course.slug }}/"
  19           data-fp-store-location="S3"
  20           data-fp-services="COMPUTER,DROPBOX,URL,GOOGLE_DRIVE,GMAIL,BOX,FACEBOOK,FLICKR,GITHUB,SKYDRIVE,PICASA,IMAGE_SEARCH,WEBCAM,FTP"
  21           />
  22     </div>
  23   </div> <!--.row -->
  24   <div class="row" >
  25     <div class="small-10 small-offset-1 columns">
  26       <div id="forms_container">
  27       </div>
  28       <div id="success" style="display: none;">
  29           <p>Thank you for sharing:</p>
  30           <ul id="uploaded_files">
  31           </ul>
  32           <p>Your files are being processed and should be viewable within a few minutes.</p>
  33           <p>If you'd like to share again, please <a href="">click here</a>.</p>
  34       </div>
  35     </div>
  36
  37     <div id="form-template" class="row" style="display:none">
  38       <form class="inline-form" method="POST" action="{% url 'upload_post' %}">
  39         <div class="small-11 large-6 columns">
  40           <legend>Title of Note <small class="form">* Required</small></legend>
  41           <input type="text" class="intext" id="id_name" name="name"
  42                 placeholder="">
  43         </div>
  44         <div class="small-12 large-5 columns">
  45           <legend>Tags (comma seperated)</legend>
  46           <input type="text" id="id_tags" name="tags" class="taggit-tags"
  47                 placeholder="shakespeare, econ, physics">
  48         </div>
  49         <div class="show-for-small columns small-1 end">
  50           <i class="icon-remove-sign awesome-action remove"></i>
  51         </div>
  52         <div class="hidden-fields" style="display:none;">
  53           <input type="text" id="id_fpfile" name="fpfile" class="fpurl">
  54           <input type="text" id="id_mimetype" name="mimetype" class="mimetype">
  55           <input type="text" id="id_course" name="course" value="{{ course.id }}"
  56             class="course_id">
  57           {% csrf_token %}
  58           <input type="text" class="csrf" value='{{ csrf_token }}'>
  59         </div>
  60         <div class="show-for-medium-up columns large-1 end">
  61           <i class="icon-remove-sign awesome-action remove" id="icon-remove-sign"></i>
  62         </div>
  63       </form>
  64     </div>
  65   </div>
  66   <div class="small-8 small-offset-3 columns large-2">
  67     <div id="save-btn" style="display:none">
  68       <i class=icon-save></i> Save
  69     </div>
  70   </div>
  71
  72   <script>
  73     var uploaded_files = new Array();
  74     $(function(){
  75       // these are obsolete without the drag-drop widget that we removed from the partial above
  76       // var $dropzone = $('#filepicker_dropzone');
  77       var $dropzone_result = $('#filepicker_dropzone_result');
  78
  79
  80       /*
  81        *  load the file form template and append it to the form container
  82        *  takes a fileupload event
  83        */
  84       makeFileForm = function(upFile) {
  85         var _form = document.getElementById('form-template').cloneNode(deep=true);
  86         // save the Filename to the form name field
  87         $(_form.children[0].children[0].children[1]).val(upFile.filename); // replace with upFile name
  88         _form.style.display = "inline";
  89         _form.id = null; // clear the unique id
  90         // save the FP url to the form
  91         $(_form.children[0].children[3].children[0]).val(upFile.url);
  92         console.log(upFile);
  93         // save the mimetype to the form
  94         $(_form.children[0].children[3].children[1]).val(upFile.mimetype);
  95
  96         document.getElementById('forms_container').appendChild(_form);
  97
  98         _gat._getTracker()._trackEvent('upload', 'filepicker file drop');
  99
 100         $('.remove').on('click', function(e){
 101             e.stopPropagation();
 102             console.log($(this).parent().parent());
 103             $(this).parent().parent().remove();
 104         });
 105
 106         document.getElementById('save-btn').style.display = 'inline';
 107
 108         $('#save-btn').on('click', function(e){
 109           e.stopPropagation();
 110           $('#forms_container .inline-form').each(function(i,el){
 111               console.log("inline form " + i + "el: " + el);
 112               var name, tags, fpurl, course;
 113               name = $(el).find('.intext').val();
 114               fp_file = $(el).find('.fpurl').val();
 115               tags = $(el).find('.taggit-tags').val();
 116               course = $(el).find('.course_id').val();
 117               csrf = $(el).find('.csrf').val();
 118               mimetype = $(el).find('.mimetype').val();
 119
 120               $.post('{% url 'upload_post' %}', {
 121                 'name': name,
 122                 'fp_file': fp_file,
 123                 'tags': tags,
 124                 'course': course,
 125                 'csrfmiddlewaretoken': csrf,
 126                 'mimetype': mimetype
 127               }, function(data){
 128                 if (data === 'success') {
 129                   // For multiple uploads, we may end up clearing and re-
 130                   //  writing this multiple times, but show the same list
 131                   //  each time.
 132                   $('#uploaded_files').empty();
 133                   for (var i=0; i < uploaded_files.length; i++) {
 134                     $('#uploaded_files').append($('<li>', {text: uploaded_files[i]}));
 135                   }
 136                   $('#success').show();
 137                   document.getElementById('save-btn').style.display = 'none';
 138                   $('#forms_container .inline-form').remove();
 139                   _gat._getTracker()._trackEvent('upload', 'upload form submitted');
 140                   setTimeout(function(){
 141                     location.reload(true);
 142                   }, 15000);
 143                 }
 144               });
 145               // Add the name we've just uploaded to the list
 146               uploaded_files.push(name);
 147           });
 148         });
 149
 150       };
 151
 152       var fileup = document.getElementById('filepicker-file-upload');
 153       fileup.onchange = function(event){
 154         $dropzone_result.text(event);
 155           for (var i=0; i < event.fpfiles.length; i++){
 156             makeFileForm(event.fpfiles[i]);
 157           }
 158       };
 159
 160     });
 161   </script>
 162
 163
 164 </section>