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.

Reset Uploadbox.

Thread ID:

Created:

Updated:

Platform:

Replies:

132625 Sep 12,2017 01:21 PM Sep 19,2017 11:47 PM JavaScript 9
loading
Tags: ejUploadbox
noName
Asked On September 13, 2017 10:23 AM

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 ?


Keerthana Rajendran [Syncfusion]
Replied On September 13, 2017 11:01 AM

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 
 


noName
Replied On September 14, 2017 11:02 AM

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",




Keerthana Rajendran [Syncfusion]
Replied On September 15, 2017 08:59 AM

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 
 


noName
Replied On September 15, 2017 12:09 PM

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 08:38 AM

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   
 


noName
Replied On September 18, 2017 09:06 AM

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 08:34 AM

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   
 


noName
Replied On September 19, 2017 02:16 PM

Thanks, it works.



Keerthana Rajendran [Syncfusion]
Replied On September 19, 2017 11:47 PM

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. 


CONFIRMATION

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.

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.

;