Vue Js Check if Input File is Empty

<!DOCTYPE html>
<html lang="en">

<body>
  <div id="app">
    <h3>Vue Js Check if Input File is Empty</h3>
    <input type="file" ref="fileInput" @change="checkFile" />
    <p v-if="isFileEmpty" class="empty">File is empty</p>
    <p v-else class="not-empty">Selected file: {{ selectedFileName }}</p>
  </div>

// Check if files are selected
          if (fileInput.files.length > 0) {
            this.isFileEmpty = false;
            this.selectedFileName = fileInput.files[0].name; // Display the selected file name
          } else {
            this.isFileEmpty = true;
            this.selectedFileName = "";
          }
        }
      }
    });
  </script>

input[type="file"] {
      margin-top: 10px;
    }

p {
      margin-top: 10px;
      font-weight: bold;
    }

p.empty {
      color: red;
      /* You can customize the color for an empty file message */
    }

p.not-empty {
      color: green;
      /* You can customize the color for a non-empty file message */
    }
  </style>
</body>

</html>