Forem Creators and Builders 🌱

9comindia
9comindia

Posted on • Updated on

Image upload configuration issue

Issue 1: error message "main_image: is not a valid url" while trying to add a cover image to any post.

Issue 2: when tried to upload image in the post body, the images are uploaded but on the instance harddisk in the folder path /uploads/articles/.....jpg not to cloudinary or to S3.

Configuration details:

Cloudinary free account keys and other parameters are updated in the .env file.

Amazon S3 keys also updated in the .env file.

To fix the above 2 issues and get the image upload to cloud working either by cloudinary or by AWS S3, what configuration steps should I be following?

help thanks.

Top comments (7)

Collapse
 
djuber profile image
Daniel Uber • Edited

This might be a bug with how we handle locally served image files, since I'm also seeing this in a local setup. Locally hosted images are the default for self-host, and it looks like you're already asking about s3/cloudinary options, which I think would solve this by providing a remote url rather than a local /uploads/ link.

I've opened a bug report in the Forem repo about this since it's not a feature request or tied to self-hosting specifically (any site using local image hosting I think will exhibit this problem).

Collapse
 
9comindia profile image
9comindia • Edited

ya, it's happening when storing locally.

And another error "Unexpected token < in JSON at position 0" is happening when trying to upload just a 2 MB file which is well below the 25 MB limit and below the 4096x4096 resolution.

No problems for files file size 100 KB to 200 KB.

Collapse
 
djuber profile image
Daniel Uber

I did see that "unexpected token" error during testing, if a 404 or other error page was returned instead of a json response. The "<" unexpected token is almost surely a doctype header for an html response, this should be visible in the network traffic (and probably an error will show in the forem server logs).

I think that's not completely related to the article creation issue (where you can't save a post with a cover image) and would show instead when uploading (where uploads failed for some reason, and gave that json parse error).

Thread Thread
 
9comindia profile image
9comindia • Edited

Image Upload failed and the network traffic shows the below log.
The image size is 1.58MB and resolution 2448x3264.

413 (Request Entity Too Large)
(anonymous) @ base.js:7637
generateMainImage @ actions.js?2261:88
ArticleCoverImage.this.handleMainImageUpload @ ArticleCoverImage.jsx?b917:81
I @ preact.module.js?da65:1
O.e.
hb.e._hb @ base.js:7319

Issue 1: The image should have been handled because the size < 25 MB and resolution < 4096x4096
Issue 2: Should have displayed the proper error message for end user instead of the "Unexpected token < in JSON at position 0"

The same issue happens for both image upload and cover image upload.

(anonymous) @ base.js:7637
generateMainImage @ actions.js?2261:88
handleInsertionImageUpload @ ImageUploader.jsx?6697:168
I @ preact.module.js?da65:1
O.e.hb.e.hb @ base.js:7319

Could this be an issue in the code or configuration?

Thread Thread
 
djuber profile image
Daniel Uber

Thanks for the extra detail - yes - if this is happening for both body image upload and cover image upload it's a separate issue from the url validation you initially described.

I would suspect the error could be raised by Traefik rather than rails, based on one of the settings shown here doc.traefik.io/traefik/middlewares... - but I don't see that we enable the "buffering" middleware in the traefik config so I'm less confident of that. One other possible culprit could be rack (the ruby web application framework) or puma ( the actual http server process) but I'm not seeing anything obvious there that would raise a payload too large error when handling uploads. I do see the openresty nginx configuration explicitly sets max body size to 0 - which overrides the default of 1MB.

This definitely does not happen locally in development (I am able to upload a 1.78MB JPG file and it's saved correctly) with just puma listening on port 3000, so it's unlikely to be the forem code (rather than something "upstream" in the request cycle, like traefik or nginx).

Thread Thread
 
9comindia profile image
9comindia • Edited

Superb @djuber , this really helped me.
I don't have traefik and openresty in my local environment, just the nginx.
After setting "max body size to 0" in nginx, the error is gone.
thank you very much.

And the url validation issue was resolved when replaced "development" to "production" in files wherever I found development.

I am yet to find a proper way to run "bin/rails s -p 3000 -b 0.0.0.0" in production, which is starting the rails in development environment.

Collapse
 
9comindia profile image
9comindia

error message "main_image: is not a valid url" while trying to add a cover image to any post.

Are there any steps or tricks to get the cover image upload functionality working?

Storing the images can be anywhere either S3 or cloudinary or atleast on harddisk..