> ## 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 Astro (video tutorial)


## Overview

Learn how to upload images to Cloudinary from an HTML form in an [Astro](https://astro.build/) application. This tutorial demonstrates how to configure Astro for server-side rendering, handle multipart form data, and use the Cloudinary [Node.js SDK](node_integration) `upload_stream` method to upload files directly from memory without saving them to disk.

## 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 Astro
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | [Astro](https://astro.build/) ships zero client-side JavaScript by default. To handle user-generated content like file uploads, use Astro's server-side capabilities with a regular HTML form. Change the `output` config value from its default `static` to `server` or `hybrid` to enable server-side rendering. |

### Creating the upload form
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=44 :player=cld} | Create an upload form with a file picker, a label, and a submit button. The form should send a POST request and use `multipart/form-data` encoding so the file data is included in the request. Code in the frontmatter of an Astro file executes on the server and is never shipped to the client. |

### Handling form submission
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=36 :player=cld} | When the POST request comes in, cast the incoming file to an actual file object before processing it for upload. |

### Uploading to Cloudinary
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=41 :player=cld} | Use the Cloudinary [Node.js SDK](node_integration) `upload_stream` method to upload the file. Create a helper function that takes a file as binary data along with a Cloudinary options object and returns a promise. Convert the file to binary data in two steps: first to a buffer array, then to a `Uint8Array` of 8-bit unsigned integers. The binary data is sent as a single chunk using `end`. |

### Displaying uploaded files
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=42 :player=cld} | Capture the Cloudinary upload response and conditionally render either the form or a preview of the uploaded image. Use the [unpic](https://unpic.pics/) library to apply on-the-fly transformations such as resizing and format conversion for an optimized preview. |

### AI in media management
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=3 :sec=24 :player=cld} | Media libraries can grow unwieldy without proper organization. Cloudinary offers [AI-powered content analysis](cloudinary_ai_content_analysis_addon) to automatically categorize and tag images, reducing manual asset management effort. |

## Keep learning

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

> * Learn more about [uploading images](upload_images) and the available upload options.

> * Explore the [Node.js SDK](node_integration) for server-side integration with Cloudinary.

> * See how to [upload images and videos using the Node.js SDK](node_image_and_video_upload) including the `upload_stream` method.

> * Discover the [Astro Cloudinary components](community_sdks#astro_components) for client-side integration.

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

  
    Upload Programmatically
    Use a Cloudinary SDK to upload media assets 
  

    Upload Images in Hono
    Upload images to Cloudinary in a Hono environment 
  

    Upload Assets in SvelteKit
    Upload assets using the Upload widget in a SvelteKit app 
  

&nbsp;

&nbsp;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.
&nbsp;