Download Pdf files from a Rails API with React.js

I recently created an application for a musician friend of mine that would allow users who use this application the ability to download pdf files stored through my Rails API. In this short guide, I’d like to walk you through the necessary steps needed to build out the functionality needed to download Pdf documents with React.

Creating necessary States

To begin we will need to create State variables that we will need to track.

In my application, I used Rails for my API, and to store my Pdf files I used AWS S3 buckets with a has_many_attached relationship inside my Instrument model. Building out this functionality required me to split up my State into two separate variables for simplification. The State that contains the Pdf documents needed should contain key-value pairs for at least the filename and ID. I would require the ID of the Pdf for my fetch request and the filename is required later when setting the link attribute, without the filename, you will run into errors.

Creating our form with JSX

For my form component, I imported “Select” from “react-select” to quickly create a selection bar that would capture the ID of the instrument I needed Pdf documents from. After my instrument ID was captured I used a ternary statement to conditionally display what was inside my Pdf array of objects. I mapped over Pdf’s and created a download button that would pass down the URL for my fetch request as well as the entire Pdf document to my handleDownload function. Inside my URL passed into the function, I have placed the instruments ID as the selected value captured with my selection bar then passed down the individual Pdf document ID as well.

Code used to capture the appropriate state

Downloading PDF documents with an HTTP request

Following the logic laid out in my JSX elements, the function handleDownload has the URL passed through it as well as the Pdf document. I simply passed the entire URL as it is into my fetch request then set my method as a “GET” request with a header set to Authorization: localStorage.getItem(“token”). The returned data should be converted into a blob file, not JSON. After it has been converted into a blob file you'll then create a blob link for download. The most important part of this process is making sure you pass the filename from your state as one of the attributes after ‘download’. In my app, I passed the entire Pdf object into my function and specifically called the filename after download, if you do this incorrectly you will have corrupted files being sent to your user for download. After you've created the link you append the link to the HTML page. After appending you'll need to force the download once the link is clicked, and finally clean up and remove the link after it’s been clicked.

The user experience

Final Thoughts

I created this medium article because there weren't a lot of modern resources that went over this type of functionality with examples for React. I struggled for a while trying to understand how to add this functionality to my application and I hope that you found this article useful.