Adjusting bugs involving images in user registration

Zambom
1 parent 3b3a261f
Showing 1 changed file with 89 additions and 24 deletions Show diff stats
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 %}
	@@ -41,22 +41,37 @@		@@ -41,22 +41,37 @@
41	</div>	41	</div>
42	</div>	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	{% csrf_token %}	45	{% csrf_token %}
46	{% for field in form %}	46	{% for field in form %}
47	<div class="col-lg-12 col-md-12 col-sm-12">	47	<div class="col-lg-12 col-md-12 col-sm-12">
48	<div class="form-group form-group-md">	48	<div class="form-group form-group-md">
49	<div class="col-md-12 col-sm-12 col-xs-12 col-lg-12">	49	<div class="col-md-12 col-sm-12 col-xs-12 col-lg-12">
50	{% if field.auto_id == 'id_image' %}	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	{% else %}	75	{% else %}
61	{% if field.auto_id == 'id_show_email' %}	76	{% if field.auto_id == 'id_show_email' %}
62	{% else %}	77	{% else %}
	@@ -66,21 +81,34 @@		@@ -66,21 +81,34 @@
66		81
67	{% endif %}	82	{% endif %}
68	<span class="help-block">{{ field.help_text }}</span>	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">×</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	</div>	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">×</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">×</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	</div>	112	</div>
85	</div>	113	</div>
86	{% endfor %}	114	{% endfor %}
	@@ -102,6 +130,43 @@		@@ -102,6 +130,43 @@
102		130
103	{% include 'users/modal_crop.html' %}	131	{% include 'users/modal_crop.html' %}
104	<script src="{% static 'js/crop.js' %}"></script> <!-- Js for cropper-->	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	{% endblock %}	171	{% endblock %}
107		172