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