![Kendo ui file upload example](https://kumkoniak.com/109.jpg)
![kendo ui file upload example kendo ui file upload example](https://d585tldpucybw.cloudfront.net/sfimages/default-source/component-pages/jquery/upload/customize-file-upload-with-templates.jpeg)
The event listener used a FileReader object which is available in the browser’s web API. We created our image preview by adding the multiple option, adding validation, and a select event listener. This is what the final result looks like: Summary
![kendo ui file upload example kendo ui file upload example](https://docs.telerik.com/kendo-ui/controls/editors/upload/upload-dd4.png)
The result is a URL to the image and it will be used to set the src attribute for the image in our preview. The onload event handler is where we will be able to get the URL of the image from the result property of the FileReader. The readDataURL method reads the contents of the file and triggers the onload event. The FileReader object lets us read the contents of the file. A file object will have the name of the file, the file extension, the size of the file in bytes, a uid, and a property named rawFile. Since the user can only select one file, we can access the file object by retrieving the first item in the array. If multiple files are selected, they will be grouped together as one block that can be deleted. There is also a delete button to remove the files from the list. When files are selected the file name along with a file icon will be shown in a file list beneath the button. By default, this will give us a select button allowing us to choose files from the file browser. Before we implement these features, we will initialize a bare-bones component. We also want to restrict the files that can be selected to images and allow only one file to be selected. When the image is selected, it will immediately appear on the screen. Getting Startedįor this task, we want users to click the select button triggering the file browser window to open. Coming up, I will show you how to use the Upload component to select an image for an avatar. You can use this component to create a file storage app like DropBox or an email form that accepts attachments. With the Kendo UI Upload, you can also select directories to upload, use drag and drop to select files, and validate your files among other features. It is an enhanced version of the HTML file type input which only gives you the option to allow single file or multiple file selection. The Upload lets users select files from their filesystem to upload.
![kendo ui file upload example kendo ui file upload example](https://i.stack.imgur.com/y3f8O.png)
In this part of our series, we will review the Upload component of Kendo UI. Learn how to easily add and utilize an Upload component in your web apps with Kendo UI.
![Kendo ui file upload example](https://kumkoniak.com/109.jpg)