jeudi 12 février 2015

Render Form Error on Dropzone.js, with Django View


I have a page created for File Upload which uses Dropzone.js, and takes data from a Django View. The View for upload is as follows...



def upload_file(request):

if request.method == 'POST':
form = UploadFileForm(request.POST, request.FILES)
if form.is_valid():
if request.POST.get('case_number'):
for _file in request.FILES.getlist('file'):
extract_properties = get_file_properties(_file)
handle_uploaded_file(request.FILES['file'])


if extract_properties:

for property in extract_properties:
print "starting parser"
try:
property['case_number'] = request.POST.get('case_number')
property['evidence_number'] = request.POST.get('evidence_number')
result = process_extract(property)

if result is None:
print 'Extract Patterns need to be updated OR there exists Processor errors!'

except Exception as e:
print "!!!!!!!"
print "Error, could not upload", e
pass

#When trying to determine what the header is enable this print statement
#print extract_properties

else:
print 'Unable to identify file uploaded!'
return HttpResponseRedirect('')
else:
print "NO CASE NUMBER"
print form
else:
form = UploadFileForm()

file_cleanup('nettop/files/name.csv')

return render_to_response('nettop/upload_file.html',
{'form': form},
context_instance=RequestContext(request))


The Template for the UPLOAD FILE uses Dropzone.js, as mentioned. My concern is that when the dropdown selectors for Case_Number or Evidence_Number are left blank, there is no Message Printed to the Browser client. There is a message to the Server console which is as follows:



<tr><th><label for="id_case_number">Case number:</label></th><td><ul class="errorlist"><li>This field
is required.</li></ul><select id="id_case_number" name="case_number">
<option value="" selected="selected">---------</option>
<option value="2">1</option>
<option value="1">12</option>
<option value="3">2</option>
<option value="4">3</option>
</select></td></tr>


How can I manipulate this template code below to print that message to my browser?



{% extends "nettop/base.html" %}
{% load staticfiles %}

{% block css %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'nettop/css/dropzone.css' %}" />
{% endblock css %}

{% block page_title %}Upload File{% endblock %}
{% block page_class %}upload-file{% endblock %}
{% block page_id %}upload-file-page{% endblock %}
{% block header_title %}Upload File{% endblock %}
{% block content %}

<!--Be sure to add data-ajax="false" to form to avoid conflict with jQuery Mobile-->
<form id="my-dropzone" class="dropzone" action="{% url "nettop:upload_file" %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form }}
</form>
<button type="submit" id="submit-all" style="visibility: hidden">Submit Files</button>

<p style="color: red;">
Please Select a Case & Evidence Number
</p>

{% endblock %}
{% block js %}
{{ block.super }}
<script type="text/javascript" src="{% static 'nettop/js/libs/dropzone.min.js' %}"></script>
<script type="text/javascript">
Dropzone.options.myDropzone = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue : false,
uploadMultiple: false,
parallelUploads: 100,
addRemoveLinks: true,
maxFiles: 42,
maxFilesize: 2048,
//previewsContainer: ".dropzone-previews",
init : function() {
var submitButton = document.querySelector("#submit-all");
myDropzone = this;

submitButton.addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent
e.preventDefault();
e.stopPropagation();
// Tell Dropzone to process all queued files
myDropzone.processQueue();
});

// Hide submit button until at least one file has been added
this.on("addedfile", function() {
document.getElementById('submit-all').style.visibility = 'visible';
});

// TODO: Add success message
this.on("success", function(file, response){
if(response.code == 501){ // succeeded
return file.previewElement.classList.add("dz-success"); // from source
}else if (response.code == 403){ // error
// below is from the source code too
var node, _i, _len, _ref, _results;
var message = response.msg // modify it to your error message
file.previewElement.classList.add("dz-error");
_ref = file.previewElement.querySelectorAll("[data-dz- errormessage]");
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
node = _ref[_i];
_results.push(node.textContent = message);
}
return _results;
}else{
return null
}
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
});

this.on("successmultiple", function(files, response) {
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
});

this.on("errormultiple", function(files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
}
};
</script>
{% endblock %}




Aucun commentaire:

Enregistrer un commentaire