JavaScript Uploader UI widget

Uploader is a JavaScript file upload widget that provides an easy and reliable way to upload data to the server side. This widget allows you to browse directories on your PC and choose the needed files. It also allows dragging and dropping files for uploading.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Samples of PHP, Node.js, .NET integration
  • Support of All Modern browsers
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

File or directory upload

With this control you can upload files one by one or enable the directory uploading mode. The latter allows uploading multiple files at a time by selecting the folder in which they are located.

Viewing file properties

You can connect Webix List or Template widgets to inspect file name, extension, size and uploading status. Also, you can define that files are not sent to the server the moment they are added and, after checking their content in the related widget, start the uploading process.

Progress bar

The progress bar feature enables keeping track of the uploading process.

Add any file and click 'Upload'

Invisible Uploader

An invisible uploader lets you trigger the process of uploading without clicking the dedicated control. It can be used for data management widgets to edit pictures associated with data items on the client side.

Uploader with HTML Form

You can use the Uploader widget as a form element alongside with other Webix form controls. This feature allows getting the required info from a user.

Drag-and-drop file upload

Drag-and-drop support is enabled by default, so you can drag any file to the Uploader button and drop it to start uploading. Besides, you can use the invisible uploader to define a custom drop area for uploaded files, such as a particular HTML element or a Webix component.

Setting file formats for upload

You can set the types of files allowed for file upload. If you want to create a web image gallery with a convenient way to upload images, the JavaScript File Uploader widget can be configured to meet your needs. For example, you can specify a particular image file type accepted for uploading, such as JPG or PNG, or define that only text files are allowed.

Try to upload an image and a text file