fix: workflow stuck when execute the upload file block

src/components/newtab/workflow/edit/EditUploadFile.vue

@@ -1,26 +1,44 @@
 <template>
   <edit-interaction-base v-bind="{ data, hide: hideBase }" @change="updateData">
-    <div class="mt-4 space-y-2">
-      <div
-        v-for="(path, index) in filePaths"
-        :key="index"
-        class="flex items-center group"
-      >
-        <ui-input
-          v-model="filePaths[index]"
-          :placeholder="t('workflow.blocks.upload-file.filePath')"
-          class="mr-2"
-        />
-        <v-remixicon
-          name="riDeleteBin7Line"
-          class="invisible cursor-pointer group-hover:visible"
-          @click="filePaths.splice(index, 1)"
-        />
+    <template v-if="hasFileAccess">
+      <div class="mt-4 space-y-2">
+        <div
+          v-for="(path, index) in filePaths"
+          :key="index"
+          class="flex items-center group"
+        >
+          <ui-input
+            v-model="filePaths[index]"
+            :placeholder="t('workflow.blocks.upload-file.filePath')"
+            class="mr-2"
+          />
+          <v-remixicon
+            name="riDeleteBin7Line"
+            class="invisible cursor-pointer group-hover:visible"
+            @click="filePaths.splice(index, 1)"
+          />
+        </div>
+      </div>
+      <ui-button variant="accent" class="mt-2" @click="filePaths.push('')">
+        {{ t('workflow.blocks.upload-file.addFile') }}
+      </ui-button>
+    </template>
+    <template v-else>
+      <div class="mt-4 p-2 rounded-lg bg-red-200 flex items-start">
+        <v-remixicon name="riErrorWarningLine" />
+        <div class="ml-2 flex-1 leading-tight">
+          <p>{{ t('workflow.blocks.upload-file.noFileAccess') }}</p>
+        </div>
       </div>
-    </div>
-    <ui-button variant="accent" class="mt-2" @click="filePaths.push('')">
-      {{ t('workflow.blocks.upload-file.addFile') }}
-    </ui-button>
+      <a
+        href="https://docs.automa.site/blocks/upload-file.html#requirements"
+        target="_blank"
+        rel="noopener"
+        class="leading-tight inline-block text-primary mt-2"
+      >
+        {{ t('workflow.blocks.upload-file.requirement') }}
+      </a>
+    </template>
   </edit-interaction-base>
 </template>
 <script setup>
@@ -43,11 +61,16 @@ const emit = defineEmits(['update:data']);
 const { t } = useI18n();
 
 const filePaths = ref([...props.data.filePaths]);
+const hasFileAccess = ref(false);
 
 function updateData(value) {
   emit('update:data', { ...props.data, ...value });
 }
 
+chrome.extension.isAllowedFileSchemeAccess((value) => {
+  hasFileAccess.value = value;
+});
+
 watch(
   filePaths,
   (paths) => {

src/content/blocks-handler/handler-upload-file.js

@@ -18,7 +18,7 @@ export default async function (block) {
 
   const getFile = async (path) => {
     const file = await sendMessage('get:file', path, 'background');
-    const name = file.path.replace(/^.*[\\/]/, '');
+    const name = file.path?.replace(/^.*[\\/]/, '') || '';
     const blob = await fetch(file.objUrl).then((response) => response.blob());
 
     URL.revokeObjectURL(file.objUrl);

src/locales/en/blocks.json

@@ -32,7 +32,9 @@
         "name": "Upload file",
         "description": "Upload file into <input type=\"file\"> element",
         "filePath": "File path",
-        "addFile": "Add file"
+        "addFile": "Add file",
+        "requirement": "See the requirement before using this block",
+        "noFileAccess": "Automa doesn't have file access"
       },
       "browser-event": {
         "name": "Browser event",

src/newtab/App.vue

@@ -15,6 +15,8 @@
       </p>
       <a
         :href="`https://github.com/Kholid060/automa/releases/tag/v${currentVersion}`"
+        target="_blank"
+        rel="noopener"
         class="underline ml-1"
       >
         {{ t('updateMessage.text2') }}

src/utils/reference-data/mustache-replacer.js

@@ -18,6 +18,8 @@ export function extractStrFunction(str) {
 }
 
 export default function (str, data) {
+  if (!str || typeof str !== 'string') return '';
+
   const replacedStr = str.replace(/\{\{(.*?)\}\}/g, (match) => {
     const key = match.slice(2, -2).trim();