Using Active Storage Direct Uploads in GraphQL with Ruby on Rails

We're using GraphQL a lot, and due to it's reusability nature, we often pair it with React.js and React Native applications. However, one challenge we faced was file uploads. GraphQL doesn't come with a built-in way to handle file uploads. While solutions like Apollo Upload Server exist, but we wanted to explore Active Storage's direct upload as an official solution. What is Direct Upload? In a normal (non-direct) file upload, the file is first sent to the Rails server, which then processes and uploads it to cloud storage (such as S3, Azure, Google cloud storage). In Direct Upload, files go straight from the browser to cloud storage, which improves performances and reduces server load. Direct upload is not limited only to the cloud storages mentioned above, You can even upload to server's local disk, in order to keep things simple. In this guide, we'll be using React.js, Ant Design, Ruby GraphQL and direct upload to rails's local disk.