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-4">
   8         <input id="filepicker-file-upload"
   9           type="filepicker"
  10           data-fp-apikey="A5pg98pDjQk6k3lBZ8VDVz"
  11           data-fp-multiple="true"
  12           data-fp-button-class="add-note-btn"
  13           data-fp-button-text="<i class=icon-upload></i> add notes"
  14           data-fp-extensions=".pdf,.doc,.docx,.txt,.rtf,.odt,.png,.jpg,.jpeg,.ppt,.pptx,.md,.rst"
  15           data-fp-store-path="{{ course.school.slug }}/ {{ course.slug }}/"
  16           data-fp-services="COMPUTER,DROPBOX,URL,GOOGLE_DRIVE,GMAIL,EVERNOTE,BOX,FACEBOOK,FLICKR,GITHUB,SKYDRIVE,PICASA,IMAGE_SEARCH,INSTAGRAM,WEBCAM,FTP"
  17           />
  18     </div>
  19     <div class="hide-for-small columns large-6">
  20       <div id="filepicker_dropzone" class="fp_dropzone">
  21       <span id=filepicker_dropzone_result>  Drop files here </span>
  22       </div>
  23     </div>
  24   </div> <!--.row -->
  25   <div class="row" >
  26     <div class="small-10 small-offset-1 columns">
  27       <div id="forms_container">
  28       </div>
  29     </div>
  30     <div class="small-8 small-offset-1 columns large-4 small-centered">
  31       <div id="save-btn" style="display:none">
  32         <i class=icon-save></i> Save
  33       </div>
  34     </div>
  35
  36     <div id="form-template" class="row" style="display:none">
  37       <form class="inline-form" method="POST" action="{% url 'upload_post' %}">
  38         <div class="small-6 columns">
  39           <legend>Title of Note <small class="form">* Required</small></legend>
  40           <input type="text" class="intext" id="id_name" name="name"
  41                 placeholder="">
  42         </div>
  43         <div class="small-6 columns">
  44           <legend>Tags (comma seperated)</legend>
  45           <input type="text" id="id_tags" name="tags" class="taggit-tags"
  46                 placeholder="shakespeare, econ, physics">
  47         </div>
  48         <div class="hidden-fields" style="display:none;">
  49           <input type="text" id="id_fpfile" name="fpfile" class="fpurl">
  50           <input type="text" id="id_course" name="course" value="{{ course.id }}"
  51             class="course_id">
  52           {% csrf_token %}
  53           <input type="text" class="csrf" value='{{ csrf_token }}'>
  54         </div>
  55       </form>
  56     </div>
  57   </div>
  58
  59   <script>
  60     $(function(){
  61       var $dropzone = $('#filepicker_dropzone');
  62       var $dropzone_result = $('#filepicker_dropzone_result');
  63
  64
  65       /*
  66        *  load the file form template and append it to the form container
  67        *  takes a fileupload event
  68        */
  69       makeFileForm = function(upFile) {
  70         var _form = document.getElementById('form-template').cloneNode(deep=true);
  71         // FIXME: VVVVVV
  72         $(_form.children[0].children[0].children[1]).val(upFile.filename); // replace with upFile name
  73         _form.style.display = "inline";
  74         _form.id = null; // clear the unique id
  75         $(_form.children[0].children[2].children[0]).val(upFile.url);
  76         document.getElementById('forms_container').appendChild(_form);
  77       };
  78
  79       var fileup = document.getElementById('filepicker-file-upload');
  80       fileup.onchange = function(event){
  81         $dropzone_result.text(event);
  82         for (var i=0; i < event.fpfiles.length; i++){
  83           makeFileForm(event.fpfiles[i]);
  84         }
  85         document.getElementById('save-btn').style.display = 'inline';
  86
  87       };
  88
  89       filepicker.setKey('A5pg98pDjQk6k3lBZ8VDVz')
  90       filepicker.makeDropPane($dropzone[0], {
  91           multiple: true,
  92           extensions: ".pdf, .doc, .docx, .txt, .rtf, .odt, .png, .jpg, .jpeg, .ppt, .pptx, .md, .rst",
  93           path: "{{ course.school.slug }}/ {{ course.slug }}/",
  94           dragEnter: function() {
  95               $dropzone.html("Drop to upload").css({
  96                   'backgroundColor': "#E0E0E0",
  97                   'border': "1px solid #000"
  98               });
  99           },
 100           dragLeave: function() {
 101               alert("drag leave");
 102               $dropzone.html("Drop files here").css({
 103                   'backgroundColor': "#F6F6F6",
 104                   'border': "1px dashed #666"
 105               });
 106           },
 107           onSuccess: function(InkBlobs) {
 108               alert("on success");
 109               $dropzone.text("Done, see result below");
 110               $dropzone_result.text(JSON.stringify(InkBlobs));
 111               console.log("this one also worked");
 112               console.log(InkBlobs);
 113               console.log('--------------------------------------------------');
 114               console.log("starting form copy");
 115               makeFileForm();
 116           },
 117           onError: function(type, message) {
 118               alert("on error");
 119               $dropzone_result.text('('+type+') '+ message);
 120           },
 121           onProgress: function(percentage) {
 122               alert("on progress");
 123               $dropzone.text("Uploading ("+percentage+"%)");
 124           }
 125       });
 126       $('#save-btn').on('click', function(e){
 127         $('.inline-form').each(function(i,el){
 128             var name, tags, fpurl, course;
 129             name = $(el).find('.intext').val();
 130             fp_file = $(el).find('.fpurl').val();
 131             tags = $(el).find('.taggit-tags').val();
 132             course = $(el).find('.course_id').val();
 133             csrf = $(el).find('.csrf').val();
 134
 135             $.post('{% url 'upload_post' %}', {
 136               'name': name,
 137               'fp_file': fp_file,
 138               'tags': tags,
 139               'course': course,
 140               'csrfmiddlewaretoken': csrf,
 141             });
 142         });
 143       });
 144     });
 145   // TODO: js to submit all forms as POST to NEW ENDPOINT
 146   // TODO: Cancel (x) for each upload
 147   // FIXME: Style and arrange everything
 148   </script>
 149
 150
 151 </section>