How to upload an image to strapi

Perhaps one of the hardest things to do, and that is to figure out how to upload an image to strapi, and to link it to a specific content type.

On the official docs there is no mentioning of how to do it clearly, they only have an example on how to upload a file to media and it's done with just javascript and HTML in the browser, and if you have tried uploading an image to strapi form a react app or vue that clearly doesn't work.

But don't worry I have gone ahead and figured out how to make it work, so I am going to walk you through how to do it !

1- Let's add Axios to our react app

yarn add axios
or
npm install axios --save

To upload files to strapi you'll have to use the upload endpoint

If you are running it locally it will look like this

http:localhost:1337/upload

It will be a POST request

2- Add an input

import { useState } from 'react';
import axios from 'axios';

function App() {
  const [files, setFiles] = useState();

  const uploadImage = async () => {
    //posting logic will go here
  };

  return (
    <form onSubmit={uploadImage}>
      <input type="file" onChange={(e) => setFiles(e.target.files)} />
      <input type="submit" value="Submit" />
    </form>
  );
}

we'll add an input field of type file and capture the event with the onChange prop, we are setting e.target.files to the state called files, this basically the information we need to upload our file.

We are also adding a function for onSubmit where will create the logic for adding an image.

3- Uploading the image

const uploadImage = async (e) => {
  e.preventDefault();

  const formData = new FormData();

  formData.append('files', files[0]);

  axios
    .post('http://localhost:1337/upload', formData)
    .then((response) => {
      //after success
    })
    .catch((error) => {
      //handle error
    });
};

First we prevent the default behaviour of the submit button so our page wouldn't refresh, then we create an instance of FormData.

We have to use FormData or else it wouldn't work, using json format will not be possible in this case.

We append files[0] to the formData and we call it files, make sure to use the same key files

Then pass formData to axios.post second param, and after you press submit an image will be uploaded to the media on Strapi.

4- Link image to a content type

const uploadImage = async (e) => {
  e.preventDefault();

  const formData = new FormData();

  formData.append('files', files[0]);

  axios
    .post('http://localhost:1337/upload', formData)
    .then((response) => {
      const imageId = response.data[0].id;

      axios
        .post('http://localhost:1337/people', { image: imageId })
        .then((response) => {
          //handle success
        })
        .catch((error) => {
          //handle error
        });
    })
    .catch((error) => {
      //handle error
    });
};

I created a content type called Person (People because strapi is smart enough to make it plural), I added an single image field to it.

All we need to do is get the image id that we successfully uploaded beforehand and after that we add the image id to our POST request on the image field, and after that everything should be linked and your content type will have the image in it's field.

I hope this was helpful, and please checkout the Strapi website to learn more about it !

Follow me on my social media accounts to recieve more content ! Thanks for the support !