- changed status to open
Possibility to show uploaded image on a testlist
Sometimes it would be nice to see an image immediately when its added.
Idea:
- For test upload add a boolean field: 'show image'
- If a file is uploaded check if it's an image and it needs to be shown
- Show the image(s) under the testlist with the 'test' name
Comments (5)
-
-
reporter Randle,
I would like to create this functionality sometime. Can you give me a short hint where to start? Is knowledge of Django and jQuery sufficient?
-
Sure! Yes, only a little Django/jQuery/javascript should be necessary.
Off the top of my head, there are a couple steps you will probably have to take:
- In qatrack/templates/site_base.html add the Django MEDIA_URL to the QAURLs object like so:
var QAURLs = { API_URL:"{% url api_v1_top_level 'v1'%}", COMPOSITE_URL:"{% url composite %}", UPLOAD_URL:"{% url upload %}", CHART_DATA_URL:"{% url chart_data%}", CONTROL_CHART_URL:"{% url control_chart %}", MEDIA_URL: {{MEDIA_URL}}, OPTION_DELIM: "=", OPTION_SEP: "&", ... }
we will use that to help us get the right url of the image on the server.
- The upload is handled in the Upload view. You may want to add some code in the
post
method to determine if the uploaded file is an image or not and return that in the results like so:
results = { 'temp_file_name': self.file_name, 'is_image': is_image(self.file_name), 'success': False, 'errors': [], "result": None, }
The imghdr module might be able to help you with implementing the
is_image
function.- For upload tests put an extra table row (at the end of templates/qa/qavalue_form.html ) as a place to put the image:
{% if form.unit_test_info.test.is_upload %} <tr class="qa-image"> </tr> {% endif %}
- When a file upload succeeds, the Upload view sends back a json response and the
done
function (starting around line 732 is qa.js) gets run.
That json response includes a temporary file name like : your_image_name_1213_2014-03-24_dbf4a5.jpg
You will need to stick a little bit of code in there to display the image if required:
}else{ self.set_value(data.result); self.status.addClass("btn-success").text("Success"); self.status.attr("title",data.result['temp_file_name']); // Display Image if required if (data.result.is_image ){ var image_url = QAURLs.MEDIA_URL + "/uploads/tmp/" + data.result.temp_file_name; self.display_image(image_url) // need to implement this } $.Topic("valueChanged").publish(); }
Your
display_image
function (on TestInstance function) may just be something like:self.display_image = function(url){ // maybe you will want to set a max width/height for the images? var img_row = self.procedure.next(); //get qa-image row var img_tag = '<img src="'+ ur l+ '"/>'; img_row.html(img_tag) }
Other thoughts:
You may want to add an option on the Test model like:
display_image = models.BooleanField(help_text=_("File uploads only: Show uploaded images inline")
and then only display images if requested.
Hopefully that is not too confusing :) Let me know when/if you get stuck or want some clarification on anything.
-
- changed milestone to 0.2.8
-
- changed status to resolved
Added in pull request #19, pull request #22 & pull request #25
- Log in to comment