Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accept image/gif header added to gifler xhr request #9

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

Roznoshchik
Copy link

@Roznoshchik Roznoshchik commented Jan 26, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant