Restricting uploading files based on its extension

Allow Extension

Files are filtered before they are uploaded. You can select the files to be filtered by using browse button. The extensionsAllow property allows upload of the selected extensions only. You can give multiple extensions by using comma (,). The data type is string.

NOTE

Prepend dot (.) symbol with extension like “.pdf”.

The following steps explain the configuration of extensionsAllow property in Uploadbox.

In the HTML page, add the <div> element to configure the Uploadbox element.

  • html
  • <div id="Uploadbox"></div>
  • js
  • // Initializes the control in JavaScript.
    /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module UploadboxComponent {
        $(function () {
            var sample = new ej.Uploadbox($("#Uploadbox"),{
                    saveUrl: "saveFiles.ashx",
                    removeUrl: "removeFiles.ashx",
                    extensionsAllow: ".docx, .pdf"
                });
            });
    }

    For JS, configure saveFiles.ashx and removeFiles.ashx files as mentioned in the Save file action and Remove file action respectively.

    Deny Extension

    Files are filtered before they are uploaded. You can select the files to be filtered by using browse button. The extensionsDeny property denies upload of the selected extensions. You can give multiple extensions by using comma (,). The data type is string.

    NOTE

    Prepend dot (.) symbol with extension like “.pdf”.

    The following steps explain the configuration of extensionsDeny property in Uploadbox

    In the HTML page, add the <div> element to configure the Uploadbox element.

  • html
  • <div id="Uploadbox"></div>
  • js
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module UploadboxComponent {
        $(function () {
            var sample = new ej.Uploadbox($("#Uploadbox"),{
                    saveUrl: "saveFiles.ashx",
                    removeUrl: "removeFiles.ashx",
                    extensionsDeny: ".docx, .pdf"
                });
            });
    }

    For JS, configure saveFiles.ashx and removeFiles.ashx files as mentioned in the Save file action and Remove file action respectively.

    NOTE

    When extensionsDeny and extensionsAllow properties have same file extension, the extension will be allowed.