MARKTPLATZ/marktplatz/templates/marktplatz/file_upload.html

{% extends "base_generic.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% crispy media media.helper %}


{% block content %}


<div class="container-fluid">

  <h3 style="margin-top: 10px">{{product.name}} Media </h3>

  <table class="table table-sm table-hover">

    {% for pic in images %}
    <tr class="">
      <td scope="col"><img src="{{  pic.image_small.url  }}?v={{ pic.pk }}" width="50" height="50" alt="{{ pic.name_for }}"> </td>
      <td scope="col"> {{pic.name_for }} </td>
      <td scope="col"> <a href="{% url 'delete-media' pk=pic.pk %}"><button type="button" class="btn btn-default"><i class="fas fa-trash-alt"></i> Löschen</button> </a> </td>
    </tr>
    {% endfor %}

    {% for pic in video %}
    <tr class="">
      <td scope="col"><img src="{{pic.image.url}}?v={{ pic.pk }}" width="50" height="50" alt="Video: {{ pic.name_for }}"> </td>
      <td scope="col"> {{pic.name_for }} </td>
      <td scope="col"> <a href="{% url 'delete-video' pk=pic.pk %}"><button type="button" class="btn btn-default"><i class="fas fa-trash-alt"></i> Löschen</button> </a></td>
    </tr>
    {% endfor %}

  </table>
  <a href="{% url 'product-detail-type' pk=product.pk type=product.type %}"> <input class="btn  mybtn border-thin" value="Show Site"></a>
</div>

<div class="">
  &nbsp;
</div>

<div class="container-fluid">

  <h4 style="margin-top: 10px">Laden Sie neue Medien hoch</h4>

  {% if warning%}
  <div class="alert alert-danger rounded-0" role="alert">
    {{warning}}
  </div>
  {% endif %}

  <p style="margin-top: 10px">Bitte laden Sie nicht mehr als sieben Bilder und zwei Videos hoch.</p>
  <p style="margin-top: 10px">Für eine optimale Darstellung sollten die Bilder eine Auflösung von 1920x1080 bzw. eine Seitenverhältnis von 16:9 (FullHD) haben.</p>

  {% if video_count and media_count%}
  <p style="margin-top: 10px">Sie haben zu viele Medienelemente hochgeladen. Sie können Medien löschen, um sie erneut hochzuladen.</p>
  {% elif video_count%}
  <p style="margin-top: 10px">Sie haben zu viele Videos hochgeladen. Stellen Sie sicher, dass Sie nur Fotos hochladen.</p>
  <link rel="stylesheet" href="{% static "ajaxuploader/css/fileuploader.css" %}">
  <script src="{% static "jquery/dist/jquery.js" %}"></script>
  <script src="{% static "ajaxuploader/js/fileuploader.js" %}"></script>
  <script src="{% static "file_form/file_form.js" %}"></script>
  <script>
    $(function() {
      initUploadFields($('#upload_mab'));
    });
  </script>


  <form id='upload_mab' enctype="multipart/form-data" method="post">
    {% csrf_token %}

    <div class="col-sm-10">
      {% crispy media %}

      {% include 'django_file_form/upload_template.html' %}
    </div>
    <div class="col-sm-10">

      <div class="buttonHolder">
        <input type="submit" name="add" class="btn  mybtn border-thin" value="Medien hinzufügen">
      </div>
    </div>

  </form>

  {% elif media_count%}
  <p style="margin-top: 10px">Sie haben zu viele Fotos hochgeladen. Stellen Sie sicher, dass Sie nur Videos hochladen.</p>
  <link rel="stylesheet" href="{% static "ajaxuploader/css/fileuploader.css" %}">

  <script src="{% static "jquery/dist/jquery.js" %}"></script>
  <script src="{% static "ajaxuploader/js/fileuploader.js" %}"></script>
  <script src="{% static "file_form/file_form.js" %}"></script>
  <script>
    $(function() {
      initUploadFields($('#upload_mab'));
    });
  </script>


  <form id='upload_mab' enctype="multipart/form-data" method="post">
    {% csrf_token %}

    <div class="col-sm-10">
      {% crispy media %}

      {% include 'django_file_form/upload_template.html' %}
    </div>
    <div class="col-sm-10">

      <div class="buttonHolder">
        <input type="submit" name="add" class="btn  mybtn border-thin" value="Medien hinzufügen">
      </div>
    </div>

  </form>
  {% else %}

  <link rel="stylesheet" href="{% static "ajaxuploader/css/fileuploader.css" %}">

  <script src="{% static "jquery/dist/jquery.js" %}"></script>
  <script src="{% static "ajaxuploader/js/fileuploader.js" %}"></script>
  <script src="{% static "file_form/file_form.js" %}"></script>
  <script>
    $(function() {
      initUploadFields($('#upload_mab'));
    });
  </script>


  <form id='upload_mab' enctype="multipart/form-data" method="post">
    {% csrf_token %}

    <div class="col-sm-10">
      {% crispy media %}

      {% include 'django_file_form/upload_template.html' %}
    </div>
    <div class="col-sm-10">

      <div class="buttonHolder">
        <input type="submit" name="add" class="btn  mybtn border-thin" value="Medien hinzufügen">
      </div>
    </div>

  </form>


  {% endif %}

</div>

<div class="">
  &nbsp;
</div>

{% endblock %}