Display arbitrary number of images from cloudfront URL in shiny app

Viewed 11

I'm trying to display an arbitrary number of images (and videos, but focused on the images now and I hope any answers will generalize to the video issue) retrieved via Cloudfront URL from an Amazon s3 bucket. I have the code working for pulling down the images in full directly from the s3 bucket, but the images are quite large and it's creating browser cache issues. Cloudfront should allow for a much more lightweight display method, but I cant figure out how to render the images in my UI.

My attempt thus far (which gets me the right number of "Image Failed to Render" broken image icons):

observe({
    if(is.null(input$annotation_label)) return(NULL)
    temp_file <- list()
    for (i in 1:length(url_calls()$properties.filepath)){
      temp_file[[i]]<-get_object(bucket = "aquaviewdata",
                                 object = url_calls()$properties.filepath[i])
    }


    images<-list()
    others<-list() #TODO: File handle other extensions
    for (i in 1:length(temp_file)) {
      images[i]<-image_read(temp_file[[i]]) %>%
        image_write(tempfile(fileext = ".jpg"), format = "jpg")
    }


    for (i in 1:nrow(url_calls()))
    {local({
      my_i <- i
      imagename = paste0("img", my_i)
      print(imagename)
      output[[imagename]] <-
        renderImage({
          list(src = paste("https://d9we9npuc9dc.cloudfront.net", url_calls()[[1]][my_i], sep = "/"),
               width = "100%", height = "55%",
               alt = "Image failed to render")
        }, deleteFile = TRUE)
    })
    }
  })

The url_calls() reactive is a dataframe of the appropriate "filepaths" within the s3 bucket, which I should just have to append to the "https://d9we9npuc9dc.cloudfront.net" URL with a "/" to get the image. I can retrieve them directly in-browser without an issue.

I feel like my problem is that whereas before I was downloading the whole file, storing it, then presenting it, with cloudfront I'm streaming it, so I don't have the full image(s) prior to display.

I know this is not reproducible, and I apologize for that, but without providing access to an s3/cloudfront bucket, with keys, etc., I'm not sure how to reproduce enough code to make it reproducible without writing a whole new app.

This is also a crosspost with the same question in the RStudio community: https://community.rstudio.com/t/display-arbitrary-number-of-images-from-urls-amazon-cloudfront/147056?u=jbhill

Any assistance would be much appreciated!

0 Answers
Related