diff --git a/dashboard/src/components/BackupProviderForm.vue b/dashboard/src/components/BackupProviderForm.vue
index 7c07b38da..972c11d04 100644
--- a/dashboard/src/components/BackupProviderForm.vue
+++ b/dashboard/src/components/BackupProviderForm.vue
@@ -284,7 +284,7 @@ onMounted(async () => {
       <input type="file" id="gcsKeyFileInput" style="display:none" accept="application/json, text/json" @change="onGcsKeyChange"/>
       <label for="gcsKeyInput">{{ $t('backups.configureBackupStorage.gcsServiceKey') }}{{ providerConfig.projectId ? ` - project: ${providerConfig.projectId}` : '' }}</label>
       <InputGroup>
-        <TextInput readonly required style="flex-grow: 1" v-model="gcsKeyFileName" placeholder="Service Account Key" onclick="document.getElementById('gcsKeyFileInput').click();"/>
+        <TextInput readonly required style="flex-grow: 1" v-model="providerConfig.credentials.client_email" placeholder="Service Account Key" onclick="document.getElementById('gcsKeyFileInput').click();"/>
         <Button tool icon="fa fa-upload" onclick="document.getElementById('gcsKeyFileInput').click();"/>
       </InputGroup>
       <div class="error-label" v-show="gcsFileParseError">{{ gcsFileParseError }}</div>
diff --git a/dashboard/src/components/DomainProviderForm.vue b/dashboard/src/components/DomainProviderForm.vue
index c98ebf40e..47dc98630 100644
--- a/dashboard/src/components/DomainProviderForm.vue
+++ b/dashboard/src/components/DomainProviderForm.vue
@@ -4,7 +4,8 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { TextInput, FormGroup, Checkbox, SingleSelect } from 'pankow';
+import { ref } from 'vue';
+import { TextInput, InputGroup, Button, FormGroup, Checkbox, SingleSelect } from 'pankow';
 import { ENDPOINTS_OVH } from '../constants.js';
 import DomainsModel from '../models/DomainsModel.js';
 
@@ -88,18 +89,37 @@ function onProviderChange(p) {
   resetFields(p);
 }
 
+const gcdnsFileParseError = ref('');
 function onGcdnsFileInputChange(event) {
-  const reader = new FileReader();
-  reader.onload = function (result) {
-    if (!result.target || !result.target.result) return console.error('Unable to read local file');
-    const serviceAccount = JSON.parse(result.target.result);
-    dnsConfig.value.projectId = serviceAccount.project_id;
-    dnsConfig.value.credentials = {
-      client_email: serviceAccount.client_email,
-      private_key: serviceAccount.private_key,
-    };
+  gcdnsFileParseError.value = '';
+
+  const fr = new FileReader();
+
+  fr.onload = () => {
+    // validate input file
+    try {
+      const keyJson = JSON.parse(fr.result);
+      if (!keyJson.project_id) throw new Error('project_id field missing in JSON key file');
+      if (!keyJson.client_email) throw new Error('client_email field missing in JSON key file');
+      if (!keyJson.private_key) throw new Error('private_key field missing in JSON key file');
+
+      dnsConfig.value.projectId = keyJson.project_id;
+      dnsConfig.value.credentials = {
+        client_email: keyJson.client_email,
+        private_key: keyJson.private_key,
+      };
+    } catch (e) {
+      if (e.name === 'SyntaxError') gcdnsFileParseError.value = 'Invalid JSON';
+      else gcdnsFileParseError.value = e.message;
+
+      dnsConfig.value.projectId = '';
+      dnsConfig.value.credentials = {
+        client_email: '',
+        private_key: '',
+      };
+    }
   };
-  reader.readAsText(event.target.files[0]);
+  fr.readAsText(event.target.files[0]);
 }
 
 </script>
@@ -123,14 +143,13 @@ function onGcdnsFileInputChange(event) {
 
     <!-- Google Cloud DNS -->
     <FormGroup v-if="provider === 'gcdns'">
-      <label class="control-label">{{ $t('domains.domainDialog.gcdnsServiceAccountKey') }}</label>
-      <div class="input-group">
-        <input type="file" id="gcdnsKeyFileInput" style="display:none" @change="onGcdnsFileInputChange"/>
-        <input type="text" class="form-control" placeholder="Service Account Key" v-model="dnsConfig.projectId" onclick="getElementById('gcdnsKeyFileInput').click();" style="cursor: pointer;" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'gcdns'">
-        <span class="input-group-addon">
-          <i class="fa fa-upload" onclick="getElementById('gcdnsKeyFileInput').click();"></i>
-        </span>
-      </div>
+      <input type="file" id="gcdnsKeyFileInput" style="display:none" accept="application/json, text/json" @change="onGcdnsFileInputChange"/>
+      <label class="control-label">{{ $t('domains.domainDialog.gcdnsServiceAccountKey') }}{{ dnsConfig.projectId ? ` - project: ${dnsConfig.projectId}` : '' }}</label>
+      <InputGroup>
+        <TextInput readonly required style="flex-grow: 1" v-model="dnsConfig.credentials.client_email" placeholder="Service Account Key" onclick="getElementById('gcdnsKeyFileInput').click();"/>
+        <Button tool icon="fa fa-upload" onclick="document.getElementById('gcdnsKeyFileInput').click();"/>
+      </InputGroup>
+      <div class="error-label" v-show="gcdnsFileParseError">{{ gcdnsFileParseError }}</div>
     </FormGroup>
 
     <!-- DigitalOcean -->