> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fivemanage.com/llms.txt
> Use this file to discover all available pages before exploring further.

> Upload images through the Fivemanage API

# Images

## Uploading an image

If you wish to upload an image to the Upload API, you can do so by sending a POST request to the [https://api.fivemanage.com/api/v3/file](https://api.fivemanage.com/api/v3/file) endpoint.

### General

#### Headers

You need to send an `Authorization` header with your API key.

#### Query parameters

You can also send your API key as a query parameter `?apiKey=`. This is useful if you are using the Upload API in a browser.

#### Body

The body of the request should be a form-data object with a file named `file` .

### Uploading an image with Axios

```js theme={null}
const axios = require('axios');
const fs = require('fs');

const apiKey = 'YOUR_API_TOKEN';
const url = 'https://api.fivemanage.com/api/v3/file';

const formData = new FormData();

formData.append('file', fs.createReadStream('image.png'));
// Optional metadata field (JSON string)
formData.append("metadata", JSON.stringify({
    name: 'My image',
    description: 'This is my image',
}));

// Custom filename and path
formData.append("filename", "cool_image.png")
// if a folder does not exist, it will be created automatically
formData.append("path", "path/to/folder")

axios.post(url, formData, {
    headers: {
        Authorization: apiKey,
    }
}).then(res => {
    console.log(res.data.url);
}).catch(err => {
    console.error(err);
});
```

### Uploading a base64 image

If you have a base64 encoded image, you can upload it using the `/v3/file/base64` endpoint. This is particularly useful for environments where `FormData` is not available or difficult to use, such as some game engines or server-side scripts.

```js theme={null}
const axios = require('axios');

const apiKey = 'YOUR_API_TOKEN';
const url = 'https://api.fivemanage.com/api/v3/file/base64';

const data = {
    base64: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
    filename: "pixel.png",
    // Optional metadata field (JSON string)
    metadata: JSON.stringify({
        name: 'My image',
        description: 'This is my image',
    })
};

axios.post(url, data, {
    headers: {
        Authorization: apiKey,
        'Content-Type': 'application/json'
    }
}).then(res => {
    console.log(res.data.url);
}).catch(err => {
    console.error(err);
});
```

#### Response

##### Success

```json theme={null}
{
  "data": {
	// use this ID when you want to delete or get a file later
    "id": "7F9pGhN8qwErT1vx5aZk",
    "url": "https://r2.fivemanage.com/6E9pGhN8qwErT1vx5aZk/7F9pGhN8qwErT1vx5aZk.webp"
  },
  "status": "ok"
}
```

### Deleting a file

When we want to delete an image, we can do so by sending a DELETE request to the [https://api.fivemanage.com/api/v3/file/:path](https://r2.fivemanage.com/api/v3/file/:path) endpoint.

The `:path` parameter should be the ID or the file path of the image you want to delete. You can get the ID from the response when you upload an image (see above).

```js theme={null}
import axios from "axios";

const options = {
  method: 'DELETE',
  url: 'https://api.fivemanage.com/api/v3/file/0987654321',
  headers: {
    Authorization: 'YOUR_API_TOKEN'
  }
};

axios.request(options).then(function (response) {
  console.log(response.data);
}).catch(function (error) {
  console.error(error);
});
```

### Listing images

You can list your uploaded images using a GET request. You can filter by type to only see images.

```js theme={null}
const axios = require('axios');

const apiKey = 'YOUR_API_TOKEN';
// Filter by type=image
const url = 'https://api.fivemanage.com/api/v3/file?type=image';

axios.get(url, {
    headers: { Authorization: apiKey }
}).then(res => {
    console.log(res.data);
}).catch(err => {
    console.error(err);
});
```

### Getting image details

To get details about a specific image, including its metadata, use the GET request with the file ID.

```js theme={null}
const axios = require('axios');

const apiKey = 'YOUR_API_TOKEN';
const fileId = '7F9pGhN8qwErT1vx5aZk';
const url = `https://api.fivemanage.com/api/v3/file/${fileId}`;

axios.get(url, {
    headers: { Authorization: apiKey }
}).then(res => {
    console.log(res.data);
}).catch(err => {
    console.error(err);
});
```

### Games & Mods

#### FiveM

<Info>
  You can upload files from Lua using the base64 endpoint.
</Info>

You can upload an image using the base64 endpoint directly from Lua.

```lua theme={null}
local apiKey = "YOUR_API_TOKEN"
local url = "https://api.fivemanage.com/api/v3/file/base64"
local base64Image = "data:image/png;base64,..." -- Your base64 string

PerformHttpRequest(url, function(statusCode, text, headers)
    local data = json.decode(text)
    if data then
        print("Uploaded: " .. data.data.url)
    else
        print("Error: " .. text)
    end
end, 'POST', json.encode({
    base64 = base64Image,
    filename = "image.png"
}), {
    ["Content-Type"] = "application/json",
    ["Authorization"] = apiKey
})
```

There are a few ways to upload an image to the Image API. The easiest way is to use [Screenshot Basic](https://github.com/citizenfx/screenshot-basic).

#### Screenshot Basic

<Tabs>
  <Tab title="Lua">
    ##### Using headers

    ```lua theme={null}
    exports['screenshot-basic']:requestScreenshotUpload('https://api.fivemanage.com/api/v3/file',
    'file',
    {
        headers = {
            Authorization = "YOUR_API_TOKEN"
        }
    },
    function(data)
        local resp = json.decode(data)
        if resp then
    		-- the url is in resp.data.url	
            print(resp.data.url)
        end
    end)
    ```

    ##### Using query parameters

    ```lua theme={null}
    exports['screenshot-basic']:requestScreenshotUpload('https://api.fivemanage.com/api/v3/file?apiKey=YOUR_API_TOKEN', 'file', function(data)
        local resp = json.decode(data)
        if resp then
            print(resp.data.url)
        end
    end)
    ```
  </Tab>
</Tabs>