karmaworld/templates/partial/filepicker.html

   1 {% load url from future %}
   2 {% load socialaccount_tags %}
   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="filepicker_row">
   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='fa fa-arrow-circle-o-up'></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-mimetypes="*/*"
  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,EVERNOTE,GMAIL,BOX,FACEBOOK,FLICKR,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" class="hide">
  29         <p>Thank you for sharing:</p>
  30         <ul id="uploaded_files">
  31         </ul>
  32         {% if not request.user.is_authenticated %}
  33           <p>We'd love to have you sign up so you can claim the notes you just uploaded, and
  34           build a reputation for uploading great notes.</p>
  35           <div class="socialaccount_ballot">
  36             <ul class="socialaccount_providers">
  37               {% include "socialaccount/snippets/provider_list.html" with process="login" %}
  38             </ul>
  39             <a href="{{ signup_url }}">Sign up for a traditional account</a>
  40           </div>
  41         {% endif %}
  42       </div>
  43     </div>
  44
  45     <div id="form-template" class="row" style="display:none">
  46       <form class="inline-form" method="POST" action="{% url 'upload_post' %}">
  47         <div class="small-11 large-6 columns">
  48           <legend>Title of Note <small class="form">* Required</small></legend>
  49           <input type="text" class="intext" id="id_name" name="name"
  50                 placeholder="">
  51         </div>
  52         <div class="small-12 large-5 columns">
  53           <legend>Tags (comma seperated)</legend>
  54           <input type="text" id="id_tags" name="tags" class="taggit-tags"
  55                 placeholder="shakespeare, econ, physics">
  56         </div>
  57         <div class="show-for-small columns small-1 end">
  58           <i class="fa fa-times-circle awesome-action remove"></i>
  59         </div>
  60         <div class="hidden-fields" style="display:none;">
  61           <input type="text" id="id_fpfile" name="fpfile" class="fpurl">
  62           <input type="text" id="id_mimetype" name="mimetype" class="mimetype">
  63           <input type="text" id="id_course" name="course" value="{{ course.id }}"
  64             class="course_id">
  65           {% csrf_token %}
  66           <input type="text" class="csrf" value='{{ csrf_token }}'>
  67         </div>
  68         <div class="show-for-medium-up columns large-1 end">
  69           <i class="fa fa-times-circle awesome-action remove" id="icon-remove-sign"></i>
  70         </div>
  71       </form>
  72     </div>
  73   </div>
  74   <div class="small-8 small-offset-3 columns large-2">
  75     <div id="save-btn" class="hide">
  76       <i class="fa fa-save"></i> Save
  77     </div>
  78   </div>
  79
  80   <script>
  81     var uploaded_files = new Array();
  82     $(function(){
  83       // these are obsolete without the drag-drop widget that we removed from the partial above
  84       // var $dropzone = $('#filepicker_dropzone');
  85       var $dropzone_result = $('#filepicker_dropzone_result');
  86
  87
  88       /*
  89        *  load the file form template and append it to the form container
  90        *  takes a fileupload event
  91        */
  92       makeFileForm = function(upFile) {
  93         var _form = document.getElementById('form-template').cloneNode(deep=true);
  94         // save the Filename to the form name field
  95         $(_form.children[0].children[0].children[1]).val(upFile.filename); // replace with upFile name
  96         _form.style.display = "inline";
  97         _form.id = null; // clear the unique id
  98         // save the FP url to the form
  99         $(_form.children[0].children[3].children[0]).val(upFile.url);
 100         console.log(upFile);
 101         // save the mimetype to the form
 102         $(_form.children[0].children[3].children[1]).val(upFile.mimetype);
 103
 104         document.getElementById('forms_container').appendChild(_form);
 105
 106         if (document.location.host === 'www.karmanotes.org' ||
 107           document.location.host === 'karmanotes.org') {
 108           _gat._getTracker()._trackEvent('upload', 'filepicker file drop');
 109         }
 110
 111         $('.remove').on('click', function(e){
 112             e.stopPropagation();
 113             console.log($(this).parent().parent());
 114             $(this).parent().parent().remove();
 115         });
 116
 117         $('#save-btn').show();
 118       }
 119
 120       $('#save-btn').on('click', function(e){
 121         e.stopPropagation();
 122         $('#forms_container .inline-form').each(function(i,el){
 123             console.log("inline form " + i + "el: " + el);
 124             var name, tags, fpurl, course;
 125             name = $(el).find('.intext').val();
 126             fp_file = $(el).find('.fpurl').val();
 127             tags = $(el).find('.taggit-tags').val();
 128             course = $(el).find('.course_id').val();
 129             csrf = $(el).find('.csrf').val();
 130             email = $('#id_email').val();
 131             mimetype = $(el).find('.mimetype').val();
 132
 133             $.post('{% url 'upload_post' %}', {
 134               'name': name,
 135               'fp_file': fp_file,
 136               'tags': tags,
 137               'course': course,
 138               'csrfmiddlewaretoken': csrf,
 139               'mimetype': mimetype,
 140               'email': email
 141             }, function(data){
 142               if (data === 'success') {
 143                 // For multiple uploads, we may end up clearing and re-
 144                 //  writing this multiple times, but show the same list
 145                 //  each time.
 146                 $('#uploaded_files').empty();
 147                 for (var i=0; i < uploaded_files.length; i++) {
 148                   $('#uploaded_files').append($('<li>', {text: uploaded_files[i]}));
 149                 }
 150                 $('#success').show();
 151                 $('#save-btn').hide();
 152                 $('#filepicker_row').hide();
 153                 $('#forms_container .inline-form').remove();
 154                 if (document.location.host === 'www.karmanotes.org' ||
 155                   document.location.host === 'karmanotes.org') {
 156                   _gat._getTracker()._trackEvent('upload', 'upload form submitted');
 157                 }
 158               }
 159             });
 160             // Add the name we've just uploaded to the list
 161             uploaded_files.push(name);
 162         });
 163       });
 164
 165       var fileup = document.getElementById('filepicker-file-upload');
 166       fileup.onchange = function(event){
 167         $dropzone_result.text(event);
 168           for (var i=0; i < event.fpfiles.length; i++){
 169             makeFileForm(event.fpfiles[i]);
 170           }
 171       };
 172
 173     });
 174   </script>
 175
 176
 177 </section>