{"id":28286,"date":"2023-05-22T07:00:00","date_gmt":"2023-05-22T14:00:00","guid":{"rendered":"http:\/\/upload-and-display-images-using-prisma"},"modified":"2025-11-26T16:49:48","modified_gmt":"2025-11-27T00:49:48","slug":"upload-and-display-images-using-prisma","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/upload-and-display-images-using-prisma","title":{"rendered":"Upload, Store, and Display Images Using Prisma"},"content":{"rendered":"

Sometimes you need to handle and manage images linked to information that\u2019s stored in the database of your web application. You can improve and simplify both image management and data storage using two helpful products: Prisma and Cloudinary<\/a>. In this article, we\u2019ll create a Next.js app to upload the images and display them as a gallery. To handle Prisma image upload, optimization, storage, and display, we\u2019ll use a Cloudinary account<\/a>, which you can get right now for free and for life (no short term window limitations). To store image details, we\u2019ll use Prisma with a local SQLite database.<\/p>\n

What is Prisma?<\/h2>\n

Prisma is an open-source ORM (object-relational mapping) for Node.js and TypeScript. It has a module to define the data models that will be used by the app, and their relationships, based on a Prisma Schema. The tool connects to a database (MySQL, PostgreSQL, SQLite) to store information related to the data models. There\u2019s also a Prisma Client module that offers an auto-generated query builder.<\/p>\n

To keep it simple, we\u2019ll be uploading images to Prisma like this:<\/p>\n

    \n
  • \n

    Cloning your repository and installing dependencies.<\/p>\n<\/li>\n

  • \n

    Configure your environment variables.<\/p>\n<\/li>\n

  • \n

    Start the app.<\/p>\n<\/li>\n

  • \n

    Create an API endpoint.<\/p>\n<\/li>\n

  • \n

    Update your frontend to handle image upload.<\/p>\n<\/li>\n<\/ul>\n

    What is Cloudinary?<\/h2>\n

    Cloudinary is a cloud-based service for managing media assets. You can upload, store, and manipulate images and videos with ease, and is ideal for handling the Prisma file upload process. As Cloudinary is offered as a software as a service (SaaS), it has servers that handle the upload, process, and delivery of media assets, with the possibility of expansion if your application\u2019s traffic increases.<\/p>\n

    What is Next.js?<\/h2>\n

    Next.js is a popular React framework used to create user interfaces, static pages, and server-side rendered pages, and then combine them in the same application. It allows developers to create server-less API routes using Node.js logic.<\/p>\n

    Image Gallery App<\/h2>\n

    Let\u2019s create an image gallery app with two pages: one to upload images, and another to list all the existing pictures. We\u2019ll upload the image files to Cloudinary servers, and we\u2019ll store related details in a SQLite local database using Prisma. For the user interface and the server-side logic, we\u2019ll use Next.js and some NPM packages to make our work easier.<\/p>\n

    AWS and S3 Integration<\/h3>\n

    To further enhance our image storage capabilities, we can also integrate AWS S3. Here\u2019s how:<\/p>\n

      \n
    • \n

      Set up an AWS account.<\/strong> Before you can use AWS services, you need to set up an AWS account.<\/p>\n<\/li>\n

    • \n

      Create an IAM user.<\/strong> For security reasons, it\u2019s recommended to create an IAM user with the necessary permissions rather than using the root account.<\/p>\n<\/li>\n

    • \n

      Set up an S3 bucket.<\/strong> AWS S3 provides scalable object storage. Create an S3 bucket where you\u2019ll store the uploaded images.<\/p>\n<\/li>\n

    • \n

      Update your Prisma schema.<\/strong> Modify your Prisma schema to store the image\u2019s S3 bucket path.<\/p>\n<\/li>\n

    • \n

      Build the image upload component.<\/strong> This component will allow users to select and upload images.<\/p>\n<\/li>\n

    • \n

      Build the image upload service.<\/strong> This service will handle the backend logic for uploading images to S3.<\/p>\n<\/li>\n

    • \n

      Integrate the component and service.<\/strong> Finally, integrate the component and service into your application to allow users to upload images to S3.<\/p>\n<\/li>\n<\/ul>\n

      It\u2019s worth noting that while Cloudinary is excellent for image management, it\u2019s a best practice to store images in blob storage, like AWS S3, rather than directly in the database. By using S3, you can store the image and then save the image\u2019s S3 bucket path in your database, be it SQLite, MySQL, PostgreSQL, or another database of your choice.<\/p>\n

      If you want to see the app live, here\u2019s a working CodeSandbox (use the \u2018Open Editor\u2019 link in the sandbox tool to jump in):<\/p>\n