gifler icon indicating copy to clipboard operation
gifler copied to clipboard

Accept image/gif header added to gifler xhr request

Open Roznoshchik opened this issue 1 year ago • 0 comments

Context

Gifs that are served by an AWS API Gateway Restapi require the Accept image/gif header in order to be properly decoded from base64.

If this header is not included, then the gif file returned is base64 and the whole function throws an invalid gif error.

Solution

We modify the Gifler function in gifler.coffee and add the request header just after opening the xhr request.

gifler = (url) ->
  # Prepare XHR
  xhr = new XMLHttpRequest()
  xhr.open('GET', url, aync = true)
  xhr.setRequestHeader('Accept', 'image/gif'); // add header here.
  xhr.responseType = 'arraybuffer'

  promise = new Promise((resolve, reject) ->
    xhr.onload = (e) -> resolve(@response)
  )
  xhr.send()
  return new Gif(promise)

Entry point was changed to gifler.min.js because that's the file that was passed through browserify.

I also ran npm run build after making the change, however it seems that more changes happened in the output files than expected. I suspect some of the dependencies installed via npm i were newer and this is the cause.

Testing

I installed the application locally in my app using npm install github:Roznoshchik/gifler and was able to verify that the changes I made did not break the app in any of the functionality that I was using - which may not be a thorough enough test. But I don't see any unit tests for this app in the package.

Notes

Feel free to close this PR if you want to implement the changes on your own, or also happy to make edits if you want to see something else.

Roznoshchik avatar Jan 26 '24 09:01 Roznoshchik