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

#imgur #rails #javascript #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.

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.

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:

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.

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more