Encountering 405 Method Not Allowed error when uploading GIF to Giphy API

Other Questions Giphy
1

I’m developing a feature where I need to upload a GIF that I recorded with my webcam to the Giphy API. Unfortunately, I keep encountering a 405 Method Not Allowed error and I’m not sure what the problem is.

Here’s the code snippet I’m using for the upload:

fetch(`https://upload.giphy.com/v1/gifs?api_key=${apiKey}&file=${data}`, {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'image/gif'
    }
  })
  .then(res => {
    if (res.ok) {
      return res.json();
    } else {
      console.log('Upload denied');
    }
  })
  .catch(error => {
    console.log('Error occurred: ' + error);
  });

The error message displayed is “net::ERR_ABORTED 405 (Method Not Allowed)”. I’m wondering if there’s something wrong with the way I’m formatting the request or if I might be overlooking something specific in the API usage. Any help would be appreciated!

2

You’re sending data twice - once in the URL and once in the body. That’s what’s breaking it.

I’ve hit this same wall before with file uploads. Drop the file=${data} from your URL completely. Giphy’s upload endpoint only wants the file in the request body.

Your request body is also messed up. Don’t stringify binary GIF data - it corrupts the file. Use FormData instead:

const formData = new FormData();
formData.append('file', data); // assuming data is your GIF blob/file

fetch(`https://upload.giphy.com/v1/gifs?api_key=${apiKey}`, {
  method: 'POST',
  body: formData
  // Don't set Content-Type header - FormData handles it
})

That 405 error is happening because the server can’t handle your mangled request. Fix the double data sending and switch to FormData - should work fine after that.

3

You’re handling the file data wrong. Don’t use JSON.stringify() on binary data or set Content-Type to ‘image/gif’ - Giphy’s upload endpoint wants multipart form data. Create a FormData object and append your GIF file to it instead of cramming it into URL parameters. Drop the custom Content-Type header completely - the browser sets the multipart boundary automatically with FormData. Also check you’re hitting the right upload endpoint URL since some APIs use different URLs for file uploads.

4

yup, it looks like you’re mixing the data variable there. it’s in the URL and in the body too. that could lead to that 405 issue. for uploading files, you should use FormData. GIFs should be sent as multipart/form-data, not JSON.