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

# Upload images in Hono (video tutorial)

## Overview

Learn how to upload images to Cloudinary within a Hono application.

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Introduction to Hono and Cloudinary
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | Using Hono and Cloudinary together can give you a fast and secure way to upload assets at scale via an API.
|

### Set up the upload route
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=15 :player=cld} | Start in a Hono application and use middleware to set up your Cloudinary configuration. Then create a route for uploading an image:
|

```nodejs
import "dontenv/config";
import { serve } from '@hono/node-server'
import { Hono } from 'hono'
import { v2 as cloudinary } from "cloudinary";

const app = new Hono();

app.use(async (_c, next) => {
  cloudinary.config({
    cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET,
  });
  await next()
})

app.post("/upload", (c) => c.req.parseBody().then(async (body) => {

}))
```

### Upload an image
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=02 :player=cld} | Define the image as a file, then turn it into a byte array buffer. Encode it as base64 to upload to Cloudinary using Hono's `encodeBase64` function, and use the [Node.js SDK](node_image_and_video_upload#node_js_image_upload) `upload` method to upload the data. Log the result of the upload to the console and return it to the API too.
|

```nodejs
import {encodeBase64} from "hono/utils/encode";

...

app.post("/upload", (c) => c.req.parseBody().then(async (body) => {
  cont image = body["image"] as File;
  const byteArrayBuffer = await image.arrayBuffer();
  const base64 = encodeBase64(byteArrayBuffer);
  const results = await cloudinary.uploader.upload(`data:image/png;base64,${base64}`);
  console.log(results);
  return c.json(results);
}))
```

### Test the image upload
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=39 :player=cld} | Use a multipart form to test the image upload. See the JSON response and click the URL to see the image delivered from Cloudinary. You can also use the `upload_stream` method from the Node.js SDK.
|

## Keep learning

> **READING**:
>
> * Check out our [Node.js SDK](node_integration) for upload, transformations and more.

> * Read our [Upload guide](upload_images) to understand more about uploading to Cloudinary.

> * See the [Upload API reference](image_upload_api_reference) for more methods and parameter explanations. 

> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

#### If you like this, you might also like...

  
  
  
    Auto-Tag Images in Node.js
    Tag assets automatically during upload with AI in Node.js 
  

  
  
  
    Upload Widget
    Embed an Upload Widget in your site 
  

  
  
  
    Upload with the CLI
    Apply background removal to images on upload 
  

 

 Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.