WIP Добавил модальное окно для редактирования фото

src/components/base/BaseUploadPhoto.vue

@@ -0,0 +1,73 @@
+<template lang="pug">
+  .flex.flex-col.items-center.justify-center(
+    :style="{padding: '153px 370px'}"
+  )
+    .avatar-wrapper.flex.relative
+      base-input(
+        circle,
+        type="file",
+        id="image-upload",
+        accept="image/*",
+        @change="(e)=>previewImage(e)",
+      )
+      .avatar.flex.absolute.items-center.gap-x-6
+        img.avatar.object-cover(for="image-upload", :src="image")
+        q-btn(
+          round,
+          color="primary",
+          @click="confirm",
+          icon="app:icon-ok"
+        )
+</template>
+
+<script>
+import BaseInput from "./BaseInput.vue";
+import addImageIcon from "@/assets/icons/photo.svg";
+import { v_model } from "@/shared/mixins/v-model";
+
+export default {
+  name: "BaseModalUploadPhoto",
+  components: { BaseInput, addImageIcon },
+  data() {
+    return {
+      image: addImageIcon,
+    };
+  },
+  mixins: [v_model],
+  props: {
+    confirmUpload: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  methods: {
+    previewImage(event) {
+      let picture = event.target.files;
+      let reader = new FileReader();
+      reader.onload = (e) => {
+        this.image = e.target.result;
+      };
+      reader.readAsDataURL(picture[0]);
+    },
+    confirm() {
+      this.value = this.image;
+      this.confirmUpload();
+    },
+  },
+  created() {
+    if (this.value) {
+      this.image = this.value;
+    }
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.avatar-wrapper
+  width: 400px
+  height: 400px
+  border-radius: 50%
+.avatar
+  height: 100%
+  border-radius: 50%
+</style>