Reset Uploadbox.

[noName]

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]

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 

 

http://js.syncfusion.com/demos/web/#!/bootstrap/uploadbox/defaultfunctionalities 

 

Also , refer to the below given UG Links to know more details about Uploadbox functionalities 

 

https://help.syncfusion.com/api/js/ejuploadbox 

 

https://help.syncfusion.com/js/uploadbox/overview 

 

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 

 

Video: http://www.syncfusion.com/downloads/support/forum/132625/ze/upload-124419653.zip 

 

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]

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]

Dear Customer,  

 

We have prepared a sample based on your requirement. Please refer to the below given link 

 

Sample: http://jsplayground.syncfusion.com/bpvk1gqo 

 

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]

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]

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]

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]

Dear Customer,   

   

Thanks for sharing us the details.   

   

We have prepared a sample based on your requirement. Please refer to the below given link   

   

Sample: http://jsplayground.syncfusion.com/tiw0atnn   

   

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]

Thanks, it works.

[Keerthana Rajendran]

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.