Help us understand the problem. What is going on with this article?

[Laravel] ファイルをダウンロードした直後にページをリロードする方法

More than 1 year has passed since last update.

環境

CentOS: 7.4
PHP: 7.2
Laravel: 5.6

やりたいこと

ファイルをダウンロードした後にページをリロードさせたい。

今回はファイルアップローダーのようなシステムを作っているときに起きた問題です。
ファイルのダウンロード回数に制限があり、ダウンロードされると残りのダウンロード回数が減っていくため、ダウンロードした直後にページをリロードさせたいと考えました。

キャプチャ.PNG

ここで1つ問題が。

以下はダウンロード処理が書かれたコントローラーです(かなり省略してます)。
コントローラー内ではファイルをダウンロードする処理とページをリロードする処理は同時に実行できません。。

public function download($id)
{
    $file = File::find($id);
    $fPath = $file->path;  // ファイルパスを取得
    $fName = $file->name;  // オリジナルのファイル名を取得

    return response()->download($fPath, $fName);  // ダウンロード処理
    // ダウンロード後にリロードができない。。
}

どうするか

Javascript のクリックイベントでファイルダウンロードとリロードを同時に行います。

  • ダウンロードボタンクリックで js イベントが発火
  • ダウンロード用 URL を指定して新しいタブ(ウィンドウ)を開く
  • コントローラーの download メソッドに処理が飛ぶ
  • ファイルがダウンロードできる
  • ダウンロードページをリロードする

コードは以下のとおり。

HTML

カスタムデータ属性を利用して a タグの中にファイル ID 埋め込んでいます。

<!-- ダウンロードボタンの部分のみ抜粋 -->

<a class="btn btn-sm m-1 btn-secondary text-light file-download-btn" data-file-id="{{ $file->id }}" role="button">
    <i class="fas fa-file-download"></i> DL  <!-- FontAwsome のアイコンです -->
</a>

Javascript (jQuery)

$(function() {
    $('.file-download-btn').on('click', function() {   // DLボタンクリックで発火
        var fileId = $(this).attr('data-file-id');     // カスタムデータ属性からファイルIDを取得
        window.open('/file/' + fileId + '/download');  // URLを指定してタブを開く -> コントローラーでダウンロード処理が実行される
        location.reload(true);                         // ページをリロードする
    });
});

これでファイルのダウンロードとページのリロードを1つの処理で実現できました。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away