About uploads
Handling uploads is a frequent feature request we receive at Champ. User image uploads are now possible with integration through Cloudinary.
But first, let’s talk about why we’ve decided to design the user upload system this way. If you want to jump right into how to set this up, you can go to the Requirements section.
Starting from the beginning, Champ’s goal is to be a easy to use forum software. Our focus remains to allow for effective discussions for your end users. Most of the time, this is done through text based messages and this is where our core expertise remains.
Handling uploads, storing, and hosting images and other files on a large scale involves an entirely new infrastructure and application design. Admittedly, these are not areas where we’ve built our expertise. In fact, entire companies (eg. Cloudinary, for instance) solves this one problem only. To understand the enormous scope of this seemingly simple feature, even large forums like Reddit did not allow image uploads for many years — which was why Imgur was born.
Another issue with uploads is related to cost. Because forums generally allow anyone to post, the cost to store files and to serve them can increase quite quickly. This is why some of the most popular forums costs tens of thousands of dollars to run per month.
Although these costs can theoretically be passed onto our customers, we didn’t feel this would be fair. Some customers may elect to enable image uploads, while others may not use it at all. Even amongst those who enable it may only use a little bit while others are heavy users.
In the end, we designed a solution that allowed users who want user uploads to be able to do so, while those who didn’t care for such a feature to not be penalized with increased costs.
Enter Cloudinary…
Cloudinary is an image and file hosting service that’s been in existence for a long time. It has a very generous free plan which includes:
- 25 GB of storage — approximately 900,000 images
This free plan should be enough for most, if not all, accounts for quite some time. Once you hit the limits of this free plan, their paid plan starts at $99 per month. Honestly, we don’t have any merchants that are on their paid plans, and their free tier should be more than enough for your hosting needs.
Given Cloudinary’s generous free tier, we’ve decided to integrate with their platform to enable user image uploads in Champ.
Requirements
You will need a Cloudinary account. If you don’t have one, you can sign up for one here.
Creating a Cloudinary account
When you go to the Cloudinary webpage, click on the Sign up for free link:
You will need to verify your email address during the registration process.
You can also customize your Cloud name during the registration:
We recommend that you change this name to something recognizable, like the same name of your Shopify subdomain.
Once you’ve created your account and verified your email, you will need to copy and paste three (3) values from your Cloudinary dashboard into Champ.
The 3 values are:
- Cloud name
- API key
- API secret
These values can be found at the top of the Cloudinary management console (dashboard):
Important: These are your API credentials. Do NOT post them in any publicly visible forum (eg. Champ support website).
Entering your API credentials
Once you have your API credentials from Cloudinary, you will need to copy and paste them right into the Champ settings in the dashboard.
Go to the Settings tab and scroll to the bottom. There, you will see the input fields to enter the API credentials:
Note: Champ securely encrypts and stores this information.
Once you enter all three (3) pieces of information, image uploads will be automatically enabled.
How images are shown in posts
Image files include any of the following files:
- jpg / jpeg
- gif
- png
- tiff / tif
When a file that’s identified as an image is uploaded to Cloudinary by a user, a Markdown tag referencing the image is added to the post.
This way, it makes it easy to display the image inline with the message and not as an attachment.
So for a post that looks like this:
… the corresponding Markdown that’s inserted looks like this:
In order to prevent accidental deletion and make it easy for you to export your data from Champ, we do not remove files from your Cloudinary account. Because each file is referenced in the post message content itself, your forum’s content remains completely intact and your data is portable.
Tip: If you find that the image shown is too big, you can add a bit of custom CSS into Champ’s dashboard to limit the size. Go to Design in Champ’s dashboard and add the following CSS:
.media-body img {
max-width: 400px;
}
You can adjust the width to a smaller or larger number as you require it.
How non-image files are shown in posts
Non-image files (eg. pdf, doc, docx) are uploaded, these are not presented as images but as a link only, so that users can download it directly from your Cloudinary account.
For PDF files only, a small thumbnail is shown.
Known issues
Champ cryptographically signs the uploads before they are sent to Cloudinary in order to verify that the upload came from your site.
The cryptographic process is dependent on timestamp verification. We have noticed, in our testing, that slight increased network latencies can sometimes lead to the cryptographic signature not matching that to the file that needs to be uploaded.
Although this only happened very infrequently, when this does occur the upload will fail. Uploads are cryptographically signed for your protection.We feel that this increased security is an acceptable trade off for the occasional upload failure (which the user can simply re-upload to fix).
Uploads are also limited, by default, to 10 MB as per the Cloudinary widget. At this time, there are no options to customize the widget within the Champ dashboard.
Also note that Cloudinary limits uploads to 10 MB for free plans.
Security
Allowing users to upload images and files is an inherent security risk. Malicious users can do all sorts of not-so-wonderful things. We recommend that you regularly moderate your posts. You should also monitor your Cloudinary account for your usage.
Unsigned uploads
If uploads are failing due to the cryptographic signing, you may decide to turn off signed uploads altogether.
To turn off the cryptographic signing, you will need to create an upload preset in Cloudinary for unsigned uploads.
First, in Cloudinary, go to account settings:
Then click on Uploads:
Once you’re there, scroll to the very bottom where you’ll see Add upload preset.
Click on Add upload preset and create a new preset that’s for unsigned uploads:
Remember to click Save in Cloudinary so that the preset is saved.
Then, go to the Champ’s dashboard and copy and paste it in the Cloudinary settings. Go to Settings and scroll all the way to the bottom:
Click Save and you’re done. Uploads are now unsigned and should no longer see any errors from Cloudinary’s upload widget.