如何强制 addEventListener 提交只运行一次

Question

I am using a XMLHttpRequest() to upload a file individually in an input. The backend is using Laravel.

To achieve this, here is part of the code:

The form and input:

<form id="myformid" name="myformid" method="post" action="{{ route('uploadme') }}" enctype="multipart/form-data">
@csrf
   <div class="input-group" id="input_identificacion">
   <div class="custom-file">
      <input type="file" accept=".pdf" class="file-input" id="inputGroupId" name="pdfdoc" aria-describedby="btn_upload_id">
      <label class="file-label" for="inputGroupId" data-browse="Browse" id="inputLabel">Choose a file</label>
   </div>
   <div class="input-group-append" id="div_upload_btn_id">
       <button class="btn btn-outline-info" type="submit" value="submitId" id="btn_upload_id" title="Upload your file now" disabled><i class="fas fa-file-upload"></i>&nbsp;Upload</button>
   </div>
</div>
</form>

And here goes part of the Javascript :

document.getElementById('myformid').addEventListener('submit', function(evt) {
   evt.preventDefault();
   $('#'+btn_upload_id).prop("disabled",true);
   myUpload(this.action,'nameOfInput',e.target.files[0]);
}, {once: true});

Here is part of myUpload() function:

function myUpload(url,field,input_file){

   var data = new FormData();
   var request = new XMLHttpRequest();
   request.responseType = "json";

   data.append(field,input_file);
   data.append("_token", "{{ csrf_token() }}");

   {{--Once the request is finished--}}
   request.addEventListener("load",function(e){
      if(request.status === 200){
      }
   }

   request.open("post",url);
   request.send(data);
}

The problem is that sometimes I see the file is uploaded to the system twice. How can I prevent that the call to the myUpload() be executed more than once?

Answer 1

You can pass an options object as the third argument with the once property set to true .

document.myformid.addEventListener('submit', function(evt) {
   evt.preventDefault();
   $('#'+btn_upload_id).prop("disabled",true);
   myUpload(this.action,'SomeRequiredvalue',e.target.files[0]);
}, {once: true});