8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

#環境

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つの処理で実現できました。

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?