Reset fileupload control from javascript

Question

I have a ASP website page where i have a upload control added

<asp:FileUpload ID="FileUpload1" runat="server" 
                        BorderStyle="None" Width="215px" onchange="return checkfile();" style="margin-left: 14px" BackColor="#F0F0F0" />

From javascript i am validating the file which will be uploaded. If it is of type .exe then I will not allow to upload and give a message. if not i will display the file name in label "lblFileName" . But the problem if error(in case file is exe) then i want to reset the upload control(FileUpload1) . Now it will show only message but allows form to submit along with the .exe file.So how I can reset it?

 function checkfile() {

     var filename = document.getElementById("FileUpload1").value;
     var lastIndex = filename.lastIndexOf("\\");


     if (lastIndex >= 0) {
         filename = filename.substring(lastIndex + 1);
     }

    var FileExt = filename.split('.').pop();

    if (FileExt == "exe") {  

        document.getElementById('<%=lblFileName.ClientID%>').innerHTML = "you cannot attach exe file";
    return false;

     }
    else {
        document.getElementById('<%=lblFileName.ClientID%>').innerHTML = filename;
    }
  }

enter image description here

this link has some good tricks.

Ja8zyjits
– Ja8zyjits

2016-01-15 11:50:53 +00:00
Commented Jan 15, 2016 at 11:50 — Ja8zyjits
– Ja8zyjits, Commented Jan 15, 2016 at 11:50

Just code · Accepted Answer · 2017-09-26 06:59:38Z

6

Your code is the problem onchange="return checkfile();"

And your function should look like

    function checkfile() {

         var filename = document.getElementById("FileUpload1").value;
         var lastIndex = filename.lastIndexOf("\\");


         if (lastIndex >= 0) {
             filename = filename.substring(lastIndex + 1);
         }

        var FileExt = filename.split('.').pop();

        if (FileExt == "exe") {         
            document.getElementById('lblFileName').innerHTML = "you cannot attach exe file";
            document.getElementById("FileUpload1").value='';
            return false;

         }
         else {
            document.getElementById('lblFileName').innerHTML = filename;
        }
      }

Return will disallow file to put in your file upload control so this will solve your problem

Please check demo here

edited Sep 26, 2017 at 6:59

answered Mar 28, 2014 at 10:03

Just code

13.8k10 gold badges54 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

IT researcher Over a year ago

i have tried the same script you mentioned ,but it didnt work. check screenshot attached in question

Just code Over a year ago

Hello please add this line document.getElementById("FileUpload1").value=''; i have put in my function check above function you forgot to add this line

Besnik Kastrati · Accepted Answer · 2014-12-24 09:23:56Z

0

I am doing it this way using jquery:

    $(function () {        
    $('<%= fileUploadCV.ClientID %>').change(function () {

        //because this is single file upload I use only first index
        var f = this.files[0]

        //here I check if the file size is bigger than 8 MB (numbers below are in bytes)
        if (f.size > 8388608 || f.fileSize > 8388608)
        {
           //show an alert to the user
           alert("Allowed file size exceeded. (Max. 8 MB)")

           //and RESET file upload control
           this.value = null;
        }
    })
});

answered Dec 24, 2014 at 9:23

Besnik Kastrati

8278 silver badges6 bronze badges

Collectives™ on Stack Overflow

Reset fileupload control from javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related