Laravel, fetching image/pdf with ajax to modal - img not displayed instead blob like data

Question

I have done several hours of research on this but haven't found anything to fix it.

What I'm trying to do is display and img/pdf witch is linked to a specific DB entry. The files are stored in the local disk storage/app/mycustomFolder, to make sure these uploaded files are not reachable from publicly.

After a button click: the ajax fires a post request to a Route, then the controller to fetch the file as a response to the ajax call. However, when I want to display the image on the modal it only displays some blob-like text. Not sure how to move on with this.

The ajax:

$('.docview').on('click',function(){
    var id = $(this).data('id');
    var src = $(this).data('src');
    var form_data = new FormData();
    form_data.append('id', id);
    form_data.append('src', src);
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url: '/tes/admin/filter/docview/',
        type: "POST",
        processData: false,
        contentType: false,
        data: form_data,
        success: function(data){
            console.log(data);
            $('.docDisplay').html('<img src="' + data + '" />');

        },
        error: function(e){
            console.log(e);
            $('.docDisplay').html(e);
        }
    });
});

The Route:

Route::post('/tes/admin/filter/docview/', 'AdminTravelExpenseController@showdoc')->name('admin.tes.displayDoc');

The Controller function:

public function showdoc(Request $request){

    $item = \App\TravelExpense::find($request['id']);

    if($request['src'] == 1){
        $url = $item->doc_url1;
    }
    else{
        $url = $item->doc_url2;
    }
    if (!Storage::disk('local')->exists($url)){
        abort(404);
    }

    //dd($response);
    return response()->file(storage_path('app'.DIRECTORY_SEPARATOR.($url)));
}

I have checked the logs in laravel but it doesn drop any actual error. and it looks like this, hop you guys can help: result of image displayin browser

you may want to have a look here https://stackoverflow.com/questions/20556773/php-display-image-blob-from-mysql — Shankar, Nov 14 '19 at 14:27

score 0 · Answer 1 · answered Nov 27 '19 at 09:37

the problem is that your "data" variable contains binary data and the src attribute of the img tag expects an URL.

You can turn the binary data into into a so-called data url (just google it) by base64 encoding it and adding some minimal boilerplate.

This of course doesn't have to be done manually. Blob and FileReader can help:

$('.docview').on('click',function(){
    var id = $(this).data('id');
    var src = $(this).data('src');
    var form_data = new FormData();
    form_data.append('id', id);
    form_data.append('src', src);
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url: '/tes/admin/filter/docview/',
        type: "POST",
        processData: false,
        contentType: false,
        data: form_data,
        success: function(data){
            var reader = new FileReader();
            reader.onload = function(e) {
                $('.docDisplay').html('<img src="' + e.target.result + '" />');
            };
            reader.readAsDataURL(new Blob([data], {'type': 'application/pdf'}));
        },
        error: function(e){
            console.log(e);
            $('.docDisplay').html(e);
        }
    });
});

MGM · Answer 2 · 2019-11-27T21:52:05.483

0

Maybe you can consider a GET function with a binary return type, and proper MIME header for eg. application/pdf. Then you can open it in a new window. This would be a more robust solution. (With proper security...)

I'm sorry but I can't provide example code for this - just an idea.

(PDF is not an image, you can't display it in HTML <img> tag!)

edited Nov 27 '19 at 21:52

answered Nov 27 '19 at 21:26

MGM

359
3
10

Laravel, fetching image/pdf with ajax to modal - img not displayed instead blob like data

2 Answers2