Saturday, 23 April 2022

File upload field not resetting after a successful submission in VueJS

In my VUeJS application I have a form to submit some data.

Once a user submits the form it should clear the existing field values.

But now when I submit the form it clears the all the fields except the file upload field.

If I uploaded a file called, dummy.pdf, it will display the dummy.pdf even after a successful submission.

Following is my code for the file upload field,

<div class="mb-1">
            <dashboard-input-label
              identifier="document"
              :settings="{ help: true, helpDirection: 'left' }"
            >
              Upload document
              <template slot="helpText">
                Maximum filesize is 5 MB. The default allowed file extensions
                are: pdf, jpeg and png.
              </template>
            </dashboard-input-label>
            <validator-v2
              :identifier="identifier"
              name="document_file"
              :rules="{ required: { message: 'Document is required.' } }"
            >
              <custom-file-upload
                ref="documentDocument"
                v-model="documentFile"
                :max-upload-file-size="5"
                name="document_file"
              ></custom-file-upload>
            </validator-v2>
          </div>

And my form button is,

<disables-submit-on-errors
            :identifier="identifier"
            @proceed="storeDocumentAndAddNew"
          >
            <loading-button ref="submitBtn" size="normal">
              Save & Add new
            </loading-button>

and under the methods, I have

storeDocumentAndAddNew() {
      this.isAddNew = true
      const loader = this.$refs.submitBtn
      this.storeDocument(loader)
    },

reset() {
      this.documentName= null
      this.dateOfIssue= null
      this.expiryDate= null
      this.documentNumber = null
      this.doesNotHaveDocumentNumber = false
      this.doesNotExpire = false
      this.documentFile = null
      this.doesOptIn = false
      this.isAddNew = false
    },

This will clear the name field, and the document number fields, but this won't clear the uploaded document's name...

What change I need to do clear all the fields after a successful submission?



from File upload field not resetting after a successful submission in VueJS

No comments:

Post a Comment