ogramDetails.vue:1482 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'className') in Vue

Hi Guys,

I am trying to add class to the component while video being upload. But i got the below error while i am doing that.

ogramDetails.vue:1482 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'className')

Here is the HTML component.

   <div class="col-12 position-absolute cursor-pointer text-center pt-3 mt-4">
                          <div id="upload-spin"></div>
                      </div>

Here is the function for upload.

async uploadMedia(url, file, mediaType, video = false) {
      const headers = {
        'Content-Type': file.type,
      }
      let publish = !!(this.program.published_at);
      //upload-spin
      var d = document.getElementById("upload-spin");
      d.className += "spin";
      await this.$axios
        .put(url, file, { headers })
        .then((response) => {
          this.$notify({
            group: 'all',
            type: 'success',
            text: mediaType + ' ' + this.$t('update_success'),
          })
           if (video){
               var spinElement = document.querySelector('.spin');
               spinElement.style.display = 'none';
           }
          if(video) {
            this.save(publish);
          }
        })
        .catch(({ response }) => {
          this.errors = response.data.errors
          this.$notify({
            group: 'all',
            type: 'error',
            text: mediaType + ' ' + this.$t('update_fail'),
          })
        })
      this.submitStatus = 'OK'
    },

Braunson

2 years ago

Level 18

If you look at your error message Cannot read properties of null (reading 'className') and then look where you are calling className in your code, your using it on an expected element, however if that element is not found getElementById will return null.

So this error is telling you it can't find the div with the id upload-spin. If this is expected and you want to stop it from breaking the page, you can add in code that if element is not found then don't proceed any further (or console log an error, or really whatever you want).

Please or to participate in this conversation.