DEV Community

stanleyluong
stanleyluong

Posted on

Using Imgur API with Ruby on Rails, Javascript, and React

Ruby on Rails backend:

For my bug tracking app, users are able to upload screenshots of bugs.

My model "bugs" has an "attachments" table. Instead of storing a blob/image/base64 data... attachments are just an array of strings.

Alt Text

In the "bugs" controller, I set the attachments to an array. Make sure the array is the LAST one in the controller or it won't work.
Alt Text

React JS frontend:

I used the ImageUploader component from 'react-images-upload'
You can find that here: https://www.npmjs.com/package/react-images-upload

My onDrop looks like this:
Alt Text
Replace clientId with your own clientId that you get from imgur. All you need to begin posting to their API is your own clientId. You don't need to do all that OAuth stuff unless you need to for auth purposes for your app. It might take a few minutes or a few days to get your clientId. Make sure you include that space in clientId in your headers: 'Authorization': 'Client-ID '+ clientId

The response you get from imgur after posting to their API will include the link. Upon receiving the response I post that link as a string to my Rails backend.

Alt Text

Top comments (0)