0

I am currently working on a React app which uploads user images to an Amazon S3 server, processes these images into a GIF on the python backend, and returns an Amazon S3 link to this newly-generated GIF back to React.

When the GIF is ready, React will show an tag to allow the user to download it:

<a href={urlToGif.current} download>Download Your GIF</a>

Where urlToGif.current is something like servername.s3.amazonaws.com/filename.gif

Clicking on this link successfully downloads some file with the correct filename. However, when attempting to open this file with Mac Preview, I get a "The file could not be opened" error message (Mac Preview normally supports opening .gif files).

Also, if I drag and drop the local downloaded file into Firefox, I similarly get a "The image cannot be displayed because it contains errors" message. However, no information is provided regarding what the errors are specifically.

I double checked the Amazon S3 url I provide to the href above. If I copy it from the DOM element itself, and paste it directly into a new browser tab, it takes me to the gif which displays correctly, and I am able to save the file as .gif from there with no problem.

I also removed the https:// prefix from the url to avoid cross origin issues and am not seeing any errors in my console at any point during the GIF generation process.

I do display the image url returned from my python backend on the page before download, and it renders the GIF as expected, so I'm fairly certain it's not an issue with how I'm creating the image itself.

My hunch is that there may be something wrong with the URL or how I'm accessing it. I've been researching this for a couple days now and have been unable to find a solution. Is anyone familiar with this issue and can point me to a potential root cause?

user313
  • 681
  • 1
  • 8
  • 21
  • Open the downloaded "gif" with a text editor (or try `head the-downloaded-gif.gif`). It could be that you're downloading the HTML of some 404 error or something but just naming it `.gif`. – cbr Aug 27 '21 at 13:28
  • @cbr if I open that file with TextEdit I get the message "You need to enable JavaScript to run this app." I also tried opening with Sublime Text 3 which just shows a "Loading image" message in perpetuity. – user313 Aug 27 '21 at 13:30
  • Change the `.gif` to `.txt`. Looks like you're actually downloading the HTML or the text of the app, into a file that is just named `.gif`. – cbr Aug 27 '21 at 13:32
  • @cbr, ah, you're right. If I open it as a .txt I'm seeing an HTML template file. Do you know how I can get it to properly download from that href? – user313 Aug 27 '21 at 13:35
  • Is that HTML file in your S3 bucket? Is that the HTML of your app from which you click on `download`? Is there some onClick handler on the ``, e.g. actually using a React Router `` instead of the HTML ``? Does this happen on all browsers? – cbr Aug 27 '21 at 13:41
  • @cbr That is not an HTML file in my S3 bucket, it is just a generic template. It looks like it's providing that because I'm not actually downloading a legitimate file- for example, when I try to download on Chrome, it says "Failed - no file" and just downloads generic HTML. So that's probably the reason it's not openable. I'm not using an onClick handler or React Router , should I be using those to get the actual URL contents? – user313 Aug 27 '21 at 13:48
  • I got it resolved now. Thank you for the help @cbr I think you helped me better diagnose what I was doing wrong. – user313 Aug 27 '21 at 15:00

1 Answers1

0

I figured out the solution. I used @alanmynah answer on this SO post here and it worked for me.

user313
  • 681
  • 1
  • 8
  • 21