From fb8794906d9c51e384fa3bc94134afad4a4bec00 Mon Sep 17 00:00:00 2001
From: Zambom <erikzambom@hotmail.com>
Date: Wed, 30 Aug 2017 22:54:08 -0300
Subject: [PATCH] Adjusting bugs involving images in user registration

---
 users/templates/users/register.html | 113 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------
 1 file changed, 89 insertions(+), 24 deletions(-)

diff --git a/users/templates/users/register.html b/users/templates/users/register.html
index b3a429f..7a4c395 100644
--- a/users/templates/users/register.html
+++ b/users/templates/users/register.html
@@ -41,22 +41,37 @@
 						</div>
 					</div>
 
-					<form class="{% if form.has_error %} has-error {% endif %} form-horizontal is-fileinput" method="post" enctype="multipart/form-data" id="formUpload">
+					<form class="{% if form.has_error %} has-error {% endif %} form-horizontal is-fileinput" method="post" enctype="multipart/form-data" id="user-form">
 						{% csrf_token %}
 						{% for field in form %}
 							<div class="col-lg-12 col-md-12 col-sm-12">
 								<div class="form-group form-group-md">
 									<div class="col-md-12 col-sm-12 col-xs-12 col-lg-12">
 										{% if field.auto_id == 'id_image' %}
-											{% render_field field class='form-control' %}
-											<div class="input-group">
-							                    <input type="text" readonly="" class="form-control" id="pic_holder" placeholder="{% trans 'Choose your photo...' %}">
-							                    <span class="input-group-btn">
-							                        <button type="button" class="btn btn-fab btn-fab-mini">
-							                          	<i class="material-icons">image</i>
-							                        </button>
-							                    </span>
-							                </div>
+											<label for="{{ field.auto_id }}">{{ field.label }}</label>
+											
+											{% render_field field class='form-control file-selector' %}
+											
+											<div class="input-group common-file-input">
+										      	<input type="text" readonly="" class="form-control" placeholder="{% trans 'Choose your photo...' %}">
+										      	<span class="input-group-btn input-group-sm">
+										        	<button type="button" class="btn btn-fab btn-fab-mini">
+										        		<i class="material-icons">attach_file</i>
+										       		</button>
+										      	</span>
+										    </div>
+
+										    <div class="filedrag">
+										    	{% if acc.image %}
+										    		<i class="fa fa-file-archive-o"></i> <br />
+
+										    		<small>{{ acc.image.path }}</small>
+										    	{% else %}
+										      		{% trans 'Click or drop the file here' %}<br />
+										      		
+										      		<small>{% trans 'The photo could not exceed 2MB.' %}</small>
+										      	{% endif %}
+									  		</div>
 							            {% else %}
 							            	{% if field.auto_id == 'id_show_email' %}
 														{% else %}
@@ -66,21 +81,34 @@
 
 										{% endif %}
 										<span class="help-block">{{ field.help_text }}</span>
-										{% if field.errors %}
-											<div class="row">
-												<div class="alert alert-danger alert-dismissible" role="alert">
-													<button type="button" class="close" data-dismiss="alert" aria-label="Close">
-														<span aria-hidden="true">&times;</span>
-													</button>
-													<ul>
-														{% for error in field.errors %}
-														<li>{{ error }}</li>
-														{% endfor %}
-													</ul>
-												</div>
-											</div>
-										{% endif %}
 									</div>
+									
+									{% if field.errors %}
+										<div class="row">
+											<div class="alert alert-danger alert-dismissible" role="alert">
+												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+													<span aria-hidden="true">&times;</span>
+												</button>
+												<ul>
+													{% for error in field.errors %}
+													<li>{{ error }}</li>
+													{% endfor %}
+												</ul>
+											</div>
+										</div>
+									{% endif %}
+
+									{% if field.auto_id == 'id_image' %}
+										<div class="col-lg-12 col-md-12 col-sm-12 alert alert-danger alert-dismissible client-file-errors" style="display:none" role="alert">
+												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+													<span aria-hidden="true">&times;</span>
+												</button>
+											<ul>
+												<li class="size" style="display:none">{% trans "The image is too large. It should have less than 2MB." %}</li>
+												<li class="format" style="display:none">{% trans 'File not supported.' %}</li>
+											</ul>
+										</div>
+									{% endif %}
 								</div>
 							</div>
 						{% endfor %}
@@ -102,6 +130,43 @@
 
 {% include 'users/modal_crop.html'  %}
 <script src="{% static 'js/crop.js' %}"></script> <!-- Js for cropper-->
+<script type="text/javascript">
+// check if browser supports drag n drop
+// call initialization file
+if (window.File && window.FileList && window.FileReader) {
+	Init();
+}
+
+// initialize
+function Init() {
+	var small = $(".file-selector"),
+		filedrag = $(".filedrag"),
+		common = $(".common-file-input");
+		
+	// file select
+	small.on("change", FileSelectHandler);
+
+	// is XHR2 available?
+	var xhr = new XMLHttpRequest();
+	if (xhr.upload) {
+		// file drop
+		filedrag.on("drop", FileSelectHandler);
+		filedrag.attr('style', 'display:block');
+		common.attr('style', 'display:none');
+	}
+}
+
+// file selection
+function FileSelectHandler(e) {
+	var files = e.target.files || e.dataTransfer.files,
+		parent = $(e.target.offsetParent);
+	// process all File objects
+	for (var i = 0, f; f = files[i]; i++) {
+		parent.find('.filedrag').html(f.name);
+	}
+}
+</script>
+
 
 {% endblock %}
 
--
libgit2 0.21.2