Possibility to show uploaded image on a testlist

[Wenze van Klink]

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

[Wenze van Klink]

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?

[Randle Taylor]

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.

[Randle Taylor]

Added in pull request #19, pull request #22 & pull request #25