How to add uploads in Champ

Time to set up: Approximately 5 minutes

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 do not allow image uploads — which is 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:

  • 10 GB of storage — approximately 300,000 images
  • 20 GB of monthly network bandwidth

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 $90 per month (for up to 2 million images).

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.

DO THIS AT YOUR OWN RISK.

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.

© 2018 GetChamp.net