## Introduction to Media Upload in Strapi via REST API Media uploads and image management is a key feature in modern applications. Strapi CMS offers flexible media upload capabilities through its REST API, making it an ideal tool for developers looking to integrate dynamic media handling into their projects. Thus, you can find the right asset and edit and reuse it in your websites. In this tutorial, we will learn how to upload images to Strapi headless CMS using the REST API with Postman and Next.js. Using these tools, you’ll learn how to handle media efficiently in Strapi, equipping you with practical, scalable skills for content management. Let's dive in! ## Prerequisites You will need to equip yourself with the following to proceed. * [Node.js runtime](https://nodejs.org/en/download/package-manager). Version 18 or higher. * A code editor, preferably [VS Code](https://code.visualstudio.com/). * [Postman](https://www.postman.com/) for API requests. ## Outline * Introduction to Media Upload in Strapi via REST API * Prerequisites * Outline * Github Repo * What You Will Build: An Image Upload System in Strapi * Key Terms and Explanation * Strapi Media Library and the Upload Plugin * How to Upload Images in Strapi * Create a Strapi Application * Create a Next.js Application * Upload Single or Multiple Images to Strapi * Link an Image to an Existing Entry in Strapi * Display Linked Images and Food Entries * Upload a file at Entry Creation * View, Delete, and Update Images * Upload Image from an API controller in Strapi * Image Upload to Strapi using Postman * Conclusion ## Github Repo The source code for this project can be found [here](https://github.com/Theodore-Kelechukwu-Onyejiaku/image-upload-to-strapi). Also, in the repo above, you can find the images, in the `images` folder, we used for this tutorial. ## What You Will Build: An Image Upload System in Strapi To better understand this tutorial, we will build an image upload system that allows us to perform some image uploads and manipulations in Strapi. ![Link from Gallery](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Link_from_Gallery_2b46d3f5d5.gif) ## Key Terms and Explanation ### What is a REST API? APIs are set of rules that allows different software applications to communicate with each other. Representation State Transfer (REST) API, [according to Wikipedia](https://en.wikipedia.org/wiki/REST), is a software architectural style that was created to guide the design and development of the architecture for the World Wide Web. In other words, with the REST API, we can make HTTP requests to servers to work on resources using the HTTP methods `GET`, `POST`, `PUT`, and `DELETE`. ### What is Media Upload? Media or file upload is very common in most technologies and providers, such as [Nodejs](https://nodejs.org/en), [Laravel](https://laravel.com/), [Java](https://www.java.com/), [Cloudinary](https://cloudinary.com/), [AWS S3](http://aws.amazon.com/), etc., and is a fundamental aspect of web development. It is the transfer of files or media from a client machine to the server. This process is also a part of Strapi. ## Strapi Media Library and the Upload Plugin The [Strapi Media Library](https://docs.strapi.io/user-docs/media-library) allows the display of assets or files or via the media field of a Collection type. This plugin is activated by default. On the other hand, the [Upload plugin](https://docs.strapi.io/dev-docs/plugins/upload) is responsible for powering the Media Library. You can use the Upload plugin API to upload files to Strapi or use the Media Library directly from the Strapi admin dashboard. With the upload plugin, you can choose to upload files to the following: * [Local directory](https://www.npmjs.com/package/@strapi/provider-upload-local) * [Amazon S3](https://market.strapi.io/providers/@strapi-provider-upload-aws-s3) * [Cloudinary](https://market.strapi.io/providers/@strapi-provider-upload-cloudinary) Strapi maintains all the providers above. In the Strapi [market place](https://market.strapi.io/), you can find other providers such as [Cloudimage](https://market.strapi.io/providers/provider-upload-cloudimage), tools or Strapi plugins for image manipulation like [Placeholder](https://market.strapi.io/plugins/strapi-plugin-placeholder), [Responsive image](https://market.strapi.io/plugins/strapi-plugin-responsive-image), [Local Image Sharp](https://market.strapi.io/plugins/strapi-plugin-local-image-sharp), [Image Color Palette](https://market.strapi.io/plugins/@studio123-strapi-plugin-image-color-palette), and so on. You can check out the Strapi market place [here](https://market.strapi.io/). ![Strapi Media Library interface.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Strapi_Media_Library_interface_97f88fc603.png) _Strapi Media Library interface_ ### Features of Strapi Media Library * Extensive file format support * Ability to search, sort, and filter files * Preview of files * Storage service integrations * Automatic size optimization * Live Editing * Single or multiple uploads, etc. To learn more, you can always visit the [Strapi docs](https://docs.strapi.io/). ### Types of Media in Strapi Strapi supports various media uploads, including audio, files, images, and videos, as shown in the image below. ![Types of Media in Strapi.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Types_of_Media_in_Strapi_250574fd2d.png) _Types of Media in Strapi_ For this tutorial, we will only examine **Image Uploads**. However, the methods discussed here should work for any other media type. > **✋ NOTE:** > Strapi allows you to upload different kinds of files for uploading, as we will see shortly. However, we will use images for this tutorial. ### Configuring the Strapi Upload Plugin Strapi also allows us to configure the upload provider. This means that we can configure the file size, resolution, upload request timeout, responsive image size, and so on. With this, developers can have the freedom to customize and configure media uploads. You can find information about configuring the Strapi Upload plugin [here](https://docs.strapi.io/dev-docs/plugins/upload#configuration). ## How to Upload Images in Strapi There are different ways we can upload images in Strapi. They include: * Upload Single/Multiple images in Strapi. * Link an image by uploading it to an existing entry in Strapi. * Link an uploaded image by its ID to an Existing Entry in Strapi. * Upload upon entry creation (deprecated in Strapi 5; we will use another method). * Upload a single file from an API controller in Strapi We will see all these in action in the next sections. ## Create a Strapi Application ### Install Strapi v5 To install [Strapi 5](https://strapi.io/five), run the command below: ```bash npx create-strapi@latest ``` Or via Yarn. ```bash yarn create strapi ``` We will give it the name `strapi-backend`. Please follow the prompts and answers below: ```bash ? What is the name of your project? strapi-backend We can't find any auth credentials in your Strapi config. Create a free account on Strapi Cloud and benefit from: - ✦ Blazing-fast ✦ deployment for your projects - ✦ Exclusive ✦ access to resources to make your project successful - An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem Start your 14-day free trial now! ? Please log in or sign up. Skip ? Do you want to use the default database (sqlite) ? Yes ? Start with an example structure & data? No ? Start with Typescript? Yes ? Install dependencies with npm? Yes ? Initialize a git repository? No ``` ### Start Strapi Application If the installation is successful, CD into the Strapi project and run the command below to start the Strapi application. ```bash npm run develop ``` ### Create Food Collection and Fields We will first create our Food [Collection Type](https://docs.strapi.io/user-docs/content-type-builder). Navigate to ***Content-Type Builder > Create a new collection type*** and enter the display name as `Food`. ![Create Food Collection.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Create_Food_Collection_78fea431a9.png) _Create Food Collection_ Once you have entered the display name, click on **Continue** to create the following fields. * `name`: This is the name of any food entry. It should be of type **Short text**. * `cover`: This will represent the image of any food. It should be of type **Media** (**Single media**). Ensure that you click the **ADVANCED SETTINGS** tab and select **images** as the only allowed type of media. ![Select Image as the only Allowed Media.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Select_Image_as_the_only_Allowed_Media_70e81516c7.png) _Select Image as the only Allowed Media_ Click on the **Save** button. If successful, this is what the **Food** collection should look like: ![The Food Collection Type.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/The_Food_Collection_Type_a0694a2cdb.png) _The Food Collection Type_ ### Create Food Entries The **Food** collection has been created, so let's add some entries. Create some entries with covers and also create some without covers, as shown below. For the latter without covers, we will add their covers by uploading them via the REST API using Next.js. ![Create entries with and without covers.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Create_entries_with_and_without_covers_6831351c6c.png) _Create entries with and without covers_ ### Enable Permission for Image Upload via API We must first give permission to enable image upload via a REST API. To do this, navigate to ***Settings > Roles > Public***, scroll down to the **Upload** plugin, and select the `findOne`, `find` and `upload` actions. Here is what they do: * `find`: This will allow us to fetch all images uploaded to the Strapi. This endpoint for this is `/api/upload/files` * `findOne`: This will allow us to fetch a specified image using its `documentId`. The endpoint for this is `/api/upload/files/:id` * `upload`: This will allow us to upload images to Strapi. The endpoint for this is `/api/upload/` * `destroy`: This will allow us to delete an image. The endpoint for this is `/api/upload/files/:id`. !![Enable API Permission for Food Collection.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Enable_API_Permission_for_Food_Collection_d3cdb06497.png) _Enable Permission for Image Upload_ To confirm this works, open the link `http://localhost:1337/api/upload/files` in your browser. You should see all the uploaded images and their data. ![Fetch all images in Strapi backend.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Fetch_all_images_in_Strapi_backend_439fd4b986.png) _Fetch all images in Strapi backend_ ### Enable API Permission for Food Collection Enable API permissions to the **Food** collection, just like we did above. Click the **Select all** checkbox. ![Enable Permission for Image Upload.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Enable_Permission_for_Image_Upload_fa9c02011e.png) _Enable API Permission for Food Collection_ Bravo! We now have access to upload images, view images, delete images, and to view a specific image. We also have access to the **Food** collection. Now, let's move on to the frontend to start image uploading. ## Create a Next.js Application ### Install Next.js Install [Next.js](https://nextjs.org/) by running the command below: ```bash npx create-next-app@latest ``` Following the prompts after running the command above, we will name our project `nextjs-frontend`. See other prompts and answers below: ```bash ✔ What is your project named? nextjs-frontend ✔ Would you like to use TypeScript? Yes ✔ Would you like to use ESLint? No ✔ Would you like to use Tailwind CSS? Yes ✔ Would you like your code inside a `src/` directory? Yes ✔ Would you like to use App Router? (recommended) Yes ✔ Would you like to use Turbopack for next dev? No ✔ Would you like to customize the import alias (@/* by default)? No ``` ### Start The Next.js App After successfully installing Next.js, the next step is to start the application. Run the command below: ```bash npm run dev ``` The command above will start our Next.js application on `http://localhost:3000`, as shown below. ![Next.js Application.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Next_js_Application_687c778f68.png) _Next.js Application_ ### Install Additional Dependencies We need to install [react-toastify](https://www.npmjs.com/package/react-toastify). This will help us with toasts or notifications. ```bash npm i react-toastify ``` Ensure you CD into the directory of the Next.js app folder above, `nextjs-frontend`, before running the command above. ### Create TypeScript Types Inside the `./src/app` folder, create a new file called `Types.ts`. This file will contain global types for our application, the `ImageEntry` and `FoodEntry`. ```js // ./src/app/Type.ts // Image entry data types export interface ImageEntry { id: number; documentId: string; name: string; caption: string; alternativeText: string; url: string; } // food entry data types export interface FoodEntry { id: number; documentId: string; name: string; cover: ImageEntry; } ``` ### Create Next.js Components for our App Before we begin creating the main functionalities of our application, let's create some starter components. Create a `components` folder inside the `./src` folder. The `components` folder is where the components below will be created. 1. **Create the `SubmitButton` Component** Start by creating a submit button component. Create a `SubmitButton.tsx` inside the `./src/components` folder. ```js // ./src/components/SubmitButton.tsx "use client"; import { useFormStatus } from "react-dom"; export default function SubmitButton({ title }: { title: string }) { const { pending } = useFormStatus(); return ( ); } ``` The component above renders a submit button that disables itself and shows "ing" (e.g., "Submitting...") during form submission, using the `useFormStatus` hook. The `"use client";` directive ensures it's client-side in Next.js. 2. **Create `MultipleOrSingleUpload` Component** This is where we will allow single or multiple image upload. Inside the `./src/components` folder, create a `MultipleOrSingleUpload.tsx` file and add the following code. ```js // ./src/components/MultipleOrSingleUpload.tsx "use client"; import SubmitButton from "./SubmitButton"; export default function MultipleOrSingleUpload() { return ( ); } ``` The component above renders a form for uploading single or multiple files. It has an input field with `name` as `files`, for selecting files and a submit button. It uses the `SubmitButton` component, which we created above, for handling form submissions. 3. **Create the `LinkToSpecifiEntry` Component** This component will help us link an image to a specific entry by uploading it. Create a `LinkToSpecificEntry.tsx` file inside the `./src/components` folder. ```js // ./src/components/LinkToSpecificEntry.tsx "use client"; import { useState } from "react"; enum LinkType { UPLOAD_FILE = "file", GALLERY = "gallery", } export default function LinkToSpecificEntry() { const [linkType, setLinkType] = useState(LinkType.UPLOAD_FILE); return (

Link to a Food

Link to a specific entry and add a cover (image)

); } ``` The component above allows users to link to a specific food entry by uploading an image or selecting from a gallery (images already existing in Strapi admin dashboard). It uses `useState` to toggle between two button options (upload or gallery), dynamically changing their appearance based on the selected link type. The appearance is the form for each button option, which we will see shortly. 4. **Create the `LinkedImages` Component** This is where we will show food entries along with their linked images. Create a `LinkedImages.tsx` file inside the `components` folder and add the following code. ```js // ./src/components/LinkedImages.tsx "use client"; import { useState, useEffect } from "react"; import { Food } from "../Types"; export default function LinkedImages() { const [foods, setFoods] = useState([]); const getFoods = async () => {}; useEffect(() => { getFoods(); }, []); return (

Entries with Linked Images

This is where you find all entries along with their linked images.

); } ``` The component above displays a section for entries with linked images and uses `useState` to manage a list of foods. The `getFoods` function is triggered via `useEffect` when the component mounts to fetch and set food data. Inside the `getFoods` function, we will invoke a service, which we will create shortly, to fetch food entries from the Strapi backend. 5. **Create `UploadAtEntryCreation` Component** The next component, the `UploadAtEntryCreation`, will allow us to upload an image upon entry creation. Although this is [no longer possible in Strapi v5](https://docs.strapi.io/dev-docs/migration/v4-to-v5/breaking-changes), we will achieve it using two steps. > 🤚 NOTE > In Strapi 5, creating an entry while uploading a file is no longer possible. The recommended steps are done in two steps, which we will see soon. ```js // ./src/components/UploadAtEntryCreation.tsx "use client"; import SubmitButton from "./SubmitButton"; export default function UploadAtEntryCreation() { return ( ); } ``` The `UploadAtEntryCreation` component above renders a form that allows users to create an entry with an image upload during entry creation. It includes fields for the entry name and an option to upload one or more files. The `SubmitButton` component is imported and handles form submission. 6. **Create `Gallery` Component** This is where all uploaded images in the Strapi backend will be displayed. Create a `Gallery.tsx` file inside the `components` folder and add the following code. ```js // ./src/components/Gallery.tsx "use client"; import { useEffect, useState } from "react"; import { ImageI } from "@/app/Types"; export default function Gallery() { const [images, setImages] = useState([]); // state to hold images const [selectedImage, setSelectedImage] = useState(null); // for selected image const [update, setUpdate] = useState (false); // if image should be updated or not // call service to fetch images const handleFetchImages = async () => {}; // function to close the update modal const closeModal = () => { setUpdate(false); }; // function to delete an image using the delete service const onDeleteImage = async (imageId: number) => {}; // fetch images upon mounting useEffect(() => { handleFetchImages(); }, []); return (

Welcome to Gallery

This is where all uploaded images can be found.

); } ``` The component above renders a gallery for managing uploaded images. It uses `useState` to handle images, selected images, and a modal state for updates. The `handleFetchImages` function is called inside `useEffect` when the component mounts to fetch the images. Functions for closing the modal and deleting an image are also defined but not implemented. 7. **Create the `TabsContainer` Component** This is where we will toggle between tabs to display each component created above. Create a `TabsContainer.tsx` file inside the `components` folder. ```js // .src/components/TabsContainer.tsx "use client"; import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import MultipleOrSingleUpload from "./MultipleOrSingleUpload"; import { useState } from "react"; import LinkToSpecificEntry from "./LinkToSpecificEntry"; import LinkedImages from "./LinkedImages"; import Gallery from "./Gallery"; import UploadAtEntryCreation from "./UploadAtEntryCreation"; // tabs for image uploads and manipulations enum Tabs { MULTIPLE_OR_SINGLE = "multipleOrSingle", SPECIFIC_ENTRY = "specificEntry", LINKED_IMAGES = "linkedImages", ENTRY_CREATION = "entryCreation", GALLERY = "gallery", } export default function TabsContainer() { const [tab, setTab] = useState(Tabs.MULTIPLE_OR_SINGLE); return (

{tab === Tabs.MULTIPLE_OR_SINGLE ? ( ) : tab === Tabs.SPECIFIC_ENTRY ? ( ) : tab === Tabs.LINKED_IMAGES ? ( ) : tab === Tabs.ENTRY_CREATION ? ( ) : ( )}

); } ``` The `TabsContainer` component above renders a tabbed interface for managing various upload and image-related tasks we have mentioned previously, using `useState` to control which tab is active. The component includes buttons for selecting tabs, such as "Upload Multiple Files" and "Gallery," and conditionally renders the corresponding content based on the selected tab. It also integrates the `ToastContainer` from `react-toastify` to display toasts or notifications. ### Display All Created Components We want all the tab components created above to be visible. Here are the steps we will take to achieve this: * **Step 1: Remove Default CSS** Ensure you visit the `./src/app/global.css` file and update it with the following code: ```css @tailwind base; @tailwind components; @tailwind utilities; ``` By updating the above, we have removed any custom default CSS. * **Step 2: Render `TabsContainer` Component** Update the code in the `./src/page.tsx` file with the following: ```js // ./src/app/page.tsx import TabsContainer from "./components/TabsContainer"; export default function Home() { return (

Image Upload to Strapi

Let's demonstrate image upload to Strapi Content types using the REST API

); } ``` This is what our app should look like ![Tab Interface for our Application.gif](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Tab_Interface_for_our_Application_d0a761f263.gif) _Tabs for our application_ ### Create Server Actions for our App The next step is to create [Next.js server actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations). These are asynchronous functions that are executed on the server. With server actions, you can ensure that heavy computations and sensitive operations are performed securely on the server, reducing the load on the client. Here are the server actions we will create: 1. **Multiple or single upload server action**: This will allow us to upload a single or multiple images to Strapi. 2. **Link to a specific entry server action** (link an already uploaded image and link by uploading an image) 3. **Upload at entry creation server action** 4. **Update image server action** Before we proceed to do that, let's create some constants and default actions. Inside the `./src/app` folder, create a file called `actions.tsx` and add the following code: ```js "use server"; const STRAPI_URL: string = "http://localhost:1337"; // accepted image types const ACCEPTED_IMAGE_TYPES = [ "image/jpeg", "image/jpg", "image/png", "image/webp", ]; // upload single or multiple images export async function uploadMultipleOrSingleAction( prevState: any, formData: FormData ) {} // Upload an Image and link to an entry export async function LinkByUploadAction( prevState: any, formData: FormData ) {} // Link an Uploaded image to an Entry by ID export async function linkFromGalleryAction( prevState: any, formData: FormData ) {} // Upload image at entry creation export async function uploadAtEntryCreationAction( prevState: any, formData: FormData ){} // update mage file info action export async function updateImageAction( prevState: any, formData: FormData ){} ``` In the code above, `STRAPI_URL` stores the base URL of the Strapi API, and `ACCEPTED_IMAGE_TYPES` is an array that lists the accepted image formats (JPEG, JPG, PNG, and WEBP) for file uploads. The `"use server"` directive ensures the code runs on the server side. We then created the server actions that our Next.js server will perform, which we will later modify. > 🤚 **NOTE** > We will update the server actions above later in this tutorial. ### Create Services for Our App Next, we will create services for our application. Services are reusable functions that communicate with other services or external systems and can be called anytime. For this application, we will create 3 services: 1. **Fetch Images Service**: This will help fetch images from the Strapi backend. 2. **Fetch Foods Service**: This will help fetch food entries from the Strapi backend. 3. **Delete image service**: This will help delete an image from the Strapi backend. Proceed to create a file called `services.ts` and add the following code. ```js // ./src/app/services.ts const STRAPI_URL: string = "http://localhost:1337"; export const fetchImages = async () => { try { // fetch images from Strapi backend const response = await fetch(`${STRAPI_URL}/api/upload/files`); // if response is not ok if (!response.ok) { const errorDetails = await response.text(); throw new Error( `Error fetching images: ${response.status} ${response.statusText} - ${errorDetails}` ); } // return fetched images const result = await response.json(); return result; } catch (error: any) { throw new Error(`Failed to fetch images: ${error.message}`); } }; export const fetchFoods = async () => { try { // fetch foods from Strapi backend const response = await fetch(`${STRAPI_URL}/api/foods?populate=*`); // if response is not ok if (!response.ok) { const errorDetails = await response.text(); throw new Error( `Error fetching Foods: ${response.status} ${response.statusText} - ${errorDetails}` ); } // return fetched foods const result = await response.json(); return result; } catch (error: any) { // throw new error throw new Error(`Failed to fetch images: ${error.message}`); } }; export const deleteImage = async (imageId: number) => { try { // make a DELETE request using image id. const response = await fetch(`${STRAPI_URL}/api/upload/files/${imageId}`, { method: "DELETE", }); // if response is not ok if (!response.ok) { const errorDetails = await response.text(); throw new Error( `Error deleting food entry: ${response.status} ${response.statusText} - ${errorDetails}` ); } } catch (error: any) { // throw new error throw new Error(`Failed to delete entry: ${error.message}`); } }; ``` Here is what the following services above do: * `fetchImages`: Retrieves all uploaded images from the Strapi backend by sending a `GET` request to the `/api/upload/files` endpoint. It processes the response, throwing errors if the request is unsuccessful, and returns the list of images in JSON format. * `fetchFoods`: Retrieves all food entries from the Strapi backend, including any populated relationships, by sending a `GET` request to the `/api/foods` endpoint with a `populate=*` query parameter. It checks for errors, handles unsuccessful responses, and returns the data in JSON format. * `deleteImage`: Deletes a specific image from the Strapi backend by sending a `DELETE` request to `/upload/files/{imageId}` using the image’s unique ID. If the deletion fails, it throws a custom error message. Now that we have created the services let's implement them. ## Upload Single or Multiple Images to Strapi Now, let's modify the `MultipleOrSingleUpload` component and the `uploadMultipleOrSingleAction` to implement this. We will do this in 2 steps: ### 1. Update the `uploadMultipleOrSingleAction` Server Action Update the `uploadMultipleOrSingleAction` server action so as to invoke it in the `MultipleOrSingleImageUpload` component. ```js // ./src/actions.ts ... export async function uploadMultipleOrSingleAction( prevState: any, formData: FormData ) { try { const response = await fetch(`${STRAPI_URL}/api/upload`, { method: "post", body: formData, }); const result = await response.json(); if (result.error) { return { uploadError: result.error.message, uploadSuccess: null, }; } return { uploadError: null, uploadSuccess: "Images uploaded successfully", }; } catch (error: any) { return { uploadError: error.message, uploadSuccess: null, }; } } ``` Here is what the code above does: * `prevState`: This is the previous state of the form submission, which contains properties `uploadError` and `uploadSuccess`. It's provided when `useFormState` is invoked. * `formData`: This is an instance of the FormData API containing the actual form data that the user wants to upload, which in this case are images. * The function sends a `POST` request to the Strapi endpoint `/api/upload` to upload images. The `formData`, from the upload, is passed as the body of the request. If there's an error in the response (like the upload failing), it returns an error message. If the upload is successful, it returns a success message. ### 2. **Update the `MultipleOrSingleUpload` Component** Let's modify the `MultipleOrSingleUpload` component form to trigger the server action above. ```js // .src/components/MultipleOrSingleImageUpload "use client"; import { uploadMultipleOrSingleAction } from "@/app/actions"; import { useFormState } from "react-dom"; import { Ref, useRef } from "react"; import SubmitButton from "./SubmitButton"; import { toast } from "react-toastify"; const initialState = { uploadError: null, uploadSuccess: null, }; export default function MultipleOrSingleImageUpload() { const [state, formAction] = useFormState( uploadMultipleOrSingleAction, initialState ); const formRef = useRef(null); if (state?.uploadSuccess) { formRef?.current?.reset(); toast.success(state?.uploadSuccess); } return ( ); } ``` Here is what we did in the code above: * `state`: This object is created by `useFormState`, which tracks the state of the upload (whether there’s an error or success). * The initial state, `initialState`, includes `uploadError: null` and `uploadSuccess: null`. They will be used to pass error and success messages between the `uploadMultipleOrSingleAction` server action and the form above. * `formAction`: This function links to the `uploadMultipleOrSingleAction` server action and is triggered when the form is submitted. * `formRef`: This is a reference to the form DOM element, created using `useRef`. It’s used to reset the form fields after a successful upload. * The `` element has the `multiple` attribute, which allows users to select more than one file at a time. The `name="files"` attribute is crucial because it matches the expected key when submitting files in the `FormData`. * If `state.uploadError` contains a message, it will be displayed in red below the input field using a conditional rendering block. * If the `state.uploadSuccess` contains a success message (indicating that the files were uploaded successfully), the form is reset by calling `formRef.current.reset()`. * Additionally, a toast notification is displayed using `toast.success(state.uploadSuccess)` to notify the user that the upload was successful. When everything is set and done, we should be able to upload a single or multiple images to our Strapi backend. See the GIF below: ![Single or Multiple Image upload](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Upload_Single_or_Multiple_Images_GIF_a9034cb485.gif) _Single or Multiple Image upload_ When we visit the Strapi backend, we should see the images we just uploaded. ![Images in Strapi Backend.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Images_in_Strapi_Backend_204539e710.png) _Images in Strapi Backend_ ## Link an Image to an Existing Entry in Strapi Like we pointed out in the beginning, we will do this in two ways. One is to link to an already existing image in Strapi backend by its ID to an entry and the other is to upload an image and link to a specific food entry. ### Method 1: Link an Image to an Entry in Strapi When we click on the **"Link to a Specific Entry"** tab, we can see "Link by Upload" and "Link from Gallery". In this method 1, we will link by upload. * **Step 1: Update the `LinkByUploadAction` Server Action** ```js // ./src/actions.ts ... export async function LinkByUploadAction(prevState: any, formData: FormData) { try { // Convert formData into an object to extract data const data = Object.fromEntries(formData); // Create a new FormData object to send to the server const formDataToSend = new FormData(); formDataToSend.append("files", data.files); // The image file formDataToSend.append("ref", data.ref); // The reference type for Food collection formDataToSend.append("refId", data.refId); // The ID of the food entry formDataToSend.append("field", data.field); // The specific field to which the image is linked, i.e., "cover" // Make the API request to Strapi to upload the file and link it to the specific entry const response = await fetch(`${STRAPI_URL}/api/upload`, { method: "post", body: formDataToSend, }); // upload respone const result = await response.json(); // Handle potential errors from the API response if (result.error) { return { uploadError: result.error.message, uploadSuccess: null, }; } // Return success if the upload and linking are successful return { uploadSuccess: "Image linked to a food successfully!", uploadError: null, }; } catch (error: any) { // Catch any errors that occur during the process return { uploadError: error.message, uploadSuccess: null, }; } } ``` In the code above, `prevState` holds the previous state of the upload process. `formData` contains the form data submitted by the user, including the file and other necessary fields (`files`, `ref`, `refId`, and `field`). The `ref` represents the reference type for Food collection, which we will add as a hidden value in the form below. The `refId` represents the ID of the food entry. Then we have the `field`, which represents the `cover` field of the food entry that we want to link. * **Step 2: Create a Form for Linking by Upload** We have to trigger the server action above. To do this, inside the `./src/components` folder, create a folder called `form`. Inside the new `form` folder, create a file called `LinkByUpload.tsx` and add the following code: ```js // ./src/components/LinkByUpload.tsx import { useEffect, useState } from "react"; import { useFormState } from "react-dom"; import { toast } from "react-toastify"; import { LinkByUploadAction } from "@/app/actions"; import SubmitButton from "@/components/SubmitButton"; import { fetchFoods } from "@/app/services"; import { FoodEntry } from "@/app/Types"; // initial state const initialState = { uploadError: null, uploadSuccess: null, }; export default function LinkByUpload() { const [state, formAction] = useFormState(LinkByUploadAction, initialState); const [foods, setFoods] = useState([]); const handleFetchFoods = async () => { const result = await fetchFoods(); setFoods(result?.data); }; useEffect(() => { handleFetchFoods(); }, []); if (state?.uploadSuccess) { toast.success(state?.uploadSuccess); } return (

); } ``` From the code above, we have the `foods` state that stores the list of food items fetched from the server, which will be displayed in the dropdown menu. In other words, the component fetches food items using `fetchFoods` and populates the dropdown ` {foods.map((food) => { return ; })} Select the food you want to add Image to {images?.length > 0 ? (

{images?.map((image) => (

setSelectedImageId(image?.id)} > {selectedImageId === image?.id && (

selected

)}

))}

) : (

No Images in Gallery.

)}

{state?.uploadError ? ( {state?.uploadError} ) : null}

); } ``` In the `LinkByGallery` form component above, states `foods` are created to store the list of available foods fetched from the server, and `images` are created to store the list of images in the gallery. And `selectedImageId`, which will store the ID of the image selected by the user from the gallery. We fetched data using the `handleFetchFoods()` function which fetches the list of available food entries from the server using `fetchFoods()` service. And the `handleFetchImages()` which fetches the list of images from the gallery using `fetchImages() service. When an image is clicked, its `imageId` is stored in `selectedImageId`. The selected image is visually highlighted by applying a border to its container. The form is connected to `useFormState(linkFromGalleryAction)`, which ties the form submission to the `linkFromGalleryAction` server action. A hidden field named `imageId` is used to store the ID of the selected image, which is then sent to the server when the form is submitted. After submission, if the operation is successful, the form is reset, and a success message is displayed using `toast.success()`. If an error occurs, the error message is displayed below the form. * Step 4: Import `LinkByGallery` to the `LinkToSpecificEntry` component. ```js // .src/components/LinkToSpecificEntry.tsx "use client"; import { useState } from "react"; import LinkByUpload from "./form/LinkByUpload"; import LinkByGallery from "./form/LinkByGallery"; // linking type enum LinkType { UPLOAD = "upload", GALLERY = "gallery", } export default function LinkToSpecificEntry() { const [linkType, setLinkType] = useState(LinkType.UPLOAD); return (

Link to a Food

Link to a specific entry and add a cover (image)

{linkType === LinkType.UPLOAD ? : }

); } ``` Let's see this in action: ![Link from Gallery](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Link_from_Gallery_2b46d3f5d5.gif) _Link an image from gallery_ Now, when we check the Strapi backend, we should see that the food entry and the image you selected have been linked. ![Linked Image and Food Entry.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Linked_Image_and_Food_Entry_f9637c8b68.png) _Linked Image and Food Entry_ With this method, we could link an already uploaded image in Strapi backend to a food entry. And we can also update or change the linked image of an entry. In the next section, we will see how to upload a file at entry creation. ## Display Linked Images and Food Entries On the tabs section of our application, we can see that we have the "Linked Images" section. This should show us food entries along with their linked images. Let's do this by updating the `./src/components/LinkedImages.tsx` file. ```js // ./src/components/LinkedImages.tsx "use client"; import { useEffect, useState } from "react"; import Image from "next/image"; import { fetchFoods } from "@/app/services"; import { FoodEntry } from "@/app/Types"; const STRAPI_URL: string = "http://localhost:1337"; export default function LinkedImages() { const [foods, setFoods] = useState([]); // foods state // get foods using the featchFoods service const getFoods = async () => { const result = await fetchFoods(); setFoods(result?.data); }; // fetch foods upon mounting useEffect(() => { getFoods(); }, []); return (

Entries with Linked Images

This is where you find all uploaded images so as update anyone.

{foods?.length > 0 && (

{foods?.map((food) => (

{food?.name}

{food?.cover?.url ? ( {food?.cover?.name}

) : (

No linked image

)}

))}

)} {foods?.length <= 0 &&

No foods and images linked

}

); } ``` This code above defines the `LinkedImages` component, which fetches and displays food entries from Strapi along with their linked images. The `foods` state stores the fetched data, which is updated by the `getFoods` function. The `useEffect` hook triggers `getFoods` when the component mounts to fetch the food data from the `fetchFoods` service. The component maps over the food array and displays each food’s name and image using the Image component. If a food has no linked image, it displays a "No linked image" message. The `STRAPI_URL` constant holds the Strapi server URL for image paths. This is what the linked images and foods tab should look like: ![Food Entries and Their Linked Images.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Food_Entries_and_Their_Linked_Images_d2f73dc0f4.png) _Food Entries and Their Linked Images_ As we can see, most of the food entries has been linked. Proceed to the "Link to a Specific" entry tab to link any food entry that has no cover or image linked to it. ## Upload a file at Entry Creation Since [uploading a file at entry creation is no longer possible](https://docs.strapi.io/dev-docs/migration/v4-to-v5/breaking-changes/no-upload-at-entry-creation) in Strapi 5, we will use the recommended programmatic two-step process. First, we have to upload the image to Strapi backend, and then create the entry with the created image ID. ### Update the `uploadAtEntryCreationAction` Server Action We will have to update the `uploadAtEntryCreationAction` server action with the following code: ```js // ./src/actions.ts ... export async function uploadAtEntryCreationAction( prevState: any, formData: FormData ) { try { const data = Object.fromEntries(formData); // upload file const uploadResponse = await fetch(`${STRAPI_URL}/api/upload`, { method: "post", body: formData, }); // get result of upload const uploadedImage = await uploadResponse.json(); // if error if (uploadedImage.error) { return { uploadError: uploadedImage.error.message, uploadSuccess: null, }; } // create entry const newEntry = { data: { name: data.name, cover: uploadedImage[0]?.id, }, }; // Create entry API request const response = await fetch(`${STRAPI_URL}/api/foods`, { method: "post", headers: { "Content-Type": "application/json", }, body: JSON.stringify(newEntry), }); const result = await response.json(); if (result.error) { return { uploadError: result.error.message, uploadSuccess: null, }; } return { uploadError: null, uploadSuccess: "Images uploaded successfully", }; } catch (error: any) { return { uploadError: null, uploadSuccess: "Images uploaded successfully", }; } } ``` * In the code above, we make a `POST` request to the Strapi API's upload endpoint (`/api/upload`) to upload the file contained in `formData`. The result is stored in `uploadedImage`. If the upload fails, it returns an error message. * Once the image is successfully uploaded, a new entry object (`newEntry`) is created, where the `cover` field references the uploaded image's ID. * To create the new entry, a `POST` request is sent to the `/api/foods` endpoint using the new entry data. If there is an error, it returns the error message. Otherwise, a success message is returned. ### Update the `UploadAtEntryCreation` Component In order to use the server action above, we have to modify the `./src/components/UploadAtEntryCreation.tsx` file. ```js // ./src/components/UploadAtEntryCreation.tsx "use client"; import { uploadAtEntryCreationAction } from "@/app/actions"; import { useFormState } from "react-dom"; import { useEffect, useRef } from "react"; import SubmitButton from "./SubmitButton"; import { toast } from "react-toastify"; const initialState = { uploadError: null, uploadSuccess: null, }; export default function UploadAtEntryCreation() { const [state, formAction] = useFormState( uploadAtEntryCreationAction, initialState ); const formRef = useRef(null); useEffect(() => { formRef?.current?.reset(); toast.success(state?.uploadSuccess); }, [state]); return ( ); } ``` * The code above uses the `useFormState` hook to manage form state and handle submission via the `uploadAtEntryCreationAction` server action. The `initialState` initializes `uploadError` and `uploadSuccess` to `null`. * `useEffect` and `useRef`: The `formRef` references the form to reset it after a successful upload. The `useEffect` hook triggers this reset when `state.uploadSuccess` changes, and displays a success toast. * Render: The form collects a "Food Name" using the input name as `name` and an image file using the input type as `file` and name as `files`. When the form is submitted, it triggers the `uploadAtEntryCreationAction` server action to handle the file upload and entry creation process. * And the `SubmitButton` button component handles the form submission. This is what we should see when we perform this operation: ## View, Delete, and Update Images Now, we want to be able to click on the "Gallery" tab and see all the images that have been uploaded to our Strapi backend. Here is what we want to do in this part of this tutorial: * Create a modal that will allow us edit any of the images. We could edit the image name (`name`), caption (`caption`) and alternative text (`alternativeText`). This will trigger the `updateImageAction` server action. * Show a list of all the images uploaded to the Strapi backend using the `fetchImage` service. * And a delete function that will call the `deleteImage` service. ### Update Image Update Server Action To update an image in Strapi, we need to update the image `fileInfo` field, just as we will see below. Locate the `./src/app/actions.tsx` and update the `updateImageAction` server action with the following code: ```js // ./src/app/actions.tsx ... export async function updateImageAction(prevState: any, formData: FormData) { try { // get data object from form-data const data = Object.fromEntries(formData); // creat new image data const newImageData = { name: data.name || prevState.imageSelected.name, alternativeText: data.alternativeText || prevState.imageSelected.alternativeText, caption: data.caption || prevState.imageSelected.caption, }; // image ID from form-data const imageId = data.imageId; // append `fileInfo` to form-data const form = new FormData(); form.append("fileInfo", JSON.stringify(newImageData)); const response = await fetch(`${STRAPI_URL}/api/upload?id=${imageId}`, { method: "post", body: form, }); // image update result const result = await response.json(); if (result.error) { return { uploadError: result.error.message, uploadSuccess: null, }; } return { uploadError: null, uploadSuccess: "Image info updated successfully", }; } catch (error: any) { return { uploadError: error.message, uploadSuccess: null, }; } } ``` In the `updateImageAction` server action above, we have the following: * It takes parameters `prevState` and `formData`. `prevState`, which is the previous state, containing the currently selected image’s data. `formData` is the form data containing updates to be applied to the image. It should contain `name`, `caption` and `alternativeText` from the update image form modal below. * We extract the new image information from formData using `Object.fromEntries(formData)`. * We set `newImageData` with either the new values or existing values from `prevState`. * Appends `newImageData` as JSON to a FormData object for submission. * Sends a POST request to the Strapi upload API endpoint `/api/upload?id={imageId}` to update the image data, using the image ID (`imageId`) from data. * If an error occurs, it returns an error message; otherwise, it confirms a successful update. ### Create a Modal Form for Image Update Inside the `./src/components/forms` component, create a file called `UpdateImageModal.tsx` and add the following code: ```js // ./src/components/forms/UpdateImageModal.tsx "use client"; import { toast } from "react-toastify"; import SubmitButton from "../SubmitButton"; import { useFormState } from "react-dom"; import { updateImageAction } from "@/app/actions"; import { ImageEntry } from "@/app/Types"; // Define the props interface for UpdateImageModal interface UpdateImageModalProps { closeModal: () => void; imageSelected: ImageEntry; handleFetchImages: () => Promise; } export function UpdateImageModal({ closeModal, imageSelected, handleFetchImages, }: UpdateImageModalProps) { const initialState = { uploadError: null, uploadSuccess: null, imageSelected, }; const [state, formAction] = useFormState(updateImageAction, initialState); if (state?.uploadSuccess) { toast.success(state?.uploadSuccess); handleFetchImages(); closeModal(); } return (

); } ``` In the modal form above, here is what we did: * This modal component above provides a form to update the selected image's metadata or file info (name, caption, and alternative text). * It takes the props `closeModal` function to close the modal. `imageSelected`, which is the currently selected image for editing. `handleFetchImages` function to refresh the list of images after an update. * It has the states `useFormState` with `updateImageAction` to manage form submissions and handle success/error feedback. * It displays form fields with placeholders `name`, `caption` and `alternativeText` and default values based on `imageSelected`. * Calls `handleFetchImages()` and `closeModal()` when the update is successful. * Shows error messages if any occur during the update. Provides a **"close"** button to exit the modal without updating. ### Import `UpdateImageModal` and Add Delete Function inside the Gallery Component Now, update the Gallery component to include a delete function and the form modal we created above. ```js // ./src/components/Gallery.tsx "use client"; import { useEffect, useState, useRef } from "react"; import Image from "next/image"; import { UpdateImageModal } from "./form/UpdateImageModal"; import { deleteImage, fetchImages } from "@/app/services"; import { toast } from "react-toastify"; import { ImageEntry } from "@/app/Types"; const STRAPI_URL: string = "http://localhost:1337"; export default function Gallery() { const [images, setImages] = useState([]); const [selectedImage, setSelectedImage] = useState(null); const [update, setUpdate] = useState(false); const handleFetchImages = async () => { const images = await fetchImages(); setImages(images); }; const closeModal = () => { setUpdate(false); }; const onDeleteImage = async (imageId: number) => { await deleteImage(imageId); const newImages = [...images].filter((image) => image.id !== imageId); setImages(newImages); toast.success("Image Deleted"); }; useEffect(() => { handleFetchImages(); }, []); return (

{update ? ( ) : null}

Update Image Info

This is where you find all uploaded images so as update anyone.

{images?.length > 0 && (

{images?.map((image) => (

{image.name.split(".")[0]?.length > 10 ? image.name.split(".")[0].slice(0, 10) + "..." : image.name.split(".")[0]}

))}

)} {images?.length <= 0 && (

No Images in Gallery.

)}

); } ``` Here is what the `Gallery` component above does: * It displays all uploaded images and allows for updating or deleting individual images. * It has the states `images`, which stores the fetched images, `selectedImage`, which stores the currently selected image for editing, and `update`, which controls the visibility of the `UpdateImageModal` which we imported. * It has the functions `handleFetchImages` that fetches the list of images from the Strapi API, `closeModal`, which closes the `UpdateImageModal` and the `onDeleteImage`, which deletes an image by ID, then updates the state to remove the deleted image from the view. * It displays a grid of images, each with an update and delete button. * Opens `UpdateImageModal` when "Update" is clicked and sets `selectedImage`. * Displays a message if no images are available in the gallery. ### Update Image Demo Let's see how our app works when we try to update an image. ![Update an Image Demo](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Update_Image_GIF_76780e2521.gif) _Update Image file info Demo_ ### Delete Image Demo Here is what deleting an image looks like: ![Delete an Image](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Delete_Image_GIF_9fadec7d81.gif) _Delete an Image Demo_ ## Upload Image from an API controller in Strapi What happens when we want to have a custom route that should upload an image to Strapi? This is where [Strapi backend customization](https://docs.strapi.io/dev-docs/backend-customization) comes in. For this part, we want to create a controller that will respond to a `POST` request on the route `favorite-food`. So, we need to create a custom controller and a custom route. ### Create a Custom Route for Upload Inside the `./src/API/food/routes` folder, create a new file called `favorite-food.ts.` This will be our new custom route. Add the code below. ```js // ./src/api/food/routes/favorite-food.ts // Create route to post favorite food export default { routes: [ { // Path defined with a URL parameter method: "POST", path: "/foods/favorite-food", handler: "api::food.food.uploadImage", }, ], }; ``` In the code above, we specified an HTTP `POST` method that will handle requests made to `/foods/favorite-food` route. And we specified that controller `uploadImage`, which we will create soon, should handle this request. Let's proceed and create the controller. ### Create Custom Controller for Upload Locate the `./src/api/food/controllers/food.ts` and replace it with the following code: ```js // ./src/api/food/controllers/food.ts /** * food controller */ import { factories } from "@strapi/strapi"; export default factories.createCoreController( "api::food.food", ({ strapi }) => ({ // create custom controller async uploadImage(ctx) { const contentType = strapi.contentType("api::food.food"); // get files const { files } = ctx.request; // name of input (key) const file = files["anyName"]; // create image using the upload plugin const createdFiles = await strapi.plugins.upload.services.upload.upload({ data: { fileInfo: { name: file["originalFilename"], // set the original name of the image caption: "Caption", // give it a caption alternativeText: "Alternative Text", // give it an alternative text }, }, files: file, }); // send response ctx.status = 200; ctx.body = { data: createdFiles, }; }, }) ); ``` In the code above, we created a custom controller called `uploadImage`. It gets the files from the request context sent from the `POST` request. And then we get the `file`, which could be a single or multiple of them using the input key, from the request context. After that, we used the upload plugin and the `upload` method to upload the image or images. Finally, we sent back a response with a `200` HTTP status and the created file or files (`createdFiles`) as data. > 👋 **NOTE** > You can upload single or multiple images using the example above. Now, let's test this with Postman. ![Create Custom Controller for Upload.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Create_Custom_Controller_for_Upload_de08be03d5.png) _Create Custom Controller for Upload_ From the image above, we can see that we set the name of the input as `anyName`. This could be any name of your choice. But it has to correspond with the `const file = files["anyName"];` we specified in the controller above. We also selected two image files and then clicked send. The response is returned with the created files in the array `data`. ## Image Upload to Strapi using Postman Now, we want to perform what we have done using Next.js with Postman. Here are the things we will learn in this section. * Single or Multiple Upload. * Link an Image to an Entry by Upload. * Link an already uploaded image to an entry using its ID. * Delete an image. * Update an image. ### 1. Single or Multiple Upload To perform this, we need to make a `POST` request to the endpoint `/api/upload` as form-data. The input name should be `files`. Make sure to set the request body as form data. Add the key as `files,` select the type as a file, and then select an image to upload. See the image below: ![Single or Multiple Upload to Strapi via Postman.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Single_or_Multiple_Upload_to_Strapi_via_Postman_983e5bce5b.png) _Single or Multiple Upload to Strapi via Postman_ ### 2. Link an Image to an Entry by Upload In this part, we will upload and at the same time link it to an entry (food entry). Here, we will make a `POST` request to `/api/upload` with the following keys or input values: * `files`: The image file we want to link to an entry. * `ref`: This is the reference type for **Food** collection. And this should be `api::food.food`. * `refId`: The `id` of the food entry. Get an entry ID for your Strapi Food collection. * `field`: The field that will hold the image in the **Food** collection. This should be `cover`. Set the body of the request as form data, add the keys above, and click send. See the image below: ![Link image to an entry by upload.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Link_image_to_an_entry_by_upload_b23763806c.png) _Link image to an entry by upload_ ### 3. Link an already uploaded image to an entry How about we link an image existing in our Strapi backend to and entry that is also existing in our Strapi backend? Let's do this using the following steps. * Get the `id` of the image you want to link. To do this, make a `GET` request to the endpoint `/api/upload/files`. * Get the `documentId` of the food entry to which you want to link the image. Make a `GET` request to the endpoint `/api/upload/files` to get the `documentId`. * Finally, make a`PUT` request to the endpoint `/api/foods/{documentId}`, where `documentId` is the doucment ID of the food entry. * The request should be a JSON request with the following structure: ```js { "data": { "cover": 13 } } ``` See the image below ![Link an Image to an entry by its ID.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Link_an_Image_to_an_entry_by_its_ID_97a10f6ec1.png) _Link an Image to an entry by its ID_ ### 4. Delete an Image To delete an image, we will have to make a `DELETE` request to `/api/upload/files/${imageId}`, where `imageId` is the ID of the image we want to delete. See image below: ![Delete an Image in Strapi.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Delete_an_Image_in_Strapi_75a0e675e9.png) _Delete an image in Strapi via Postman_ ### 5. Update an Image File Information in Strapi Updating an image will require that we make a `PUT` request to the endpoint `/api/upload?id=${imageId}`. The `imageId` here represents the ID of the image we want to update. We will send our request as JSON using the structure below to update the image file information: ```js { "fileInfo": { "name": "new image", "caption": "a caption", "alternativeText": "the alternative text" } } ``` See Image below: ![Update an Image File Information in Strapi.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Update_an_Image_File_Information_in_Strapi_05871633c7.png) _Update an Image File Information in Strapi_ ## Conclusion In this tutorial, we have learnt about image upload to Strapi via REST API using Next.js and Postman. We covered single and multiple upload, linking an image by id or upload to an entry, upload an image upon creation and single or multiple file upload from an API controller in Strapi CMS. In the same vein, we looked at updating image information and deleting images. The vital Next.js server actions were not left behind as well. The media library and image upload is a very significant part of any web application. With Strapi headless CMS, you can upload image seamlessly using an frontend technology of your choice. Here is the [Github repo](https://github.com/Theodore-Kelechukwu-Onyejiaku/image-upload-to-strapi) to the project for this tutorial.