Misago/misago/templates/_misago/usercp/upload_avatar.html

{% extends "misago/usercp/base.html" %}
{% load i18n staticfiles %}


{% block title %}
{% trans "Upload avatar" %}{{ block.super }}
{% endblock title %}


{% block page %}
<div class="form-panel">
  <form method="POST" role="form" class="upload-form">
    {% csrf_token %}

    <div class="form-header">
      <h2>
        <span class="fa fa-image"></span>
        {% trans "Upload avatar" %}
      </h2>
    </div>

    <div id="image-preview" class="form-avatar-preview form-body form-text" style="display: none;">
      <div class="preview-image pull-left">
        <img class="preview">
      </div>
      <p class="lead pull-left"></p>
      <a href="{% url 'misago:usercp_crop_new_avatar' %}" class="btn btn-primary pull-right">
        <span class="fa fa-arrows-alt"></span>
        {% trans "Crop image" %}
      </a>
    </div>

    <div class="form-body form-avatar-upload">
      <div id="image-drop" class="drag-drop-area">
        <span class="fa fa-upload"></span>
        <h3>{% trans "Click or drag and drop here image from your computer" %}</h3>
        <p>
          {% blocktrans trimmed with limit=upload_limit|filesizeformat %}
            Must be jpg, gif or png image file no bigger than {{ limit }}.
          {%  endblocktrans %}
        </p>
      </div>
    </div>

    <div class="form-footer">
      <a href="{% url 'misago:usercp_change_avatar' %}" class="btn btn-default">{% trans "Cancel" %}</a>
    </div>
  </form>
</div>
{% endblock page %}


{% block javascripts %}
<script type="text/javascript" src="{% static "misago/js/dropzone.js" %}" charset="utf-8"></script>
<script type="text/javascript">
  $(function() {
    var csrf_token = $("input[name=csrfmiddlewaretoken]").val();
    var $preview = $('#image-preview');

    var $droparea = $('#image-drop');
    $droparea.dropzone({
      dictResponseError: "{% trans "Error occured when uploading file." %}",
      paramName: "new-avatar",
      clickable: true,
      uploadMultiple: false,
      maxFilesize: {{ upload_limit_mb }},
      dictFileTooBig: "{% trans "Uploaded file is too big" %}",
      acceptedFiles: "{{ allowed_extensions|add:allowed_mime_types|join:',' }}",
      dictInvalidFileType: "{% trans "Uploaded file type is not allowed." %}",
      headers: {'X-CSRFToken': csrf_token},
      url: "{% url 'misago:usercp_upload_avatar_handler' %}",
      success: function(avatar, message) {
        var reader = new FileReader();
        reader.onloadend = function() {
          $preview.find('img').attr('src', reader.result)
        };
        reader.readAsDataURL(avatar);

        $preview.find('p').text(avatar.name);
        $preview.slideDown();
      },
      error: function(avatar, message, xhr) {
        if (xhr != undefined) {
          if (message.message != undefined) {
            Misago.Alerts.error(message.message);
          } else {
            Misago.Alerts.error("{% trans "Error occured when sending file to server." %}");
          }
        } else {
          Misago.Alerts.error(message);
        }
      },
      addedfile: function(file) {
        // suppress default behaviour
      }
    });
  });
</script>
{% endblock %}