Zmodyfikuj poniższy kod, aby zrealizować poniższe zadnie.

/// ZADANIE

Potrzebujemy mieć możliwość pobrania zdjęcia z tej zakładki.
Generalnie chodzi o to, aby wczytywany załącznik do zapisania zdjęcia, mógł zostać potem pobrany. 
Możemy dodać przycisk "Pobierz" pod zdjęciem.

/// edit-medical-staff-profile.vue

<template>
  <loading-container :is-loaded="isLoaded" fluid class="mx-0 px-1 pb-12">
    <v-row>
      <v-col>
        <v-form ref="itemForm">
          <v-row justify="space-between">
            <v-col cols="auto">
              <staff-title-input
                v-model="model.title"
                class="mt-2"
                :readonly="readonly"
                :filled="readonly"
                style="max-width: 256px" />
            </v-col>
            <v-col cols="auto">
              <v-checkbox
                v-model="model.refundedPrescriptions"
                label="Wystawia recepty refundowane" />
            </v-col>
          </v-row>

          <markup-input
            v-model="model.summary"
            :readonly="readonly"
            :rows="2"
            label="Opis skrócony" />

          <markup-input
            v-model="model.longSummary"
            class="mt-8"
            :readonly="readonly"
            :rows="6"
            label="Opis pełny" />
        </v-form>
        <single-file-upload
          v-model="model.attachmentData.model"
          :callback="onUpdate"
          accept="image/png, image/jpeg, image/svg+xml"
          max-file-size="64 * 1024"
          class="mt-2"
          :readonly="readonly" />
      </v-col>
      <v-col cols="auto">
        <v-card
          flat
          outlined
          width="300"
          height="300"
          style="">
          <v-row style="height: 100%" align="center" justify="center">
            <v-col cols="auto">
              <v-img v-if="model.avatarUrl" cols="auto" max-width="550" :src="model.avatarUrl" />
              <span v-else class="text-body-2">Brak zdjęcia profilowego</span></v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>

    <v-row justify="end">
      <v-col cols="auto">
        <submit-discard-async-buttons
          :disabled="!model.isModified"
          :submit="submit"
          :submit-disabled="readonly"
          @discard="discard" />
      </v-col>
    </v-row>
  </loading-container>
</template>
<script lang="ts">
import SubmitDiscardButtons from "@/components/action-buttons/submit-discard-buttons.vue";
import EditDeleteButtons from "@/components/action-buttons/edit-delete-buttons.vue";
import type {
  PropType} from "@vue/composition-api";
import {
  computed,
  defineComponent,
  inject,
  onBeforeUpdate,
  ref,
  watch
} from "@vue/composition-api";
import axios from "@/lib/axios";
import LoadingContainer from "@/components/loading/loading-container.vue";
import type { MedicalStaffData } from "@/views/commerce/medical-staff/medical-staff-data";
import TextLabel from "@/components/simple/text-label.vue";
import SubmitDiscardAsyncButtons from "@/components/action-buttons/submit-discard-async-buttons.vue";
import MarkupInput from "@/components/markup/markup-input.vue";
import SingleFileUpload from "@/components/file-upload/single-file-upload.vue";
import StaffTitleInput from "@/views/commerce/common/staff-title-input.vue";
import Notifier from "@/views/main-wrap/notifier";

const EditMedicalStaffProfile = defineComponent({
  components: {
    StaffTitleInput,
    SingleFileUpload,
    MarkupInput,
    SubmitDiscardAsyncButtons,
    TextLabel,
    LoadingContainer,
    SubmitDiscardButtons,
    EditDeleteButtons
  },
  props: {
    medicalStaffData: {
      type: Object as PropType<MedicalStaffData>,
      required: true
    },
    readonly: {
      type: Boolean,
      required: true
    }
  },

  setup(props, context) {
    const notifier = inject(Notifier.Key) as Notifier;

    const isLoaded = ref(true);
    const itemForm = ref(null);

    const model = ref(props.medicalStaffData.profile);

    onBeforeUpdate(() => {
      itemForm.value = null;
    });

    watch(
      () => props.medicalStaffData,
      (nv, _) => (model.value = nv.profile)
    );

    const canEdit = computed(() => {
      return !props.readonly;
    });

    const discard = () => {
      model.value.discard();
    };

    const onUpdate = async _ => {
      const dto = {
        ...model.value.dto,
        id: props.medicalStaffData.id
      };
      await axios.put("/api/services/app/MedicalStaff/UpdateProfile", dto);
      context.emit("update");
    };

    const submit = async () => {
      if (!(itemForm.value as any).validate()) return;
      const dto = {
        ...model.value.dto,
        id: props.medicalStaffData.id
      };
      await axios.put("/api/services/app/MedicalStaff/UpdateProfile", dto);
      notifier.successToast("Dane zapisane");
      context.emit("update");
    };

    return {
      submit,
      discard,
      model,
      canEdit,
      isLoaded,
      onUpdate,
      itemForm
    };
  }
});
export default EditMedicalStaffProfile;
</script>
<style scoped>
.duration-input {
  min-width: 60px;
  max-width: 60px;
}
</style>

/// single-file-upload.vue

<template>
  <v-container class="ma-0" fluid>
    <v-row v-if="!readonly" dense align="center">
      <v-col>
        <v2-form :validator="formRef">
          <v-file-input
            v-model="fileToUpload"
            :accept="accept"
            :label="label"
            :rules="fileUploadRules"
            clearable
            persistent-hint
            show-size
            small-chips>
            <template #append>
            </template>
          </v-file-input>
        </v2-form>
      </v-col>
      <v-col cols="auto">
        <submit-button color="primary" :disabled="!fileToUpload" :action="upload">
          <v-icon left>
            mdi-content-save
          </v-icon>Zapisz
        </submit-button>
      </v-col>
      <v-col cols="auto">
        <delete-async-btn
          :action="clear"
          :disabled="!fileUrl"
          message="Czy na pewno chcesz usunąć ten plik" />
      </v-col>
    </v-row>

    <v-row v-if="showLinks">
      <a
        v-for="file in allFiles"
        :key="file.id"
        :href="file.url"
        rel="noopener noreferrer"
        style="color: inherit"
        target="_blank">
        <v-chip class="ma-1" small style="cursor: pointer">
          <v-icon left>{{ file.isEncrypted ? "mdi-lock" : "mdi-attachment" }}</v-icon>
          {{ file.fileName }}
        </v-chip>
      </a>
    </v-row>
  </v-container>
</template>
<script lang="ts">
import type { PropType} from "@vue/composition-api";
import { computed, defineComponent, inject, ref } from "@vue/composition-api";
import SubmitButton from "@/components/action-buttons/submit-button.vue";
import type { IFileBucket } from "@/store/entities/file";
import axios from "@/lib/axios";
import AppState from "@/views/main-wrap/app-state";
import type AttachmentData from "@/views/commerce/common/attachment-data";
import EditDeleteButtons from "@/components/action-buttons/edit-delete-buttons.vue";
import FileUploadDocTypes from "@/components/file-upload/file-upload-doc-types";
import { RulesUtils } from "@/lib/rules-utils";
import { objectProp } from "@/compatibility-layer/model-prop";
import ModelConstants from "@/compatibility-layer/model-constants";
import V2FormValidator from "@/compatibility-layer/components/v2-form-validator";
import { useObjectModel } from "@/compatibility-layer/object-model";
import V2Form from "@/compatibility-layer/components/v2-form.vue";
import DeleteAsyncBtn from "@/components/action-buttons/delete-async-btn.vue";

const SingleFileUpload = defineComponent({
  components: { DeleteAsyncBtn, V2Form, EditDeleteButtons, SubmitButton },
  props: {
    ...objectProp<AttachmentData>(),

    callback: {
      type: Function as PropType<(val: AttachmentData) => Promise<void>>,
      required: false,
      default: () => Promise.resolve()
    },
    maxFileSize: {
      type: Number,
      required: false,
      default: 2 * 1024 * 1024
    },
    accept: {
      type: String,
      required: false,
      default: FileUploadDocTypes.All
    },
    label: {
      type: String,
      required: false,
      default: "Wybierz plik z tego komputera"
    },

    readonly: {
      type: Boolean,
      required: false,
      default: false
    },
    showLinks: {
      type: Boolean,
      required: false,
      default: false
    },
    target: {
      type: Number,
      required: false,
      default: null
    },
    encrypt: {
      type: Boolean,
      required: false,
      default: false
    }
  },

  emits: [ModelConstants.modelEvent],

  setup(props, context) {
    const fileToUpload = ref(null as any);
    const model = useObjectModel<AttachmentData>(props, context);
    const appState = inject(AppState.Key) as AppState;
    const formRef = ref(V2FormValidator.create());
    const fileUrl = computed(() => props.value.fileBucket?.files?.find(_ => true)?.url ?? null);

    const allFiles = computed(() => props.value.fileBucket?.files ?? []);

    const upload = async () => {
      if (!formRef.value.validate()) return;
      const formData = new FormData();
      const file = fileToUpload.value;
      formData.append("file[0]", file, file.name);

      const bucketId = model.value.fileBucketId;
      if (bucketId) {
        formData.append("id", bucketId);
      } else {
        formData.append("orphaned", true.toString());
      }
      formData.append("target", (props.target ?? 0).toString());
      if (props.encrypt) formData.append("encrypt", true.toString());
      formData.append("replace", true.toString());
      const headers = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      let fileBucket: IFileBucket;

      if (bucketId) {
        const response = await axios.put("/api/Files/UpdateBucket", formData, headers);
        fileBucket = response.data.result;
      } else {
        const response = await axios.post("/api/Files/CreateBucket", formData, headers);
        fileBucket = response.data.result;
      }

      if (!bucketId && fileBucket) {
        model.value.fileBucket = fileBucket;
        model.value.fileBucketId = fileBucket.id;
        await appState.eventSubscribe(
          "file_bucket_changed_" + fileBucket.id,
          onFileBucketChanged,
          false
        );
      }
      model.value.removeAttachments = false;
      await props.callback(model.value as AttachmentData);
      fileToUpload.value = null;
      onFileBucketChanged(fileBucket);
      setImmediate(() => formRef.value.reset());
    };
    const onFileBucketChanged = (fileBucket: IFileBucket) => {
      model.value.fileBucket = fileBucket;
    };
    const fileUploadRules = computed(() => RulesUtils.MandatoryFile(props.maxFileSize));

    const clear = async (): Promise<void> => {
      model.value.removeAttachments = true;
      await props.callback(model.value as AttachmentData);
    };

    return { model, fileToUpload, fileUploadRules, upload, formRef, clear, fileUrl, allFiles };
  }
});
export default SingleFileUpload;
</script>