Better ocr creation page

mealie-recipes · Sep 3, 2022 · d696560 · d696560
1 parent a09ffe6
commit d696560
Showing 1 changed file with 26 additions and 4 deletions.
diff --git a/frontend/pages/recipe/create/ocr.vue b/frontend/pages/recipe/create/ocr.vue
@@ -5,11 +5,29 @@
       Create a recipe by uploading a scan.
       <v-form ref="domCreateByOcr"> </v-form>
     </v-card-text>
+    <v-card-actions class="justify-center">
+      <v-file-input
+        v-model="imageUpload"
+        accept=".png"
+        label="recipe.png"
+        filled
+        clearable
+        class="rounded-lg mt-2"
+        rounded
+        truncate-length="100"
+        hint="Upload a png image from a recipe book"
+        persistent-hint
+        prepend-icon=""
+        :prepend-inner-icon="$globals.icons.fileImage"
+      />
+    </v-card-actions>
     <v-card-actions class="justify-center">
       <v-checkbox v-model="makeFileRecipeImage" :label="$t('new-recipe.make-recipe-image')" />
     </v-card-actions>
     <v-card-actions class="justify-center">
-      <AppButtonUpload :post="false" file-name="file" :text-btn="false" accept="image/*" @uploaded="createByOcr" />
+      <div style="width: 250px">
+        <BaseButton :disabled="imageUpload === null" large rounded block :loading="loading" @click="createByOcr" />
+      </div>
     </v-card-actions>
   </div>
 </template>
@@ -30,6 +48,8 @@ export default defineComponent({
     const api = useUserApi();
     const router = useRouter();
 
+    const imageUpload = ref<File | null>(null);
+
     function handleResponse(response: AxiosResponse<string> | null) {
       if (response?.status !== 201) {
         state.error = true;
@@ -41,9 +61,10 @@ export default defineComponent({
 
     const domCreateByOcr = ref<VForm | null>(null);
 
-    async function createByOcr(file: File) {
-      console.log("file: ", file);
-      const { response } = await api.recipes.createFromOcr(file, state.makeFileRecipeImage);
+    async function createByOcr() {
+      if (imageUpload.value === null) return; // Should never be true due to circumstances
+      state.loading = true;
+      const { response } = await api.recipes.createFromOcr(imageUpload.value, state.makeFileRecipeImage);
       // @ts-ignore returns a string and not a full Recipe
       handleResponse(response);
     }
@@ -53,6 +74,7 @@ export default defineComponent({
       createByOcr,
       ...toRefs(state),
       validators,
+      imageUpload,
     };
   },
 });