Notes / 実践記録

input type=fileのファイル選択をVue.jsでバリデーションした記録

本ページはアフィリエイトプログラムを利用しています

input要素のtype=fileでのファイルアップロード。
頻繁に使うわけですが。

2026年7月追記：この記事は、2020年にVue.jsで input type=file のファイル選択をクライアント側で検証した時の記録です。
今もファイルサイズや拡張子の事前チェックには使えますが、MDNでは accept 属性はファイル選択のヒントであり、検証そのものではないと説明されています。
最終的な検証はサーバー側でも行なう前提で、MDNのinput type=file、File API、Vue公式のEvent Handlingも確認してください。

Vue.jsまわりの近い記録として、$refsで複数要素を扱う時にref名でつまずいた記録と、複数箇所のtoggleを個別に開閉した記録も残しています。

通常だと、submitされた値をPHPだと$_FILESなんかで受け取って、ファイルサイズや拡張子なんかのバリデーションをしたり、問題無ければファイルアップロードしたりします。
が、submit前、クライアント側でユーザーがファイル選択をした段階でバリデーションをしたいってこともあります。ということで、それをJavaScriptで書いてみます。

これまで何度か書いているのですが、都度忘れてしまうので備忘録として。
今回はVue.jsを使って書いていますが、他のフレームワーク・ライブラリでも同様に使えるはずです。

フォームsubmit前にinputのtype=fileのバリデーションをしたい

inputのtype=fileの値のバリデーションは、前述の通りサーバーサイド側で行うことが多いと思います。

今回の件では、POSTされる要素のバリデーションをsubmit前に全てJavaScriptで行なっていました。
後からtype=fileが追加されたので、そのバリデーションもファイル選択時に行なってしまおうというのが趣旨です。

Vue.jsでtype=fileのファイル選択時にバリデーションを行なう方法

まず、HTMLを下記のように書いたとします。

<ul>
  <li><input type="file" name="upload_photos_pdfs[]"></li>
  <li><input type="file" name="upload_photos_pdfs[]"></li>
  <li><input type="file" name="upload_photos_pdfs[]"></li>
  <li><input type="file" name="upload_photos_pdfs[]"></li>
  <li><input type="file" name="upload_photos_pdfs[]"></li>
</ul>

最終的には複数ファイルのアップロード。
このHTMLに、ファイル選択時に発生するイベントを取得するため、input要素にonchangeを追加します。

<input type="file" name="upload_photos_pdfs[]" @change="validate_uploads">

Vue.jsだとv-on:change（@change）ですね。
これでファイル選択時に、メソッドのvalidate_uploadsが着火されます。

あとは、Vue.js側のメソッドにvalidate_uploadsを書き加えます。

methods: {
  validate_uploads: function (event) {
    let file = event.target.files[0],
        name = file.name,
        size = file.size,
        type = file.type,
        errors = ''

    //上限サイズは3MB
    if (size > 3000000) {
      errors += 'ファイルの上限サイズ3MBを超えています\n'
    }

    //拡張子は .jpg .gif .png . pdf のみ許可
    if (type != 'image/jpeg' && type != 'image/gif' && type != 'image/png' && type != 'application/pdf') {
      errors += '.jpg、.gif、.png、.pdfのいずれかのファイルのみ許可されています\n'
    }

    if (errors) {
      //errorsが存在する場合は内容をalert
      alert(errors)
      //valueを空にしてリセットする
      event.currentTarget.value = ''
    }
  }
}

関数側（validate_uploads）では発生したイベントから、選択されたファイルのファイル名・ファイルサイズ・メディアタイプなどが取得できます。
取得した値から、ファイルの上限サイズ・制限拡張子などのバリデーションを行なえます。

選択されたファイルがバリデーションに引っかかった場合はアラートを表示し、type=fileの値を空にしてリセットします。