How to upload an image to strapi
Tags: javascript, strapi, programming, tutorial
Published: 2021-07-20 12:46:37

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

```bash
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 

```bash
// Strapi v4
http:localhost:1337/api/upload

// Strapi v3
http:localhost:1337/upload
```
It will be a **POST** request

## 2- Add an input

```jsx
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

```jsx
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

```jsx
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 <a href="https://strapi.io/" target="blank">Strapi</a> website to learn more about it !

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