How to send GIF files to Giphy API using React

Other Questions Giphy
1

I need help with sending GIF files to Giphy’s API from my React app. Has anyone done this before?

I’m getting a CORS error when trying to upload. I’m converting the file to base64 format using a file converter library. Here’s what I have so far:

import Base64Converter from 'react-base64-file'

handleUpload = (event) => {
    event.preventDefault()
    const encodedFile = this.state.uploadedFile.base64
    const payload = {
        file: encodedFile, 
        api_key: "YOUR_API_TOKEN"
    }
    this.props.sendToGiphy(payload)
}

My Redux action:

export const sendToGiphy = (fileData) => {
    return dispatch => {
        dispatch({type: 'UPLOAD_STARTED'})
        axios.post("http://api.giphy.com/v1/gifs?api_key=YOUR_TOKEN", fileData)
        .then(response => {
            console.log(response)
            dispatch({type: 'UPLOAD_COMPLETE', payload: response.data})
        })
        .catch(err => {
            dispatch({type: 'UPLOAD_FAILED', payload: err})
        })
    }
}

Error I’m getting:

403 (Forbidden)
CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present

I’m using a development API key that should allow 5 uploads per day. Anyone know what’s wrong?

2

cors errors r the worst! giphy doesn’t allow direct uploads from client side. try usin a backend proxy or check if they got an sdk. sending it from server can fix ur issues for sure!