0

I have implemented initFiles to display already s3 uploaded files, but actual image thumbnails are not showing. Also, I can not click on the default thumbnail that is shown (see image). How can I see actual images and link works?

I have below JS snippet

session: {
        endpoint: "http://localhost/app/ci/php-s3-server/endpoint-cors.php?filelist"
    },

Response from endpoint-cors.php?filelist call is... 

[{"name":"art_collage.png","uuid":"e3554aa0-c025-4653-bb71-4afe9d979f06","s3Key":"test\/e3554aa0-c025-4653-bb71-4afe9d979f06.png","s3Bucket":"kidkivetest"},{"name":"process_step_2.png","uuid":"e5d84dd7-458c-4601-9168-e16e747134d0","s3Key":"test\/e5d84dd7-458c-4601-9168-e16e747134d0.png","s3Bucket":"xx_my_bucket_xx"}]

S3 bucket structure has 2 images:

All Buckets /xx_my_bucket_xx/test
e3554aa0-c025-4653-bb71-4afe9d979f06.png
e5d84dd7-458c-4601-9168-e16e747134d0.png
bizready
  • 139
  • 3
  • 14

1 Answers1

0

If you would like to display thumbnails in your initial files list, you must provide a thumbnailUrl for each file in the list. For example:

[{"name":"art_collage.png","uuid":"e3554aa0-c025-4653-bb71-4afe9d979f06","s3Key":"test\/e3554aa0-c025-4653-bb71-4afe9d979f06.png","s3Bucket":"kidkivetest", "thumbnailUrl": "http://mys3bucket.com/art_collage.png"}...]
Ray Nicholus
  • 19,538
  • 14
  • 59
  • 82
  • I have added thumbnailUrl and now it shows diff default image http://imgur.com/qki15Gu than previous. But, actual image is not shown. Please see the response below. – bizready Apr 01 '16 at 01:22
  • [{"name":"art_collage.png","uuid":"e3554aa0-c025-4653-bb71-4afe9d979f06","s3Key":"test\/e3554aa0-c025-4653-bb71-4afe9d979f06.png","s3Bucket":"xx_my_bucket_xx","thumbnailUrl":"https:\/\/s3.amazonaws.com\/xx_my_bucket_xx\/test\/e3554aa0-c025-4653-bb71-4afe9d979f06.png?AWSAccessKeyId=AKIAJNRQDV3ZDPIU2ZEQ&Expires=1459473457&Signature=5bX5LFZrpC%2FjE%2FC5Bxh8i5x3Sp0%3D"},....}] – bizready Apr 01 '16 at 01:23
  • Most likely due to the fact that the image is coming from a domain that is different from the one hosting the page. This is a CORS issue, and is not resolvable in any version of IE (for images). S3 needs to return an Access-Control-Allow-Origin header for the GET request in order for this to work in other browsers. A cross-browser solution is to proxy the thumbnail images though a server that you control on the same domain as the one hosting the page. – Ray Nicholus Apr 01 '16 at 02:11
  • 1
    It worked after adding GET to CORSRule. Thanks Ray! – bizready Apr 01 '16 at 02:51
  • Be advised that I'm fairly certain that this won't work in any version of Internet Explorer. Cross-origin images are a bit special. – Ray Nicholus Apr 01 '16 at 03:00
  • I was using chrome; based on your response I wanted to try on latest IE (windows 10 - Edge browser),and it worked there as well. – bizready Apr 01 '16 at 03:21
  • I still one pending question in this thread, when click on thumbnail it does not take me to image. Basically not clickable! Is there any trick here to be able to large image after the click? – bizready Apr 01 '16 at 03:22
  • Perhaps you can attach the large image URL to the clickable element using a `data-` attribute. When the user clicks the image, grab the URL from the `data-` attribute, create an `img` element using JavaScript, and then add the `img` to the DOM. Style to suit your needs. I did something similar in [my full-stack JavaScript image uploader blog post](http://blog.fineuploader.com/2013/11/01/full-stack-javascript-image-uploader-using-angularjs-node-js/), but that assumes you have access to the underlying file. Still, you can follow the logic/CSS for displaying a larger image in a modal. – Ray Nicholus Apr 01 '16 at 04:14
  • After the upload if I click it will show the file; Would it be possible to have same behavior when I click on file that is from initFiles? – bizready Apr 01 '16 at 18:00
  • Yes, it's certainly possible, but Fine Uploader doesn't provide such a feature. You can implement using the logic from my previous comment. – Ray Nicholus Apr 01 '16 at 18:04
  • Sure and I will try. Reason for my ask is that, if link works...I was thinking of using lightbox javascript framework, which can show the image in the modal when clicked on image link (in my case all files are images). – bizready Apr 01 '16 at 18:12