How to clear an input field after uploading a file via a form

Question

I am uploading a file using forms and onSubmit method however after submitting and clearing the input label the file is saved in some blank format and its 0KB. When I comment out the line to clear the input label the excel file is loaded correctly. So the main issue here is the way I am clearing that input label is wrong or I am clearing it in the wrong place.

After some research I came across two errors that I was making. Firstly the file was saving in a different format with 0kb size because I was clearing the input field before the actual upload happened so the program did not know the file nameor file type. I changed that and cleared the input field in the onSubmit function

  <iframe width="0" height="0" border="0" name="dummyframe" 
            style="display: none;" id="dummyframe"></iframe>
  @*<form id="uploadForm" name="form1" method="post" 
            enctype="multipart/form-data" action="/api/BulkUpload" 
            target="dummyframe" onsubmit="submitFunction()">*@
  <form id="uploadForm" name="form1" method="post" 
        enctype="multipart/form-data" action="/api/BulkUpload" 
        target="dummyframe" onsubmit="return Validate(this);">
     <div>

     </div>
     <div id="inputLabel">

        <input id="fileinput" name="image1" type="file" />
     </div>
     <div>
        <span class="btn btn-success fileinput-button">
           <i class="icon-plus icon-white"></i>
           <span>upload file</span>
           <input id="submitButton" class="submit" type="submit" 
                value="ok" @*onclick="setTimeout(clearLabel,3000)"*@ />
        </span>
     </div>
  </form>





var _validFileExtensions = [".xls", ".xlsx"];
function Validate(oForm) {

    //var file = input.file[0];
    var arrInputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
       var oInput = arrInputs[i];
       if (oInput.type == "file") {

          var sFileName = oInput.value;
          if (sFileName.length > 0) {
             var blnValid = false;
             for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length)
                    .toLowerCase() == sCurExtension.toLowerCase()) {
                   blnValid = true;
                   $('#fileinput').val('');
                   break;
                }
             }

             if (!blnValid) {
                $.msgbox("Sorry, " + sFileName + " is invalid, allowed extensions are: " 
                        + _validFileExtensions.join(", "));
                return false;
             }
             //if (file.size >= 5000000)
             //if (oInput.size >= 5242880)
             if (oInput.size >= 50000)

             {

                $.msgbox("Sorry, " + sFileName + " maximum file size is 5MB ");
                return false;
             }
          }
       }
    }

    return true;

}

Matthi · Accepted Answer · 2018-11-07 14:42:17Z

1

The way the upload could work is

User fills in form.
User hits submit.
App validates form data. If not valid, show advice and go on with step 1.
If form valid, send data to server.
After success show user feedback and clear the form. (+Error handling)

More of your code would be helpful, but it seems you are deleting the value of the input (step 3) before transmission (step 4). Better do it after a processable response (or timeout) of your request (step 5).

answered Nov 7, 2018 at 14:42

Matthi

1,0738 silver badges19 bronze badges

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

Comments

Zidane · Accepted Answer · 2018-11-20 08:53:13Z

0

I eneded up using javascript to clear the contents of the textbox after the submit has happened. document.getElementById("sheetName").value = "";

answered Nov 20, 2018 at 8:53

Zidane

1,9144 gold badges27 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to clear an input field after uploading a file via a form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related