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"));
}