Search code examples
imgur

Can a REACT App access the imgur API directly or does that need to be done server side?


I would like users to be able to upload images to a section of my site. I would like to store these images with imgur.

Basically, I would like it to work like this:

  • User enters website
  • Clicks "Upload Image"
  • a modal pops up with a submit button and a "select image" button
  • the user selects the image and submits it
  • the react app first converts the image to base64
  • it then sends a request directly to imgur to upload the image
  • it then stores the response image id and then sends a request to the backend server that includes the imgur id of the image
  • To display the image, the react app just takes the image is and constructs a imgur url

But that would require me to store the authorization header and the API key directly in the application where everybody has access to it. So is it possible to do this securely or do I need to first send the image to the server and handle the upload there?
With AWS I am billed by milisecond so that would mean I'd have to pay to wait for an imgur request.


Solution

  • In order to allow the client to upload to Imgur on your behalf you would need to expose your Client-ID (but not your client secret). If you expose the Client-ID, anyone with that info would be able to upload anonymously on behalf of your app (as well as execute all the other anonymous methods listed here). And unfortunately there's no way to keep the Client-ID on the client side securely and at the same time have it be accessible for a client to make a request.

    So yes, unfortunately you'll need to upload the image to your API to avoid exposing anything.