Jan 24, 2019

Level 2

How to return the url of an image file in laravel ?

Friends, I am using Angular 6 for front-end and laravel 5.5.44 as backend. In my code I can download a file using the code

    public function downloadDocs($regid, $type, $filename) {
        Log::debug("inside FileDownloadController->downloadDocs ".$filename);
        $loadPath = env('APP_UPLOADS_DIR') . DIRECTORY_SEPARATOR;
        switch ($type) {
            case 'R':
            case 'A':
                $loadPath .= env('SYSGENRTD_SAVE_DIR');
                break;
            case 'U':
                $loadPath .= env('FLATTACHMNT_SAVE_DIR');
                break;
            case 'C':
                $loadPath .= env('CERT_SAVE_DIR');
                break;
            case 'default':
                break;
        }
        $loadPath .= DIRECTORY_SEPARATOR . $filename;
        return response()->download($loadPath);
    }

by giving URL : http://localhost:8000/api/civilregn/v1/downloadDoc/1/U/Original.jpg

But I need to show the same image on my front-end as < img [src]=? >

I don't know How to return the URL of the file to front end in format of http://localhost:8000/

I wrote a function with code

    public function viewDocs($regid, $type, $filename) {
        Log::debug("inside FileDownloadController->viewDocs ".$filename);
        $loadPath = env('APP_UPLOADS_DIR') . DIRECTORY_SEPARATOR;
        
        switch ($type) {
            case 'R':
            case 'A':
                $loadPath .= env('SYSGENRTD_SAVE_DIR');
                break;
            case 'U':
                $loadPath .= env('FLATTACHMNT_SAVE_DIR');
                break;
            case 'C':
                $loadPath .= env('CERT_SAVE_DIR');
                break;
            case 'default':
                break;
        }
        $loadPath .= DIRECTORY_SEPARATOR . $filename;
        //die(response()->view($loadPath));
        return response()->view($loadPath);
    }

try to access the file using URL: http://localhost:8000/api/civilregn/v1/viewDoc/1/U/Original.jpg

but got error as

InvalidArgumentException View [.var.www.html.ERP_new.Uploads.attachments.Original.jpg] not found.

My .env configuration for file path is

APP_URL=http://localhost
APP_UPLOADS_URL=http://localhost/Uploads
APP_DIR=/var/www/html/ERP_new/ERP_Project
APP_FILE_SERVER=127.0.0.1
APP_UPLOADS_DIR=/var/www/html/ERP_new/Uploads
ANNEXURES_DIR=/var/www/html/ERP_new/ERP_Annexures/AnnexureTemplates


#CR DIRECTORIES
SYSGENRTD_SAVE_DIR=annexures_pdf
FLATTACHMNT_SAVE_DIR=attachments
CERT_SAVE_DIR=certificate_pdf
CR_ANNEXTEMP_DIR=CivilRegistration

please advise How I can take href src for file to show on front-end..

Thanks

Anes

jaythanki

7 years ago

Level 1

where you are storing your images on server. can you give path ?

rodrigo.pedra

7 years ago

Level 56

Hi @insight

Does using the URL to the download controller does not work?

I mean (using the example URL in your post):

<img src="http://localhost:8000/api/civilregn/v1/downloadDoc/1/U/Original.jpg">

The controller is forcing the download, but it is fine when using the <img>'s src atribute.

===

If you want those images to be publicly available you need to place them in some form in the /public folder.

However, you should not write directly to the public folder.

Laravel has a solution to that:

https://laravel.com/docs/5.7/filesystem#the-public-disk

After running

php artisan storage:link

Laravel creates a symbolic link between from public/storage pointing to storage/app/public

This way, if you store your uploades in:

/storage/app/public/images/path/to/MyImage.jpg

you could access it directly from:

http://localhost:8000/storage/images/path/to/MyImage.jpg

Note that I added the images/path/to to imply you can organize your files inside this folder.

Also don't forget to run that command both in your local machine and in the production server.

Downsides with this approach

Please notice that all the files stored this way will be available to everyone regardless if this user is logged into your app or not.

If you need to have access control, using a controller to proxy the image as you are already doing is one way to go.

1 like

insight

7 years ago

Level 2

Dear Friends,

I solved the issue by change the function as


public function viewDocs($regid, $type, $filename) {
        Log::debug("inside FileDownloadController->viewDocs ".$filename);
        $loadPath = env('APP_UPLOADS_DIR') . DIRECTORY_SEPARATOR;
        
        switch ($type) {
            case 'R':
            case 'A':
                $loadPath .= env('SYSGENRTD_SAVE_DIR');
                break;
            case 'U':
                $loadPath .= env('FLATTACHMNT_SAVE_DIR');
                break;
            case 'C':
                $loadPath .= env('CERT_SAVE_DIR');
                break;
            case 'default':
                break;
        }
        $loadPath .= DIRECTORY_SEPARATOR . $filename;
        $headers = array(
            'Content-Type:image/jpg',
          );
        $response = response()->file($loadPath, $headers);
        return $response;
    }


```




Thanks alot

Anes

2 likes

abellowins

6 years ago

Level 2

I love this. Thank you. also one of my favorites, alias art=php artisan

Please or to participate in this conversation.