非同期でファイルをアップロード・ダウンロード・削除を実行する

  methods: {
    submit: async function () {
      // エラー表示を削除
      this.clearAllError();
      if (!this.checkFile(this.file)) return;
      const endpoint = this.DocumentState.UploadEndpoint;
      const data = new FormData;
      data.append('_csrf', this.csrf);
      data.append('file', this.file);


      const config = {
        headers: {
          'content-type': 'multipart/form-data'
        },
      }
      try {
        DisplayOptions.setLoading(true);
        const response = await axios.post(endpoint, data, config);
        DocumentStore.push(response.data.file);
        DisplayOptions.setLoading(false);
        DisplayOptions.setSuccessSnackbar(true);
        DisplayOptions.setMessage('アップロードが完了しました');
        DisplayOptions.setDialog(false);
      } catch (e) {
        DisplayOptions.setLoading(false);
        if (this.hasStatusCode(e)) {
          if (e.response.status === 422) {
            Object.keys(e.response.data.errors).forEach((key) => {
              this.$set(this.errorMessages, key, e.response.data.errors[key]);
            })
          } else if (e.response.status === 503) {
            this.errorMessages = e.response.data.message;
          } else {
            this.errorMessages = 'アップロードに失敗しました';
          }
          this.$emit('failed');
          return;
        } else {
          alert('アップロードに失敗しました。ネットワークの接続状況を確認してください。');
        }
      }
    },
    checkFile(file) {
      const maxSize = 52428800; // NOTE: 50MB

      if (!file) {
        this.errorMessages['file'] = 'ファイルは必ず指定してください。'
        return false;
      }

      if (file.size > maxSize) {
        this.errorMessages['file'] = 'ファイルのサイズは50MB以下にしてください。'
        return false;
      }

      return true;
    },

    clearAllError() {
      this.errorMessages = [];
    },

    clearError(key) {
      this.errorMessages[key] = [];
    },

    showInternetDisconnectedAlert() {
      alert('アップロードに失敗しました。ネットワークの接続状況を確認してください。');
      this.$emit('failed');
    },

    hasStatusCode(err) {
      if (!err.response) {
        return false;
      }

      return true;
    },

    closeDialog() {
      DisplayOptions.setDialog(false);
      this.file = [];
    },
    onFileChanged() {
      this.fileChanged = true;
      this.clearError('file');
    },

    validate(file) {
      const isValidatedFile = this.checkFile(file);

      if (isValidatedFile) {
        return true;
      }

      return false;
    },

  methods: {
    // 書類のダウンロード
    download: async function (event, document) {
      this.loading = true;
      const endpoint = document.download_link;
      const href = event.currentTarget.getAttribute('href');
      try {
        const res = await downloadDocument(endpoint);
        window.location = res.request.responseURL;
        window.location = href;
      } catch(e) {
        alert('ファイルのダウンロードに失敗しました。再試行してください。')
      }
      this.loading = false;
    },
  },

  methods: {
    // 書類の削除
    async deleteDocument(document) {
      const answer = confirm('本当に削除してよろしいですか？');
      if (answer) {
        DisplayOptions.setLoading(true);
        const endpoint = document.delete_link
        try {
          await axios.delete(endpoint)
          DocumentStore.remove(document.id);
          DisplayOptions.setMessage('削除が完了しました');
          DisplayOptions.setSuccessSnackbar(true);
        } catch (e) {
          alert('削除に失敗しました。');
        }
        DisplayOptions.setLoading(false);
      }
    },
  },