We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

How to add additional text box in the Upload box's dialog ?

To add additional fields to the Uploadbox’s dialog, override the internal _pushFileDetails method to include the new elements. The internal methods can be overridden as follows:

 

Render and add the header for the new textbox.

 

Then, create the textbox element with necessary class to provide styles.

 

Once it is created, append it to the container element.

 

Refer to the following combined code snippet.

 

Note: The _pushFileDetails method can be overridden in the previous code.  Placing this code in the application will replace the default _ pushFileDetails method. The highlighted code is added in addition to the default code in the method.

Also, modify the existing styles to fit the textbox and apply some styling to blend the newly added text box in the Upload box’s dialog. Kindly refer to the following code snippet.

<style class="cssStyles"> 

/* Override the existing styles for the items in the dialog*/ 

    .e-uploadbox .e-head-name.e-uploadbox .e-head-status { 

        width150px; 

    } 

    .e-uploadbox .e-file-progress { 

        width130px; 

    } 

    .e-uploadbox .e-file-list .e-file-percentage { 

        width120px; 

    } 

 

/* Provide styles for newly added textbox content*/ 

    .e-uploadbox .e-file-head.e-head-box { 

        width80px; 

    } 

    .e-uploadbox .e-file-box { 

        padding-top12px; 

    } 

    .e-uploadbox .e-file-box .e-filetxt { 

        width50px; 

        border4px solid black; 

    } 

</style> 

 

Sample

Article ID: Published Date: Last Revised Date: Platform: Control:
8958 07/12/2018 07/12/2018 JavaScript ejUploadbox
Did you find this information helpful?
Add Comment
You must log in to leave a comment

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.