rowsandall/rowers/templates/image_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='https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js'>
</script>
<script>
</script>
{% endblock %}

{% block content %}
<div id="id_dropregion" class="grid_12 alpha watermark invisible">
  <p>Drag and drop files here </p>
  </div>
    <div id="id_drop-files" class="grid_12 alpha drop-files">
    <form id="file_form" enctype="multipart/form-data" action="{{ formloc }}" method="post">
<div id="left" class="grid_6 alpha">
  <h1>Upload Image</h1>
    {% 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">
  &nbsp;        
</div>



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

    {% block scripts %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      var td = new FormData();
      var formdatasetok = false;
      try {
      td.set('aap','noot');
      formdatasetok = true;
      console.log('FormData.set OK');
      }
  catch(err) {
  console.log('FormData.set not OK');
  formdatasetok = false;
  }

      if (!formdatasetok) {
      $("#id_dropregion").remove();
      }
      
  if (formdatasetok) {
      
  $(document).ready(function() {
  var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
  console.log("CSRF token",csrftoken);
  
  function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }
  $.ajaxSetup({
  beforeSend: function(xhr, settings) {
  if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
  xhr.setRequestHeader("X-CSRFToken", csrftoken);
  }
  }
  });
  console.log("Loading dropper");
  jQuery.event.props.push('dataTransfer');

      $(window).on('dragenter', function() {
      $("#id_drop-files").css("background-color","#E9E9E4");
      $("#id_dropregion").addClass("watermark").removeClass("invisible");})
      
      $(window).on('dragleave', function() {
      $("#id_drop-files").css("background-color","#FFFFFF");
      $("#id_dropregion").removeClass("watermark").addClass("invisible");})
      
  var frm = $("#file_form");

  if( window.FormData === undefined ) {
  console.log('no formdata');
  alert("No FormData");
  } else {
  console.log('we have formdata');
  }
  
  var data = new FormData(frm[0]);


  $('#id_file').on('change', function(evt) {
     var f = this.files[0];
  console.log(f);
    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(size1)
  console.log(size2)
  if (f.size > size1) {
  alert("File Size must be smaller than 10 MB");
  this.value = null;
  } else {

  if (f.size > size2) {
  $('#id_offline').val('True');
  $('#id_offline').prop('checked','True');
  data.set($('#id_offline').attr('name'),$('#id_offline').prop('checked'));
  console.log("Set offline to True");
}
  }

});  

  $('input').each(function( i ) {
  $(this).change(function() {
  if ($(this).attr('type') == 'checkbox') {
    data.set($(this).attr('name'),$(this).prop('checked'));
    console.log($(this).attr('id'),$(this).attr('name'),$(this).prop('checked'));
  } else {
    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");
  $(data.values()).each(function(value) {
  console.log(value);
  });

  $("#id_drop-files").replaceWith(
  '<div id="id_waiting"><img src="/static/img/rowingtimer.gif" width="120" height="100">'
  );
  $.ajax({
    data: data,
    type: $(this).attr('method'),
    url: '/rowers/workout/{{ workout.id }}/image',
    contentType: false,
    processData: false,
    error: function(result) {
    $("#id_waiting").replaceWith(
    '<div id="id_failed" class="grid_12 alpha message">Your upload failed</div>'
    );
    setTimeout(function() {
    location.reload();
    },1000);
    },
    success: function(result) {
    console.log('got something back');
        console.log(result);
    if (result.result == 1) {
        window.location.href = result.url;
        } else {
        console.log(result," reloading");
        location.reload();
        };
    } 
    });
  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]);

    var f = 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");
    $("#id_file").value = 0;
    return false;
    }
        data.set("file",f);        
//    data.append("file",f);

        $("#id_file").replaceWith('<div id="id_file">'+files[0].name+'&nbsp; <a class="remove" href="javascript:void(0);"><b><font color="red">X</font></b></a></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();},
    });
    $(document).on("click", "a.remove", function() {
    $(this).parent().replaceWith('<td><input id="id_file" name="file" type="file" /></td>');
    });
  });
};
    </script>

    {% endblock %}