Connecting AWS S3 with GraphQL Server with Flutter as Frontend client application for file transfer.
Hello reader, this post is regarding the file transfer to AWS S3 using GraphQL Server running on NodeJs platform as backend and Flutter app as the frontend application.
Before beginning with codes, I would like to explain the entire framework of how we will be doing this. Due to large number of graphql opeartion, I split my node application into two api’s. On the ‘/image-upload’ api we are going to contact the GraphQL server which will dump the image data to AWS S3 Bucket while other api is dedicated to all the backend database operations using Graphql. Now let’s configure aws iam setting.
In your AWS console, go to IAM and create a user with S3 full access policy. On the successful creation of your user, you are going to get a key and secret. In your node js backend create a .env file where you will store these data in the variable S3_KEY and S3_SECRET. When your GraphQL server is going to contact S3, this key and secret will grant your server the access to perform various action on file uploading. Now move to S3 and create a bucket with some name. In your nodejs .env file, create a variable S3_BUCKET and set its value to the S3 bucket name. Also assign the region where the bucket is being created in S3_REGION variable.
Your Graphql server is now all set to dump the images in S3.
In your node js application, you have to create a S3 client and an image upload api. When your frontend app will try to upload any image file this is going to contact this particular api endpoint. Here in the code, I created it by the name of \image-upload .
As image size is larger than normal data transferred during mutation operation therefore image data needs to be sent in parts using multiparty.
The request handler starts by checking the JWT (Json-Web-Token) of the user using imageUploadTokenDecoder which gives his id.
The image sent by the user in multipart is handled by multiparty. In order to send data to S3 Bucket we need a unique Key . The key generated here is using the user id which is unique across all the user (If you are using a public api which works without authorization, then you can use UUID in that case). For sending the data to the bucket we need to call S3.upload() (Note: S3 here is S3Client created previously in index.js). In order to send the request we need a Key (name with which file will be stored in bucket), Bucket (name of the bucket) and Body (file we want to upload in S3). After the file has been successfully stored in the S3 Bucket, I am creating an entry into the database using prisma mutation and sending my front end client the success status response.
Now is the connect backend to flutter application. If a client wants to send an image data to the server than due to its larger size the flutter client application needs to send data to ‘/image-upload’ api in multipart. For this we are going to use http.MultipartFile()
When sending the image you need to call uploadImage() function and pass in the image file. In order to send the request to the image-upload api, provide your host name and port number where your server is running (Please don’t forget that your host name is your IPV4 address as local host is interpreted as emulator local host). This will transfer your image data to the server which in turns dump it to AWS S3 server and store the entry to your mongo database.
