rowsandall/rowers/templates/document_form.html

{% extends "base.html" %}
{% load staticfiles %}
{% load rowerfilters %}

{% block title %}File loading{% endblock %}

{% block meta %}
    <script type='text/javascript'
      src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
    </script>
    <script type='text/javascript'
            src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js'>
    </script>
    <script>
      $(document).ready(function() {
      $('#id_file').on('change', function(evt) {
      var f = this.files[0];
      var istcx = false;
      var isgzip = false;
      var size1 = 10485760;
      var size2 = 1048576;
      if ((/\.(tcx|TCX)/i).test(f.name)) {
        istcx = true;
        console.log('tcx');
        if ((/\.(gz|GZ)/i).test(f.name)) {
          isgzip = true;
          console.log('gzip');
          size1 /= 5;
      size2 /= 5;
      }
      }
      console.log(f);
      console.log(size1)
      console.log(size2)
      if (f.size > size1) {
        alert("File Size must be smaller than 10 MB");
        this.value = null;
      }
      if (f.size > size2) {
      $('#id_offline').val('True');
      $('#id_offline').prop('checked','True');
      console.log("Set offline to True");
      $('#extra_message').text('Because of the large size, we recommend to use  background processing. You will receive email when it is done. The extra actions will not be performed.');
      $('#extra_message').addClass('message');      
      }
      });
      });
    </script>
{% endblock %}

    {% block content %}
    <div id="id_drop-files" class="grid_12 drop-files">
    <form id="file_form" enctype="multipart/form-data" action="{{ formloc }}" method="post">
<div id="left" class="grid_6 alpha">
  <h1>Upload Workout File</h1>
  {% if user.is_authenticated and user|is_manager %}
  <p>Looking for <a href="/rowers/workout/upload/team/">Team Manager
      Upload?</a></p>
  {% endif %}
    {% if form.errors %}
        <p style="color: red;">
            Please correct the error{{ form.errors|pluralize }} below.
        </p>
    {% endif %}

        <table>
            {{ form.as_table }}
        </table>
        {% csrf_token %}
   <div id="formbutton" class="grid_1 prefix_4 suffix_1">
        <input class="button green" type="submit" value="Submit">
   </div>
</div>
<div id="right" class="grid_6 omega">
	<h1>Optional extra actions</h1>
	<p>
	<table>
	    {{ optionsform.as_table }}

	</table>
	</p>
        <p>
          You can select one static plot to be generated immediately for
          this workout. You can select to export to major fitness
          platforms automatically.
          If you check "make private", this workout will not be visible to your followers and will not show up in your teams' workouts list. With the Landing Page option, you can select to which (workout related) page you will be
          taken after a successfull upload.
        </p>
        
</div>



    </form>
    </div>
{% endblock %}

    {% block scripts %}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>   
  $(document).ready(function() {
  console.log("Loading dropper");
  jQuery.event.props.push('dataTransfer');

  
  var frm = $("#file_form");
  var data = new FormData(frm[0]);

  $('input').each(function( i ) {
  console.log($(this).attr('name'),$(this).val());
  $(this).change(function() {
  data.set($(this).attr('name'),$(this).val());
  if ($(this).attr('id') == 'id_file') {
  data.set("file",this.files[0]);
  };
  console.log($(this).attr('name'),$(this).val());
  });
  });
  
  $('select').each(function( i ) {
  console.log($(this).attr('name'),$(this).val());
  $(this).change(function() {
  data.set($(this).attr('name'),$(this).val());
  console.log($(this).attr('id'),$(this).attr('name'),$(this).val());
  });
  });
  
  frm.submit(function() {
  console.log("Form submission");
  console.log(data);
  $.ajax({
  data: data,
  type: $(this).attr('method'),
  url: '/rowers/workout/upload_ajax/',
  contentType: false,
  processData: false,
  success: function(result) {
  console.log('got something back');
  console.log(result);
  if (result.result == 1) {
  window.location.href = result.url;
  }
  }
  });
  return false;
  });

  $('#id_drop-files').bind({
  drop: function(e) {
  e.preventDefault();
  console.log("you dropped something");
  var files = e.dataTransfer.files;
  console.log(files[0]);
  data.append("file",files[0]);
  $("#id_file").replaceWith('<div id="id_file">'+files[0].name+'</div>');
  },
  mouseenter:function(){$("#id_drop-files").css("background-color","#E9E9E4");},
  mouseleave:function(){$("#id_drop-files").css("background-color","#FFFFFF");},
  dragover:function(e){
  e.preventDefault();
  $("#id_drop-files").css("background-color","#E9E9E4");},
  dragleave:function(e){ e.preventDefault();},
  });
  })
</script>
    {% endblock %}