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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Reset Uploadbox.

Thread ID:





132625 Sep 12,2017 05:21 PM UTC Sep 20,2017 03:47 AM UTC JavaScript 9
Tags: ejUploadbox
Asked On September 13, 2017 02:23 PM UTC

I am trying to reset Uploadbox in this way: $('.e-uploadinput').val(""); ant it reset this input, but when I press save, it send data with selected image:

 var upload = $('#upload-img-input').ejUploadbox("instance");
 var wrapper = upload.diaObj.wrapper;
 var fileItem = wrapper.find(".e-ul li.e-upload-file");

I want when I select image with UploadBox and press button for reset to unset Uploadbox data. How to reset the UploadBox ?

Keerthana Rajendran [Syncfusion]
Replied On September 13, 2017 03:01 PM UTC

Dear Customer, 
Thank you for contacting  Syncfusion support. 
By default , we have an option to reset the Uploadbox input after selecting the file by clicking the cancel button of upload box. Also you can remove the uploaded file by clicking the delete button in Dialog.  
Please refer to the demo sample in the below link 
Also , refer to the below given UG Links to know more details about Uploadbox functionalities 
We have prepared a video based on the working of Upload box and how to cancel file upload. Please refer to the below given link 
If we have misunderstood , please provide us some clear details on your scenario such as whether you are using Synchronous or Asynchronous upload and whether you are overriding any existing code of Upload box in your end so that we can proceed further 

Replied On September 14, 2017 03:02 PM UTC

I am using  showFileDetails: false. 

I don't want to use standard Cancel button. I have another logic.

I need method or something which I can reset UploadBox with JS.

These are settings for creating UploadBox:


                            saveUrl: "some url",

                            showFileDetails: false,

                            extensionsAllow: ".png, .jpg",

Keerthana Rajendran [Syncfusion]
Replied On September 15, 2017 12:59 PM UTC

Dear Customer,  
We have prepared a sample based on your requirement. Please refer to the below given link 
In the above sample we have removed a particular file based on the file name during fileSelect event of Upload box using the below code 
                saveUrl: "http://js.syncfusion.com/demos/web/uploadbox/saveFiles.ashx", 
                removeUrl: "http://js.syncfusion.com/demos/web/uploadbox/removeFiles.ashx", 
                showFileDetails: false, 
                extensionsAllow: ".png,.jpg", 
                autoUpload: true, 
                fileSelect: function (args) { 
                    for (i = 0; i < args.files.length; i++) { 
                        if (args.files[i].name == "Drag-and-Drop-img1.png") // set the file name or extension based on your requirement  
                            this._removeFile(args.files[i]); // remove the file  
                            this._resetFileInput(this._currentElement.find(".e-uploadinput")); //reset the upload box input  
                    $("#ListFiles").append('<tr><td>' +args.files.name +" has been uploaded successfully"+ '</td></tr>'); 
You can modify this condition based on your scenario.  

Replied On September 15, 2017 04:09 PM UTC

Ok, but I need this  not appended in the select event of the control, but I need it when is clicked custom button. How to access these methods in no UploadBox events, but events for custom html tags ?

Keerthana Rajendran [Syncfusion]
Replied On September 18, 2017 12:38 PM UTC

Dear Customer,   
When we set showFileDetails as false in Uploadbox , autoUpload property has to be set it to true, so that the files will be uploaded automatically after selection. We can remove the selected file and reset the input only during fileSelect event   
Please provide us some details on the following    
  1. Whether you are uploading the files using autoUpload or else you have customized this in any button click in your sample
  2. Do you have any specific reason for setting showFileDetails: false? When you set this property to true you can cancel or upload a file easily as per your requirement.
  3. Whether you are expecting the file details list to be displayed in a div as well as cancel and upload action to be performed without dialog. If so we can customize the sample accordingly and update you.

Replied On September 18, 2017 01:06 PM UTC

Hi, I don't use auto upload. I am using click button event for that. 

When file is selected JS creates the preview - selected image with cancel button (X), but not auto uploading . I am using select UploadBox event to create this preview.

When cancel button is clicked, it deletes only the image from HTML (the preview). The image is not uploaded before clicking save button.

I don't use file details, because I have another design without this popup and only image with X button in specific container.

There is no multiple files upload. It is only 1 file and X button on it.

Keerthana Rajendran [Syncfusion]
Replied On September 19, 2017 12:34 PM UTC

Dear Customer,   
Thanks for sharing us the details.   
We have prepared a sample based on your requirement. Please refer to the below given link   
In the above sample, we have removed the chosen file and reset input while clicking reset button. If you choose upload button then the files will be uploaded in the destination. Please refer to the below given code   
    function reset()   
            var uploadobj = $("#UploadDefault").data("ejUploadbox");   
        function OnUpload() {   
            var uploadobj = $("#UploadDefault").data("ejUploadbox");   

Replied On September 19, 2017 06:16 PM UTC

Thanks, it works.

Keerthana Rajendran [Syncfusion]
Replied On September 20, 2017 03:47 AM UTC

Dear Customer, 
Thanks for your update. We are glad to hear that our suggestion helped you to achieve your requirement. Please get back to us if you require further assistance on this. We will be happy to assist you 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon