# Getting Started with the KendoReact Upload

This guide provides essential information about using the KendoReact Upload package—you will learn how to install the Upload package, add a Upload component to your project, style the component, and activate your license.

<div data-component="StartKendoReactFreeSection"></div>

After completing this guide, you will be able to reproduce the following example.

[Demo Source](https://demos.telerik.com/kendo-react-ui/upload/get-started/func/source.txt)

## Before You Begin

To follow the steps in this guide, you need to have a React project set up. If you don't have one, you can create a new React application using Vite by running the following command in your terminal:

```sh
npm create vite@latest my-app -- --template react-ts
```

This guide requires that you have **basic knowledge of React and TypeScript**, and that you have already created [**a blank React project**](https://www.telerik.com/kendo-react-ui-develop/components/getting-started).

> tip You can speed up the development of your KendoReact application with the [Kendo UI Template Wizard for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=KendoUI.kendotemplatewizard).

## Install the Component

To install the Upload package, run the following command in the root folder of your React project:

```sh
npm i @progress/kendo-react-upload
```

## Importing the Component

After installing the package, import the Upload component in the React App.

In the `src/App.tsx` file of your React project, import the `Upload` component from the Upload package.

```jsx
import { Upload } from "@progress/kendo-react-upload";
```

## Using the Component

1. Define the `URLs` that you will use to save and remove files.

   ```jsx
   const saveUrl = 'https://demos.telerik.com/service/v2/odata/upload/save';
   const removeUrl = 'https://demos.telerik.com/service/v2/odata/upload/remove';
   ```

2. Add the component's markup to the `src/App.tsx` file in your project, and add the initial collection of files, if any.

   ```jsx
   return <Upload defaultFiles={[]} withCredentials={false} saveUrl={saveUrl} removeUrl={removeUrl} />;
   ```

3. To style the Upload, install and import the [Meridian theme](https://www.telerik.com/design-system/docs/themes/kendo-themes/meridian/), which is one of the [five beautiful themes](https://www.telerik.com/kendo-react-ui-develop/components/styling) for KendoReact.

   3.1. Install the Meridian theme package.

   ```sh
   npm i @progress/kendo-theme-meridian
   ```

   3.2. Import the CSS file from the package in `src/App.tsx`. Add this import before your existing `App.css` import.

   ```jsx
   import '@progress/kendo-theme-meridian/dist/all.css';
   ```

4. Build and run the application by typing the following command in the root folder of your project:

   ```sh
   npm run dev
   ```

5. Navigate to [http://localhost:5173](http://localhost:5173/) to see the KendoReact Upload component on the page.

## Activating Your License Key

Using any of the UI components in the KendoReact library requires either a commercial license key or an active trial license key.

Follow the instructions on the KendoReact [My License page](https://www.telerik.com/kendo-react-ui-develop/components/my-license) to activate your trial or commercial license. You can skip this step if your application already contains a KendoReact license file.

## Dependencies

The Upload package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:

| Package Name              | Description                                                      |
| ------------------------- | ---------------------------------------------------------------- |
| react 18.0.0\*            | Contains the functionality necessary to define React components. |
| react-dom                 | Contains the React renderer for the web.                         |
| @progress/kendo-licensing | Contains the internal infrastructure related to licensing.       |
| @progress/kendo-svg-icons | Contains the KendoReact SVG icons.                               |

## Suggested Links

* [Disabled Upload](https://www.telerik.com/kendo-react-ui-develop/components/upload/disabled-state)
* [Modes of operation](https://www.telerik.com/kendo-react-ui-develop/components/upload/modes)
* [Credentials and additional data](https://www.telerik.com/kendo-react-ui-develop/components/upload/credentials)
* [File processing](https://www.telerik.com/kendo-react-ui-develop/components/upload/file-processing)
* [File restrictions](https://www.telerik.com/kendo-react-ui-develop/components/upload/restrictions)
* [Dragging and dropping](https://www.telerik.com/kendo-react-ui-develop/components/upload/drag-and-drop)
* [Action Buttons](https://www.telerik.com/kendo-react-ui-develop/components/upload/action-buttons)
* [Custom rendering](https://www.telerik.com/kendo-react-ui-develop/components/upload/custom-rendering)
* [External Drop Zone](https://www.telerik.com/kendo-react-ui-develop/components/upload/external-drop-zone)
* [Globalization](https://www.telerik.com/kendo-react-ui-develop/components/upload/globalization)
* [Keyboard navigation](https://www.telerik.com/kendo-react-ui-develop/components/upload/keyboard-navigation)

## Learning Resources

* [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui-develop/components/getting-started)
* [Virtual Classroom (Introductory Course Available to Trial and Commercial License Holders)](https://learn.telerik.com/learn/course/external/view/elearning/14/kendoreact)
* [Explore the Finance Portfolio Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/finance-application/)
* [Explore the Coffee Warehouse Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/react-coffee-warehouse-dashboard/)
* [Explore the GitHub Issues Grid Sample Application](https://www.telerik.com/kendo-react-ui/components/sample-applications/issues-grid/)