{"id":28302,"date":"2022-03-23T22:24:00","date_gmt":"2022-03-23T22:24:00","guid":{"rendered":"http:\/\/Handling-image-uploads-with-Postgres-in-RedwoodJS"},"modified":"2025-02-08T12:27:10","modified_gmt":"2025-02-08T20:27:10","slug":"handling-image-uploads-with-postgres-in-redwoodjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-image-uploads-with-postgres-in-redwoodjs\/","title":{"rendered":"Handling image uploads with PostgreSQL"},"content":{"rendered":"

Intro<\/h2>\n

There are a lot of new JAMStack frameworks that are appearing on the scene. You have NextJS, Eleventy, React Static, and a bunch of others. One thing that\u2019s missing from these frameworks is the ability to work with databases in your web app.<\/p>\n

That\u2019s where RedwoodJS comes in. It\u2019s a framework that lets you do full-stack JAMStack development. It uses React, GraphQL, and Prisma. One of the cool things about this framework is that if you have an existing React project, it\u2019s not terribly complicated to port it over.<\/p>\n

This tutorial is just going to give you an idea for one of the things you can do with a full-stack JAMStack application. We\u2019re going to upload images submitted by users to a PostgreSQL database. We\u2019ll go over how to set up your RedwoodJS app and start accepting images from users and displaying them back.<\/p>\n

You can clone a working version of this from Github<\/a> or just follow along with the tutorial.<\/p>\n

Creating a RedwoodJS app<\/h2>\n

Create a new directory for your app called redwood<\/code>, and go to that folder in a terminal. Then, run the following command.<\/p>\n

yarn create redwood-app .\/redwood-image-uploader<\/code><\/p>\n

This will start a chain of events that creates the skeleton for your entire project, including the back-end. Once the setup process is finished, go to the redwood-image-uploader<\/code> directory in your terminal.<\/p>\n

You\u2019ll notice a number of directories and files were created. The api folder is where all of the Primsa and GraphQL files live. The web directory is where the React code lives.<\/p>\n

Redwood handles a lot of things behind the scenes for you, but they keep things clear enough to find the right files to edit if you want to do things manually. If you want to learn more about the details, make sure to go check out their docs<\/a>.<\/p>\n

From here, we can actually start our app with the following command.<\/p>\n

yarn rw dev<\/code><\/p>\n

You\u2019ll see the following page once it\u2019s running.<\/p>\n

\"Clean<\/p>\n

Now that the Redwood app is up and running, we can start working on the front-end code.<\/p>\n

Adding an image uploader<\/h2>\n

To get started, we\u2019re going to install a few packages in the web directory. We\u2019re going to install the styled-components<\/code> and react-images-upload<\/code> packages. So make sure you\u2019re in the web directory in your terminal, and then run the following.<\/p>\n

yarn add styled-components react-images-upload<\/code><\/p>\n

This gives us an upload component so we don\u2019t have to spend a lot of time handling states and styling. Next, go to the root directory, and run the following.<\/p>\n

yarn rw generate page home \/<\/code><\/p>\n

This creates a bunch of new files that automatically route to a template home page. We\u2019ll be adding all of our code to this HomePage.js file. You can delete all of the existing code in the file, and start fresh by adding a few imports.<\/p>\n

Step 1<\/h3>\n
import<\/span> { useState } from<\/span> 'react'<\/span>\nimport<\/span> ImageUploader from<\/span> 'react-images-upload'<\/span>\nimport<\/span> styled from<\/span> 'styled-components'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next we\u2019ll start on our HomePage component.<\/p>\n
Step 2<\/h3>\n
In our component, we start by creating a new state that will hold the information for the images we want to upload. Then, we return a view with a few components, the main one being the ImageUploader<\/code>.<\/p>\n
The props we pass to it let us display the icon to a user, show a preview of the image when it\u2019s uploaded, set some restrictions on files, and start the process of uploading images. The prop we\u2019ll pay the most attention to is what we have in onChange<\/code>.<\/p>\n
const<\/span> HomePage = ()<\/span> =><\/span> {\n  const<\/span> [uploadedPictures, setUploadedPictures] = useState([])\n\n  return<\/span> (\n    <><\/span>\n      <h1<\/span>><\/span>Put your pictures here.<\/h1<\/span>><\/span>\n      <p<\/span>><\/span>This is important...<\/p<\/span>><\/span>\n        <ImageUploader<\/span>\n          withIcon<\/span>={true}<\/span>\n          withPreview<\/span>={true}<\/span>\n          buttonText<\/span>=\"Choose images\"<\/span>\n          onChange<\/span>={(image)<\/span> =><\/span> onDrop(image)}\n          singleImage={true}\n          imgExtension={['.jpg', '.gif', '.png', '.gif']}\n          maxFileSize={5242880}\n        \/>\n    <\/><\/span><\/span>\n  )\n}\n\nexport<\/span> default<\/span> HomePage\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
If you run the project again with yarn rw dev<\/code> in the root directory, you should see this when the page loads.<\/p>\n
\"Image<\/p>\n
Step 3<\/h3>\n
Now, we\u2019ll do a little layout clean up with a few styled components. These have CSS that we need to apply to our component.<\/p>\n
const<\/span> Button = styled.button`\n  background-color: #34feac;\n  padding: 10px 12px;\n  border-radius: 20px;\n\n  &:hover {\n    cursor: pointer;\n    background-color: rgba(52, 254, 172, 0.5);\n  }\n`<\/span>\n\nconst<\/span> Container = styled.div`\n  margin: auto;\n  width: 500px;\n`<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Step 4<\/h3>\n
Here\u2019s what the updated component should look like. This adds some formatting to the uploader, but the main thing it adds is a submit button for users to save their images in the PostgreSQL database.<\/p>\n
const<\/span> HomePage = ()<\/span> =><\/span> {\n  const<\/span> [uploadedPictures, setUploadedPictures] = useState([])\n\n  return<\/span> (\n    <><\/span>\n      <h1<\/span>><\/span>Put your pictures here.<\/h1<\/span>><\/span>\n      <p<\/span>><\/span>This is important...<\/p<\/span>><\/span>\n      {uploadedPictures.length !== 0 && (\n        <Button<\/span> onClick<\/span>={submitPictures}<\/span>><\/span>Save your pictures now<\/Button<\/span>><\/span>\n      )}\n      <Container<\/span>><\/span>\n        <ImageUploader<\/span>\n          withIcon<\/span>={true}<\/span>\n          withPreview<\/span>={true}<\/span>\n          buttonText<\/span>=\"Choose images\"<\/span>\n          onChange<\/span>={(image)<\/span> =><\/span> onDrop(image)}\n          singleImage={true}\n          imgExtension={['.jpg', '.gif', '.png', '.gif']}\n          maxFileSize={5242880}\n        \/>\n      <\/Container<\/span>><\/span>\n    <\/><\/span><\/span>\n  )\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now, we\u2019ll add the functions that are used in the different components.<\/p>\n
Step 5<\/h3>\n
The onDrop<\/code> function is how we will store the information for the images we want to upload to the database. It sets the state to an array of images.<\/p>\n
The submitPictures<\/code> function is where we\u2019re actually going to upload the image data to PostgreSQL. There are still a few back-end things we need to set up, but this has most of the functionality in place.<\/p>\n
When a user submits images to be uploaded to the database, we take all of the images in the uploadedPictures<\/code> state, create new FileReader<\/code> objects for them, and upload the image as a base64 string.<\/p>\n
  const<\/span> onDrop = (picture<\/span>) =><\/span> {\n    setUploadedPictures([...uploadedPictures, picture])\n  }\n\n  const<\/span> submitPictures = ()<\/span> =><\/span> {\n    uploadedPictures.map((picture<\/span>) =><\/span> {\n      const<\/span> reader = new<\/span> FileReader()\n\n      reader.readAsDataURL(picture[0<\/span>])\n\n      reader.onload = function<\/span> (<\/span>) <\/span>{\n        const<\/span> base64Url = reader.result\n      }\n    })\n  }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now that we have our front-end mostly finished, let\u2019s switch to some back-end business.<\/p>\n
\nStoring Images as BLOBs in PostgreSQL<\/span><\/strong>\n<\/p>\n
\nAnother approach to storing images in a PostgreSQL database is by using Binary Large Objects (BLOBs). This method involves converting the image file into a binary format and then storing it directly in the database.\n<\/p>\n
\nFor those who might be using Java in their backend, here’s a simple way to insert an image:\n<\/p>\n
File file = new File(\"myimage.gif\"); FileInputStream fis = new FileInputStream(file); PreparedStatement ps = conn.prepareStatement(\"INSERT INTO images VALUES (?, ?)\");\n<\/pre>\n
\nAdditionally, if you’re considering storing images in a separate database, PostgreSQL offers the DBlink functionality. This allows you to connect and run queries across different PostgreSQL databases. It can be particularly useful if you want to segregate your image storage from other data.\n<\/p>\n
\nAnother useful datatype in PostgreSQL for image storage is bytea (BYTE Array), which can be handy for caching thumbnail images. This datatype allows for the storage of binary strings, making it suitable for smaller images or thumbnails.\n<\/p>\n
Setting up PostgreSQL<\/h3>\n
If you don\u2019t have PostgreSQL installed locally, you can download it for free here: https:\/\/www.postgresql.org\/download\/<\/a> This will also work if you have an instance of PostgreSQL in the cloud.<\/p>\n
In the api<\/code> directory, update the schema.prisma<\/code> to use postgresql<\/code> instead of sqlite<\/code> for the provider. Then, you can delete the UserExample<\/code> model, and add the following.<\/p>\n
model Picture {\n  id        Int    @id @default<\/span>(autoincrement())\n  file      String<\/span>\n  file_name String<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You\u2019ll need to rename the .env.example<\/code> file in the root directory to .env<\/code>. Then edit it to uncomment the DATABASE_URL<\/code>. This is where you put your connection string to the PostgreSQL database. It might look something like this: postgres:\/\/postgres:admin@localhost:5432\/pictures<\/code><\/p>\n
Now, you\u2019ll need to run a migration to get the table in place in PostgreSQL. Do that with the following command in the root directory.<\/p>\n
yarn rw prisma migrate dev<\/code><\/p>\n
You\u2019ll need to write a name for the migration at some point in the process, so make sure it describes what you\u2019re migrating. Once your migration is finished, you can go to the pgAdmin for your PostgreSQL instance, and you should see something similar to this.<\/p>\n
\"PostgreSQL<\/p>\n
Working with GraphQL<\/h3>\n
We have our front-end and database set up, so now we need to handle the back-end part with GraphQL. This is something else that Redwood makes super fast to do. If you run yarn rw g sdl pictures --crud<\/code>, it will generate all of the GraphQL types, queries, and mutations based the pictures schema you defined in the schema.prisma<\/code> file.<\/p>\n
You can take a look at the generated files in the api\/src\/graphql<\/code> and api\/src\/services<\/code> directories. The graphql<\/code> directory has all of your types defined, and the services directory has all of your mutations and queries defined. Now, all we have to do is add these methods to the front-end and we\u2019ll be finished!<\/p>\n
First, we\u2019ll go through each of the autogenerated files just so you know where everything is defined.<\/p>\n
pictures.sdl.js<\/h4>\n
This file was autogenerated as part of the yarn rw g sdl pictures --crud<\/code> command. This is the GraphQL schema that is based on the model we defined in the schema.prisma<\/code> file. Redwood creates all of the types we need to do all of the basic CRUD operations, but we\u2019ll be focusing on the create (mutation) and read (query) operations.<\/p>\n
export<\/span> const<\/span> schema = gql`\n  type Picture {\n    id: Int!\n    file: String!\n    file_name: String!\n  }\n\n  type Query {\n    pictures: [Picture!]!\n    picture(id: Int!): Picture\n  }\n\n  input CreatePictureInput {\n    file: String!\n    file_name: String!\n  }\n\n  input UpdatePictureInput {\n    file: String\n    file_name: String\n  }\n\n  type Mutation {\n    createPicture(input: CreatePictureInput!): Picture!\n    updatePicture(id: Int!, input: UpdatePictureInput!): Picture!\n    deletePicture(id: Int!): Picture!\n  }\n`<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
pictures.js<\/h4>\n
Another nice thing Redwood does for us is autogenerate all of the GraphQL resolvers for the CRUD operations. These connect directly to the PostgreSQL instance you defined in the .env<\/code>.<\/p>\n
import<\/span> { db } from<\/span> 'src\/lib\/db'<\/span>\n\nexport<\/span> const<\/span> pictures = ()<\/span> =><\/span> {\n  return<\/span> db.picture.findMany()\n}\n\nexport<\/span> const<\/span> picture = ({ id }<\/span>) =><\/span> {\n  return<\/span> db.picture.findUnique({\n    where<\/span>: { id },\n  })\n}\n\nexport<\/span> const<\/span> createPicture = ({ input }<\/span>) =><\/span> {\n  return<\/span> db.picture.create({\n    data<\/span>: input,\n  })\n}\n\nexport<\/span> const<\/span> updatePicture = ({ id, input }<\/span>) =><\/span> {\n  return<\/span> db.picture.update({\n    data<\/span>: input,\n    where<\/span>: { id },\n  })\n}\n\nexport<\/span> const<\/span> deletePicture = ({ id }<\/span>) =><\/span> {\n  return<\/span> db.picture.delete({\n    where<\/span>: { id },\n  })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Finishing the front-end<\/h3>\n
Back in our HomePage<\/code> component, we need to add the calls to GraphQL that will let us save images uploaded by users, and reload them on the page. To do that, we\u2019ll start by adding the following import statement.<\/p>\n
Step 1<\/h4>\n
import<\/span> { useMutation, useQuery } from<\/span> '@redwoodjs\/web'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next we need to define how we want the data returned from GraphQL. We\u2019re using the GraphQL language to define our query and how we want the picture data returned with GET_PICTURE<\/code>.<\/p>\n
In CREATE_PICTURE<\/code>, we\u2019re defining how we should pass data to the database, and what values should be returned after a successful creation.<\/p>\n
Step 2<\/h4>\n
const<\/span> GET_PICTURE = gql`\n  query {\n    pictures {\n      id\n      file\n      file_name\n    }\n  }\n`\nconst<\/span> CREATE_PICTURE = gql`\n  mutation createPicture($file: String, $file_name: String) {\n    createPicture(input: { file: $file, file_name: $file_name }) {\n      id\n      file_name\n    }\n  }\n`\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Step 3<\/h4>\n
Finally, we\u2019ll use our imported methods to help us work with these GraphQL queries. This goes inside of the HomePage<\/code> component below our state.<\/p>\n
The create<\/code> method is what we\u2019ll be using to upload pictures to the database and the data object will give us the information we need to display saved images to users.<\/p>\n
const<\/span> [create] = useMutation(CREATE_PICTURE)\nconst<\/span> { data } = useQuery(GET_PICTURE)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we need to update the submitPictures<\/code> function to use the create<\/code> method. When a user clicks this button now, it will upload their image to the database in base64 format and reload the page to display the saved images.<\/p>\n
  const<\/span> submitPictures = ()<\/span> =><\/span> {\n    uploadedPictures.map((picture<\/span>) =><\/span> {\n      const<\/span> reader = new<\/span> FileReader()\n\n      reader.readAsDataURL(picture[0<\/span>])\n\n      reader.onload = function<\/span> (<\/span>) <\/span>{\n        const<\/span> base64Url = reader.result\n\n        create({ variables<\/span>: { file<\/span>: base64Url, file_name<\/span>: picture[0<\/span>].name } })\n\n        location.reload()\n      }\n    })\n  }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Quick check<\/h4>\n
This is what your HomePage<\/code> component should look like now.<\/p>\n
GitHub Gist with updated code<\/a><\/p>\n
Cleaning things up<\/h3>\n
The last thing we need to do is show saved images to users. We\u2019ll do that by using the data<\/code> object. We\u2019ll create a couple of styled components to make things a little clearer in the view.<\/p>\n
const<\/span> Flex = styled.div`\n  display: flex;\n`<\/span>\n\nconst<\/span> Img = styled.img`\n  padding: 24px;\n  height: 200px;\n  width: 200px;\n`<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we can loop through the saved images, and display them with the following addition to the component.<\/p>\n
  <Flex<\/span>><\/span>\n    {data?.pictures &&\n      data.pictures.map((picture) => <Img<\/span> src<\/span>={picture.file}<\/span> \/><\/span>)}\n  <\/Flex<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Conclusion<\/h2>\n
We\u2019re done! Now, when a user uploads an image through this interface, you\u2019ll be able to store and retrieve it from a Postgres database. Hopefully this has given you an idea of how to work with a full-stack JAMStack app using Redwood. There are a number of other ways you can handle images as well. You could upload them to S3 buckets, or use a service like Cloudinary.<\/p>\n