UpdateAccountInformation.vue

<script setup lang="ts">
import { router, useForm } from '@inertiajs/vue3';
import { ActionMessage, Button, FormSection, Field, Label, Input, ErrorMessage } from '@app/components/ui';
import { ref } from 'vue';

export type Props = {
  user: {
    name: string;
    email: string;
    avatar?: string;
  };
};

const props = defineProps<Props>();

const form = useForm({
  _method: 'PUT',
  name: props.user.name,
  email: props.user.email,
  avatar: null,
});

const avatarPreview = ref(null);
const avatarInput = ref(null);

const submit = () => {
  if (avatarInput.value) {
    form.avatar = avatarInput.value.files[0];
  }

  form.post(route('account.update'), {
    errorBag: 'submit',
    preserveScroll: true,
    onSuccess: () => clearAvatarFileInput(),
  });
};

const selectNewAvatar = () => {
  avatarInput.value.click();
};

const updateAvatarPreview = () => {
  const avatar = avatarInput.value.files[0];

  if (!avatar) return;

  const reader = new FileReader();

  reader.onload = (e) => {
    avatarPreview.value = e.target.result;
  };

  reader.readAsDataURL(avatar);
};

const deleteAvatar = () => {
  router.delete(route('avatar.destroy'), {
    preserveScroll: true,
    onSuccess: () => {
      avatarPreview.value = null;
      clearAvatarFileInput();
    },
  });
};

const clearAvatarFileInput = () => {
  if (avatarInput.value?.value) {
    avatarInput.value.value = null;
  }
};
</script>

<template>
  <FormSection @submitted="submit">
    <template #title>Account Information</template>

    <template #description>Update your account information and email address.</template>

    <template #form>
      <!-- Profile avatar -->
      <Field class="col-span-6 sm:col-span-4">
        <!-- Profile avatar File Input -->
        <input id="avatar" ref="avatarInput" type="file" class="hidden" @change="updateAvatarPreview" />

        <Label for="avatar">Avatar</Label>

        <!-- Current Profile avatar -->
        <div v-show="!avatarPreview" class="mt-2">
          <img :src="user.avatar" :alt="user.name" class="rounded-full h-20 w-20 object-cover" />
        </div>

        <!-- New Profile avatar Preview -->
        <div v-show="avatarPreview" class="mt-2">
          <span
            class="block rounded-full w-20 h-20 bg-cover bg-no-repeat bg-center"
            :style="'background-image: url(\'' + avatarPreview + '\');'"
          />
        </div>

        <Button type="button" class="mt-2 me-2" variant="secondary" v-on:click.prevent="selectNewAvatar"
          >Select A New Avatar</Button
        >

        <Button type="button" v-if="user.avatar" variant="secondary" class="mt-2" v-on:click.prevent="deleteAvatar">
          Remove Avatar
        </Button>

        <ErrorMessage v-if="form.errors.avatar" class="mt-2">{{ form.errors.avatar }}</ErrorMessage>
      </Field>

      <!-- Name -->
      <Field class="col-span-6 sm:col-span-4">
        <Label for="name">Name</Label>
        <Input
          name="name"
          autocomplete="name"
          type="text"
          v-model="form.name"
          v-bind:autofocus="true"
          v-bind:invalid="form.errors.name"
        />
        <ErrorMessage v-if="form.errors.name">{{ form.errors.name }}</ErrorMessage>
      </Field>

      <!-- Email -->
      <Field class="col-span-6 sm:col-span-4">
        <Label for="email">Email</Label>
        <Input name="email" autocomplete="email" type="email" v-model="form.email" v-bind:invalid="form.errors.email" />
        <ErrorMessage v-if="form.errors.email">{{ form.errors.email }}</ErrorMessage>
      </Field>
    </template>

    <template #actions>
      <ActionMessage :on="form.recentlySuccessful" class="me-3">Saved.</ActionMessage>

      <Button :class="{ 'opacity-25': form.processing }" :disabled="form.processing">Save</Button>
    </template>
  </FormSection>
</template>