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. Image for the cookie policy date
close icon

Reset Uploadbox.

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");
 upload._xhrPerformUpload($(fileItem).data("file"));

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


9 Replies

KR Keerthana Rajendran Syncfusion Team 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 
 
Regards, 
Keerthana 
 



NO noName 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:

$(element).ejUploadbox({

                            saveUrl: "some url",

                            showFileDetails: false,

                            extensionsAllow: ".png, .jpg",





KR Keerthana Rajendran Syncfusion Team 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 
 
$("#UploadDefault").ejUploadbox({ 
                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._currentElement.find(".e-uploadinput").val("");  
                            this._resetFileInput(this._currentElement.find(".e-uploadinput")); //reset the upload box input  
                        } 
                    } 
                }, 
                success:function(args) 
                { 
                    $("#ListFiles").append('<tr><td>' +args.files.name +" has been uploaded successfully"+ '</td></tr>'); 
                } 
            }); 
 
You can modify this condition based on your scenario.  
 
Regards, 
Keerthana 
 



NO noName 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 ?



KR Keerthana Rajendran Syncfusion Team 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.
   
Regards,   
Keerthana   
 



NO noName 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.




KR Keerthana Rajendran Syncfusion Team 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");   
            uploadobj._removeFile(uploadobj.inputupload[0].files[0]);   
            uploadobj._currentElement.find(".e-uploadinput").val("");   
            uploadobj._resetFileInput(uploadobj._currentElement.find(".e-uploadinput"));   
            $("#file")[0].remove();   
            $("#cancel").css("display""none");   
        }   
   
        function OnUpload() {   
            var uploadobj = $("#UploadDefault").data("ejUploadbox");   
            uploadobj.upload();   
           }   
   
   
Regards,   
Keerthana   
 



NO noName September 19, 2017 06:16 PM UTC

Thanks, it works.




KR Keerthana Rajendran Syncfusion Team 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 
 
Regards, 
Keerthana. 


Loader.
Live Chat Icon For mobile
Up arrow icon