KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Loading an image from AWS S3 #2207

Open Richb201 opened this topic on on Jul 14, 2021 - 9 comments

Richb201 commented on Jul 14, 2021

I have images that I keep on AWS S3. The URI of one of them is below. Is it possible for me to have these appear in a report if i know the URI from my mysql?

S3 URI

s3://rso-lockers/richb201-gmail-com/assets/uploads/thumbnails/8a0d7-screenshot-from-2021-06-11-19-39-06.png How would I reference this in a report? Right now I get them from my hard drive like this:

    Table::create(array(
        "dataStore" => $this->dataStore("patents"),
        "showFooter" => true,
        "columns" => array(
            "description",
            "thumbnail_url" => array(
                "formatValue"=> "<img width='500px' height='400px' src='".base_url()."/@value' />"
            ),
            /*
                        "file_url" => array(
                            "cssStyle" => "text-align:right",
                            "prefix" => base_url() . "assets/uploads/",
                        )
            */
        ),

How about this?

Object URL

https://rso-lockers.s3.amazonaws.com/richb201-gmail-com/assets/uploads/thumbnails/8a0d7-screenshot-from-2021-06-11-19-39-06.png

How can I work this into the above table to be able to get the image appear in a report directly from S3?

Sebastian Morales commented on Jul 15, 2021

What's the value of your "thumbnail_url" column? Can you construct an uri to your S3 image from it? Rgds,

Richb201 commented on Jul 15, 2021

Sebastian, the answer in this case is "s3://rso-lockers/richb201-gmail-com/assets/uploads/files/8d26c-billing-management-console.pdf". I can build the full path to the S3 image. The problem is security. Since my S3 buckets are private, there needs to be some way to get through "security". I can of course download the image from S3 to my server and then have koolreport display these in my report. This is what I implemented, but it broke and is basically a place where I can see I will have lots of support problems as well as speed problems. I need to display the images kept in S3 directly on a users koolreport.

Richb201 commented on Jul 16, 2021

Sebastian, here is how I can get the image:

        $s3Client = new s3Client([
            'profile' => 'default',
            'region' => 'us-east-1',
            'version' => '2006-03-01',
        ]);
        try {
            $result = $s3Client->getObject([
                'Bucket' => 'rso_lockers',
                'Key' => "/uploads/files/8d26c-billing-management-console.pdf",
            ]);

        } catch (AwsException $e) {
            return 'Error: ' . $e->getAwsErrorMessage();
        }
        echo $result['Body']->getContents();

So each image will need to be retrieved like this. Here I am echoing the image to the screen. But how will I get the image to appear in my koolreport?

Sebastian Morales commented on Jul 16, 2021

I think you should setup a directory on your server to retrieve images from your S3 to this directory. Whenever you run your report you could check if an image exists in this directory. If it doesn't you could pull it from S3 with your S3client using code. Finally create link to images to show in your report. Rgds,

Richb201 commented on Jul 16, 2021

Sebatian, are you saying that I will not be able to pull an image directly into keelreport, IF I can get the image into a buffer such as $result['Body']->getContents() ? Right now I am trying to bring down each user's imgs when they first login. This means I must delete all images from the local drive when they logoff. I need to do this to keep different user's server clean from cross-pollination although in actuality there is just one user hard drive, so this might not be all that logical. If calling the above code just can't be done from within koolreport, let me know and I will work on fixing the method I have 90% in place, but not working. My design in place is just what you mentioned, except I try to keep the S3 bucket and users session in synch. Whenever a user uploads a new image I also send it to s3. When they delete an image from the servers drive, I delete it from s3 too. So there is no need for me to check since both the Hard drive and s3 have the same images.

It is not the most elegant solution but it should work. The only problem is it takes time to bring down all of a user's images. Right now I am using a synchron transfer. I need to change this to asynch with a promise.

Richb201 commented on Nov 5, 2022

It has been a while. I was never able to get the image for a report directly from s3. So when a user logs in I copy their images to a temp directory on their ec2 server. When I build a report I can get it fine from the server. But under load testing I have found that moving the images from s3 to my ec2 causes 500 server errors about 10% of the time when downloading 30 copies of images in 90 seconds.

One idea is to copy the images to redis or cloudfront or another fast AWS storage network. The images aren't used often, only when a report is run or a user edits their images.

Can I directly access images from redis with Koolreport.

Sebastian Morales commented on Nov 7, 2022

If you could access image data on your Redis server it's possible converting it to base64 data and show the image in KoolReport:

<div>
  <img src="data:image/png;base64, <base64 data>" />
</div>
Richb201 commented on Nov 7, 2022

Sebastian, after discussing with a bunch of people up on Reddit I came to the conclusion that I can't afford a Redis server for this function. We decided that my best bet was to retry the transfer from S3 to my EC2 server when I get a 500 server error on it. (only about 6% of the time). So I am back to trying to pop up a "try again later" message. The way this app works is that a user logs in through MFA and once they are authenticated I copy their images to the EC2, asynchronously. If one of these transfers fails, I want to popup a sweet alert:

<script type="text/javascript">
    Swal.fire({
        title: 'Complete',
        text: 'We have built your reports',
        imageUrl: 'https://unsplash.it/400/200',
        imageWidth: 400,
        imageHeight: 200,
        imageAlt: 'Custom image',
    })
</script>

Which I have been having trouble getting to appear on top of a koolreport screen (see https://www.koolreport.com/forum/topics/2825#popping-up-a-sweetalert-on-top-of-a-report-view2825). So rather than trying to get redis working, I'd prefer to get the error popup working.

I'd like to pop this up over my entry "dashboard". But i don't want it to appear everytime. It should appear only 6% of the time when the server has sent a 500 error. You had mentioned gluing it on the bottom of the dashboard, but I need to control over whether it displays or not.

garyslater commented on May 19, 2023

Even though this thread is from a couple of years ago, I'll still try to provide some assistance. If you want to load an image from AWS S3 into your report, you can modify your code like this: Table::create(array(

""dataStore"" => $this->dataStore(""patents""),
""showFooter"" => true,
""columns"" => array(
    ""description"",
    ""thumbnail_url"" => array(
        ""formatValue"" => ""<img width='500px' height='400px' src='https://rso-lockers.s3.amazonaws.com/richb201-gmail-com/assets/uploads/thumbnails/8a0d7-screenshot-from-2021-06-11-19-39-06.png' />""
    ),
),

)); Just replace the src attribute value with the Object URL of your image from AWS S3. This way, the image should appear directly in your report. If you're interested in more info, you can check out this cisco training website for a variety of Cisco courses and resources.

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
None yet

None