Laravel在Ajax模式中调用response（） - > file（$ pathToFile）

Question

Since I dont like the default way a file is presented to a user when "return response()->file($pathToFile);" is called I wanted to make a Version in which a file isnt direcly displayed in the current Tab of the Website but rather in a popup Modal - Kind of like how its done when you preview a file in Dropbox.

So what I did is add a button to my view that calls for my Route "preview_modal" This Route then calls my "preview_modal" method in my FileController. This Method returns the requested File in the Modal.

But sadly when the Mimetype of the requested File is not a "text/*" type of File I get this kind of Text presented to me in my Modal:

�PNG  IHDRq�:sRGB���gAMA���a pHYs���o�d   *IDATx^��r�6��~ Ob~��jn9�-��.Q�v˖-��ʥ��`ip���L��d��?�E����'0�0�M�afİ�3Ì6q�a��&�03b���aF����L&�V���H|�̏t[���kȲ�01����,�|�r�b��`����㙮�|:��/���� r/[X�>`�]��KH���5�Oޟa� ��N�A�|��KX��2�:γ�d ٢��,�

In this case it was a PNG that was beeing opened. This Text was just a little example.

I have no idea what im looking at If anyone knows what this is i would greatly appreciate it. The "return response()->file()" works fine for the same file if it isnt called inside the ajax modal.

Button:

<button data-path="{{ route('files.preview_modal', $file) }}" class="button is-info load-ajax-modal" role="button" data-toggle="modal" data-target="#dynamic-modal">Preview</button>

Ajax Call:

$.ajaxSetup({
    headers: {
        'X-CSRF-Token': $('meta[name="_token"]').attr('content')
    }
});

$('.load-ajax-modal').click(function () {
    $.ajax({
        type: 'GET',
        url: $(this).data('path'),

        success: function (result) {
            $('#dynamic-modal div.modal-body').html(result);
        }
    });
});

Route:

Route::get('preview_modal/{file}', 'FileController@preview_modal')->name('files.preview_modal');

preview_modal Method:

public function preview_modal(File $file)
{
  return response()->file(storage_path("$file->path"));
}