File Upload element - Amazon S3 issue

B

Bren

Member
Hello All.
I have a Fabrik File Upload element setup with the Amazon S3 storage option selected (including the related interface info). It works; but acts a bit strange & different than the standard site storage option. When the form detail of a record opens; a pop up of the related storage pic automatically opens and a thumbnail appears on the bottom of the form. If I click on the popup close button; then the popup does not close and a 2nd thumbnail appears at the bottom of the form. If I click the X in the top right of the popup; it closes and a 3rd thumbnail appears at the bottom of the form. Lastly, in list view, when I click on the thumbnail of the storage item in a record; it does not open a preview in another tab. It just downloads the image. Attached are snippet / screenshots of what I described. Any suggestions?
Thanks in advance.
 

Attachments

  • Snippet 1.PNG
    Snippet 1.PNG
    169 KB · Views: 48
  • Snippet 2.PNG
    Snippet 2.PNG
    214.3 KB · Views: 50
  • Snippet 3.PNG
    Snippet 3.PNG
    195.1 KB · Views: 48
  • Snippet 4.PNG
    Snippet 4.PNG
    98.1 KB · Views: 49
Hi Hugh.
I'm using a custom Template Creator CK Template. I didn't think it really mattered; as I just switched the storage type back to the Files System option and it works fine without the issues. I would rather use the Amazon S3 storage though.
I should probably also share that I'm using Joomla! 3.7.4 and Fabrik 3.7.
Thanks in advance, Hugh.
 
Weird, because I can't replicate this with S3. Well, the weirdness with the popup on load. I'm aware of issues with thumbs when using s3, that's something I need to fix.

I'd like to take a look at the issue on your site.

-- hugh
 
Hi Hugh.
Anything new on the file upload element? I'm applying it for another application and I have no issues with .pdf file uploads because they have no pop-up preview or thumbnails; but .jpg (and I'd imagine other image files) have the same popup preview and thumbnail issue when I use Amazon S3 storage. Is there a way just to turn off all image thumbnails & previews so that only the weblink appears on the form (like it does for .pdfs)?
Thanks in advance.
 
Last edited:
I've done some work on the thumbs issue in S3, but I'm still unable to duplicate the popup display issue. Can you point me at your form with that issue.

-- hugh
 
Hi Hugh.
So, I updated my site with the latest from Github and I still have all the same issues when using Amazon S3. So, yes, if you can please take a look at it that would be great. I have it listed in "my sites".
Thanks in advance, Hugh.
 
Well, that was interesting. Took most of the afternoon to figure out a fix. Turns out it's a CORS issue (Cross Origin Resource Sharing). I wasn't seeing the problem on my site as I'd already set a policy on my S3 bucket years ago, and forgot about it. CORS is a browser security feature, which won't allow certain operations on content pulled from a different domain than the one the page is hosted on. And doing the canvas operations (building that popup for preview/resize) triggers a CORS issue with canves, that refuses to save a "tainted" file to HTML5 storage.

Anyway ... update from github again to pick up a few fixes (mostly stuff I ran across while fixing this):

https://github.com/Fabrik/fabrik/commit/bf6aa9460f02202ab853942495e538b33aa2f303

... then go to your AWS S3 console:

https://s3.console.aws.amazon.com/

... click on your bucket, the go to the Permissions tab, and click the "CORS Configuration" button. That will open a permissions editor which should already have a standard policy which sets AllowedOrigin to "*". Just hit Save to apply that default.

Once you've done all that, your S3 should work.

-- hugh
 
Hi Hugh.
OK, I updated my site from Githib (including your latest) and also saved the CORS config, per the attached snippet; but, unfortunately, I still have the same results as before.
On another note; I should mention that I'm using Amazon S3 storage on another site (that I have not updated Joomla since 3.5.0 & Fabrik since 3.4.3) and the upload element works perfectly for pdfs only. If I allow pics (like jpg) then the same issues return. Any other suggestions?
Thanks in advance.
 
Last edited:
Your fielupload.js doesn't seem to have the changes. Are you sure you uploaded everything, in "always overwrite" mode (don't use "only if changed" or "only if newer" in your ftp client)?

-- hugh
 
Ah yes, my bad. I did make a mistake on the update. So, I did updated it again (properly this time) and tested. Great job, Hugh! Looks like you got rid of the strange pop issue and the multiple thumbnails at the bottom of the form. The only issue that's still present is the forced download that happens on both the list & form; versus the opening of the file on the web page. I double checked my settings on the downloads tab and they are still set to "no". When I change it to the "files system" storage option then it works properly. Could the code in the "Amazon S3" option be not seeing the downloads options?
Thanks in advance.
 
If by "forced download" you mean there's a link to the image instead of the image itself, that's because you had "Show Media in List" and "Show Media in Form" both set to "No".

I've set them to Yes.

You'll probably be wanting to turn thumbnails on as well.

Thumbnails in S3 should now be working.

-- hugh
 
Hi Hugh.
I turned on Thumbs and tried it out; but the image in the list is huge (most goes off the page). Any idea why?
I actually like when a user clicks on the image link and it force downloads for other applications; but on this one I would prefer that if the user clicks on the image link it either opens a pop-up of the image or opens the image on another browser tab. I assumed that the options on the downloads tab within the file upload element controlled this; but they are set to no on forced downloads... As mentioned; when not using Amazon S3 the image link works as desired. Am I missing something here?
Thanks in advance.
 
Well, the reason the image was huge is that you hadn't re-uploaded an image. We only create thumbnails during upload, so if you enable thumbs after uploading something, it won't have a thumb.

I re-uploaded a test image, but for some bizarre reason it is incorrectly sizing the image during upload, so the main image is at thumb size. It doesn't do that on my test machine, or for other clients I work with who use this feature.

I can see what's happening - the hidden img we create to stick the image in while we process it (the one you saw at the bottom of the page when that process was broken) is being created with 100x200 dimensions. Which doesn't happen on mine.

I'm working on it.

Apologies for the issues, images in s3 are an area that hasn't gotten much love over the years, as very few people use s3 to store images, they mostly use it for documents (pdf's, etc). But I now have a couple of clients who need images in S3, so I've been working on that code for a few weeks, and it'll solidify soon.

-- hugh
 
Hi Hugh.
I noticed that my site had the Joomla! Debug Console up. I also saw the file upload click popups from the list. Very cool; but also very small... How's the progress going? Should I leave the Joomla! Debug Console up; as you may be working on it?
Thanks in advance.
 
I'm trying to find some time to work on it some more. You can turn debug off if you want, I can always turn it back on again when I need it.

-- hugh
 
Hi Hugh.
Have you had a chance to work on this lately?
My customer is wondering if I'll have the site done soon...
Thanks in advance.
 
You must log in or register to reply here.

Useful links

  • Create a Fabrik Account (Downloads)
  • Create a Forum Account
  • Fabrik Wiki
  • Fabrik 4 Changelog /Install /Upgrade
    • We are in need of some funding.
    More details.

    Thank you.

    Members online

    No members online now.
    Total: 141 (members: 0, guests: 141)
    Back
    Top