> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# Upload assets in a Remix app (video tutorial)

[githublink]: https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/remix-upload-widget-preset

## Overview

Add asset upload capabilities to your Remix application using the Cloudinary [Upload widget](upload_widget). Learn how to install and configure the Upload widget, including how to make the widget work with the intricacies of a Remix 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.
{videoTranscript:publicId=training/Remix_Upload_Widget}

> **View the code :custom-icon='https://cloudinary-res.cloudinary.com/image/upload/v1778586152/docsite/brand-assets/github.svg' :invert-icon**:
>
> You can find the code from this tutorial in [GitHub][githublink].
## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Introduction to the Upload widget
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Cloudinary has many ways to upload files to your Media Library, enabling you to take advantage of Cloudinary's extensive features and capabilities. In a Remix app you can use the Upload widget as a quick and easy way to provide a full upload experience.
|

### Add the Upload widget script to your Remix app
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Start with a basic Remix application and add the Upload widget JavaScript file. Paste the code, which you can find in the [Upload widget documentation](upload_widget#unsigned_uploads), into the `<body>` section of **root.jsx**.
|

### Configure the Upload widget
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Create a `loader` function to set up environment variables for the configuration data required for the Upload widget: the cloud name of your account (which you can find in the [Console Dashboard](https://console.cloudinary.com/console)) and the name of an upload preset (see the next step). Set the environment variables in a **.env** file.
|

### Create an upload preset
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | In your Cloudinary Console, navigate to **Settings > Upload > Upload presets** to create a new unsigned [upload preset](upload_presets). Give the preset a name and make sure to change the **Signing mode** to  **unsigned**, then save the upload preset. 
|

### Add a new component for the Upload widget
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Add a new file called **index.jsx** in **app/components/UploadWidget** in which you can create a component for the Upload widget. After defining your component as `UploadWidget`, you can import this component into your main route.
|

### Initialize the Upload widget
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Back in the component code, retrieve the environment variables using the `useMatches` function. Pass these to the `createUploadWidget` method to initialize the widget. Let the callback function log the result and any error to the console. Instantiate the widget using `useEffect` and maintain a reference to the created widget using `useRef`.
|

### Add a button to open the Upload widget
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Render a simple button to open the Upload widget when clicked.
|

### Test it out
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Open the app in a browser. Click the button to open the Upload widget and upload a file to your Cloudinary product environment. See the response logged in the console.
|

## Keep learning

> **READING**:
>
> * Read our Upload widget [guide](upload_widget) and [reference](upload_widget_reference), covering every available parameter option.

> * Check out an [Upload widget sample app](https://github.com/cloudinary-devs/cloudinary-upload-widget-js) that you can use to try out some sample configuration changes.

> * 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...

[Generate Upload Signature](generate_upload_signature_tutorial)

Generate a timestamp and signature for a signed upload

[Upload Widget](upload_widget_tutorial)

Embed an Upload Widget in your site

[Upload with the CLI](upload_with_the_cli_tutorial)

Apply background removal to images on upload

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