Possibility to show uploaded image on a testlist

Issue #126 resolved
Wenze van Klink created an issue

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)

  1. Wenze van Klink 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?

  2. 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:

            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 %}
    

    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.

  3. Log in to comment