Display Arbitrary Number of Images from URLs (Amazon CloudFront)

[jbhill]

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 it 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 prior to display.

Any assistance would be much appreciated!