1

I'm trying to upload a giff to the giphy api and I was wondering if anyone had any experince with this and could provide an example. I saw it wanted a parameter file as a string in binary so I'm using 'react-file-base64'.

my function in my react component

import FileBase64 from 'react-file-base64'
//...

submit = (e) => {
    e.preventDefault()
    let base64 = this.state.file.base64
    let data = {file: this.state.file.base64, api_key: "MY_API_Key"}
    this.props.upload(data)
}

// my action

export const upload = (item) => {
    return dispatch => {
        dispatch({type: 'UPLOADING_START'})
        axios.post("http://api.giphy.com/v1/gifs?api_key=MY_API_KEY", item)
        .then(res => {
            console.log(res)
            dispatch({type: 'UPLOADING_SUCCESS', payload: res.data})
        })
        .catch(error => {
            dispatch({type: 'UPLOADING_ERROR', payload: error})
        })
    }
}

my error

403 (Forbidden)

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

also note that I'm just putting MY_API_KEY here because I didn't want to share it in the post, and I don't have a production key. However, it did say I could have up to 5 giff uploads per day though.

seattleguy
  • 327
  • 1
  • 4
  • 11
  • Not sure about that 403, but if the image should be as binary data, you should probably convert from base64 to binary. – Henry Woody Apr 07 '19 at 21:45

0 Answers0