Download as
Browse Code »

Commit fb8794906d9c51e384fa3bc94134afad4a4bec00

Authored by Zambom
1 parent 3b3a261f
Exists in master and in 2 other branches amadeus_univasf, refactoring

Adjusting bugs involving images in user registration

Showing 1 changed file with 89 additions and 24 deletions   Show diff stats
users/templates/users/register.html
  Diff comments   View file @fb87949
... ... @@ -41,22 +41,37 @@
41 41 </div>
42 42 </div>
43 43  
44   - <form class="{% if form.has_error %} has-error {% endif %} form-horizontal is-fileinput" method="post" enctype="multipart/form-data" id="formUpload">
  44 + <form class="{% if form.has_error %} has-error {% endif %} form-horizontal is-fileinput" method="post" enctype="multipart/form-data" id="user-form">
45 45 {% csrf_token %}
46 46 {% for field in form %}
47 47 <div class="col-lg-12 col-md-12 col-sm-12">
48 48 <div class="form-group form-group-md">
49 49 <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12">
50 50 {% if field.auto_id == 'id_image' %}
51   - {% render_field field class='form-control' %}
52   - <div class="input-group">
53   - <input type="text" readonly="" class="form-control" id="pic_holder" placeholder="{% trans 'Choose your photo...' %}">
54   - <span class="input-group-btn">
55   - <button type="button" class="btn btn-fab btn-fab-mini">
56   - <i class="material-icons">image</i>
57   - </button>
58   - </span>
59   - </div>
  51 + <label for="{{ field.auto_id }}">{{ field.label }}</label>
  52 +
  53 + {% render_field field class='form-control file-selector' %}
  54 +
  55 + <div class="input-group common-file-input">
  56 + <input type="text" readonly="" class="form-control" placeholder="{% trans 'Choose your photo...' %}">
  57 + <span class="input-group-btn input-group-sm">
  58 + <button type="button" class="btn btn-fab btn-fab-mini">
  59 + <i class="material-icons">attach_file</i>
  60 + </button>
  61 + </span>
  62 + </div>
  63 +
  64 + <div class="filedrag">
  65 + {% if acc.image %}
  66 + <i class="fa fa-file-archive-o"></i> <br />
  67 +
  68 + <small>{{ acc.image.path }}</small>
  69 + {% else %}
  70 + {% trans 'Click or drop the file here' %}<br />
  71 +
  72 + <small>{% trans 'The photo could not exceed 2MB.' %}</small>
  73 + {% endif %}
  74 + </div>
60 75 {% else %}
61 76 {% if field.auto_id == 'id_show_email' %}
62 77 {% else %}
... ... @@ -66,21 +81,34 @@
66 81  
67 82 {% endif %}
68 83 <span class="help-block">{{ field.help_text }}</span>
69   - {% if field.errors %}
70   - <div class="row">
71   - <div class="alert alert-danger alert-dismissible" role="alert">
72   - <button type="button" class="close" data-dismiss="alert" aria-label="Close">
73   - <span aria-hidden="true">&times;</span>
74   - </button>
75   - <ul>
76   - {% for error in field.errors %}
77   - <li>{{ error }}</li>
78   - {% endfor %}
79   - </ul>
80   - </div>
81   - </div>
82   - {% endif %}
83 84 </div>
  85 +
  86 + {% if field.errors %}
  87 + <div class="row">
  88 + <div class="alert alert-danger alert-dismissible" role="alert">
  89 + <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  90 + <span aria-hidden="true">&times;</span>
  91 + </button>
  92 + <ul>
  93 + {% for error in field.errors %}
  94 + <li>{{ error }}</li>
  95 + {% endfor %}
  96 + </ul>
  97 + </div>
  98 + </div>
  99 + {% endif %}
  100 +
  101 + {% if field.auto_id == 'id_image' %}
  102 + <div class="col-lg-12 col-md-12 col-sm-12 alert alert-danger alert-dismissible client-file-errors" style="display:none" role="alert">
  103 + <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  104 + <span aria-hidden="true">&times;</span>
  105 + </button>
  106 + <ul>
  107 + <li class="size" style="display:none">{% trans "The image is too large. It should have less than 2MB." %}</li>
  108 + <li class="format" style="display:none">{% trans 'File not supported.' %}</li>
  109 + </ul>
  110 + </div>
  111 + {% endif %}
84 112 </div>
85 113 </div>
86 114 {% endfor %}
... ... @@ -102,6 +130,43 @@
102 130  
103 131 {% include 'users/modal_crop.html' %}
104 132 <script src="{% static 'js/crop.js' %}"></script> <!-- Js for cropper-->
  133 +<script type="text/javascript">
  134 +// check if browser supports drag n drop
  135 +// call initialization file
  136 +if (window.File && window.FileList && window.FileReader) {
  137 + Init();
  138 +}
  139 +
  140 +// initialize
  141 +function Init() {
  142 + var small = $(".file-selector"),
  143 + filedrag = $(".filedrag"),
  144 + common = $(".common-file-input");
  145 +
  146 + // file select
  147 + small.on("change", FileSelectHandler);
  148 +
  149 + // is XHR2 available?
  150 + var xhr = new XMLHttpRequest();
  151 + if (xhr.upload) {
  152 + // file drop
  153 + filedrag.on("drop", FileSelectHandler);
  154 + filedrag.attr('style', 'display:block');
  155 + common.attr('style', 'display:none');
  156 + }
  157 +}
  158 +
  159 +// file selection
  160 +function FileSelectHandler(e) {
  161 + var files = e.target.files || e.dataTransfer.files,
  162 + parent = $(e.target.offsetParent);
  163 + // process all File objects
  164 + for (var i = 0, f; f = files[i]; i++) {
  165 + parent.find('.filedrag').html(f.name);
  166 + }
  167 +}
  168 +</script>
  169 +
105 170  
106 171 {% endblock %}
107 172  
... ...