Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (10) 写真投稿フォーム

<template>
  <div class="photo-form">
    <h2 class="title">Submit a photo</h2>
    <form class="form">
      <input class="form__item" type="file">
      <div class="form__button">
        <button type="submit" class="button button--inverse">submit</button>
      </div>
    </form>
  </div>
</template>

<!-- $eventはSampleコンポーネントがinputイベントと共に発行した値 -->
<Sample :value="foo" @input="foo = $event" />

<Sample v-model="foo" />

<template>
  <div v-show="value" class="photo-form">
    <!-- 中略 -->
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      required: true
    }
  }
}
</script>

import PhotoForm from './PhotoForm.vue'

export default {
  components: {
    PhotoForm
  },
  data () {
    return {
      showForm: false
    }
  },
  /* 中略 */
}

<button class="button" @click="showForm = ! showForm">
  <i class="icon ion-md-add"></i>
  Submit a photo
</button>

<nav class="navbar">
  <!-- 中略 -->
  <PhotoForm v-model="showForm" />
</nav>

$ npm run watch

<input class="form__item" type="file" @change="onFileChange">
<output class="form__output" v-if="preview">
  <img :src="preview" alt="">
</output>

export default {
  props: {/* 中略 */},
  data () {
    return {
      preview: null
    }
  },
  methods: {
    // フォームでファイルが選択されたら実行される
    onFileChange (event) {
      // 何も選択されていなかったら処理中断
      if (event.target.files.length === 0) {
        return false
      }

      // ファイルが画像ではなかったら処理中断
      if (! event.target.files[0].type.match('image.*')) {
        return false
      }

      // FileReaderクラスのインスタンスを取得
      const reader = new FileReader()

      // ファイルを読み込み終わったタイミングで実行する処理
      reader.onload = e => {
        // previewに読み込み結果（データURL）を代入する
        // previewに値が入ると<output>につけたv-ifがtrueと判定される
        // また<output>内部の<img>のsrc属性はpreviewの値を参照しているので
        // 結果として画像が表示される
        this.preview = e.target.result
      }

      // ファイルを読み込む
      // 読み込まれたファイルはデータURL形式で受け取れる（上記onload参照）
      reader.readAsDataURL(event.target.files[0])
    }
  }
}

methods: {
  onFileChange (event) {
    if (event.target.files.length === 0) {
      this.reset() // ★ 追加
      return false
    }

    if (! event.target.files[0].type.match('image.*')) {
      this.reset() // ★ 追加
      return false
    }

    /* 中略 */
  },
  // 入力欄の値とプレビュー表示をクリアするメソッド
  reset () {
    this.preview = ''
    this.$el.querySelector('input[type="file"]').value = null
  }
}

<form class="form" @submit.prevent="submit">

data () {
  return {
    preview: null,
    photo: null // ★ 追加
  }
},
/* 中略 */
methods: {
  onFileChange (event) {
    /* 中略 */
    this.photo = event.target.files[0] // ★ 追加
  },
  reset () {
    this.preview = ''
    this.photo = null // ★ 追加
    this.$el.querySelector('input[type="file"]').value = null
  },
  async submit () {
    const formData = new FormData()
    formData.append('photo', this.photo)
    const response = await axios.post('/api/photos', formData)

    this.reset()
    this.$emit('input', false)
  }
}

<template>
  <h1>Photo Detail</h1>
</template>

import PhotoDetail from './pages/PhotoDetail.vue'

/* 中略 */

const routes = [
  {
    path: '/',
    component: PhotoList
  },
  {
    path: '/photos/:id',
    component: PhotoDetail,
    props: true
  },
  /* 中略 */
]

this.$router.push(`/photos/${response.data.id}`)

import { CREATED, UNPROCESSABLE_ENTITY } from '../util'

data () {
  return {
    preview: null,
    photo: null,
    errors: null
  }
},

async submit () {
  const formData = new FormData()
  formData.append('photo', this.photo)
  const response = await axios.post('/api/photos', formData)

  if (response.status === UNPROCESSABLE_ENTITY) {
    this.errors = response.data.errors
    return false
  }

  this.reset()
  this.$emit('input', false)

  if (response.status !== CREATED) {
    this.$store.commit('error/setCode', response.status)
    return false
  }

  this.$router.push(`/photos/${response.data.id}`)
}

<form class="form" @submit.prevent="submit">
  <div class="errors" v-if="errors">
    <ul v-if="errors.photo">
      <li v-for="msg in errors.photo" :key="msg">{{ msg }}</li>
    </ul>
  </div>
  <!-- 中略 -->
</form>

<template>
  <div class="loader">
    <p class="loading__text">
      <slot>Loading...</slot>
    </p>
    <div class="loader__item loader__item--heart"><div></div></div>
  </div>
</template>

import Loader from './Loader.vue'

export default {
  components: {
    Loader
  },
  /* 以下略 */

data () {
  return {
    loading: false,
    preview: null,
    photo: null,
    errors: null
  }
},

<div v-show="loading" class="panel">
  <Loader>Sending your photo...</Loader>
</div>
<form v-show="! loading" class="form" @submit.prevent="submit">

async submit () {
  this.loading = true

  const formData = new FormData()
  formData.append('photo', this.photo)
  const response = await axios.post('/api/photos', formData)

  this.loading = false

  /* 中略 */
}

const state = {
  content: ''
}

const mutations = {
  setContent (state, { content, timeout }) {
    state.content = content

    if (typeof timeout === 'undefined') {
      timeout = 3000
    }

    setTimeout(() => (state.content = ''), timeout)
  }
}

export default {
  namespaced: true,
  state,
  mutations
}

import message from './message'

/* 中略 */

const store = new Vuex.Store({
  modules: {
    auth,
    error,
    message
  }
})

<template>
  <div class="message" v-show="message">
    {{ message }}
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    computed: {
      ...mapState({
        message: state => state.message.content
      })
    }
  }
</script>

async submit () {
  /* 中略 */

  if (response.status !== CREATED) {
    this.$store.commit('error/setCode', response.status)
    return false
  }

  // メッセージ登録
  this.$store.commit('message/setContent', {
    content: '写真が投稿されました！',
    timeout: 6000
  })

  this.$router.push(`/photos/${response.data.id}`)
}

import Message from './components/Message.vue' // ★ 追加
import Navbar from './components/Navbar.vue'
import Footer from './components/Footer.vue'
import { INTERNAL_SERVER_ERROR } from './util'

export default {
  components: {
    Message, // ★ 追加
    Navbar,
    Footer
  },

<div class="container">
  <Message /> <!-- ★ 追加 -->
  <RouterView />
</div>