> ## 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 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. > **TIP**: :title=View the code 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}| | | --- | --- | |{videotime:id=media :min=0 :sec=05 :player=cld} | 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}| | | --- | --- | |{videotime:id=media :min=0 :sec=28 :player=cld} | 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 `` section of **root.jsx**. | ### Configure the Upload widget {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=1 :sec=20 :player=cld} | 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}| | | --- | --- | |{videotime:id=media :min=1 :sec=55 :player=cld} | 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}| | | --- | --- | |{videotime:id=media :min=2 :sec=27 :player=cld} | 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}| | | --- | --- | |{videotime:id=media :min=3 :sec=10 :player=cld} | 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}| | | --- | --- | |{videotime:id=media :min=4 :sec=58 :player=cld} | Render a simple button to open the Upload widget when clicked. | ### Test it out {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=5 :sec=15 :player=cld} | 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. | You can find the code used in this video tutorial in [GitHub](https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/remix-upload-widget-preset). ## 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 code explorer](https://stackblitz.com/edit/github-vt6fzc-wms1nc) that you can fork 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 a timestamp and signature for a signed upload 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.