How to turn an s3 object string into something useful when using laravel 5.1 filesystem

Question

I'm at a loss. I'm trying to display an object (image.jpg) I successfully have uploaded to my s3 bucket.

I have made sure the file is set to public. I use the Storage::get(); method which the doc says "returns a string of the object". See here:

The get method may be used to retrieve the contents of a given file. The raw string contents of the file will be returned by the method:

$contents = Storage::get('file.jpg');

And sure enough, when my show method looks like this:

public function show($id)
{
    /* Get DB instance */
    $resource = Resource::findOrFail($id);

    /* Create s3 file path */
    $filePath = 'resource-'.$resource->id;

    /* Get object in s3 bucket */
    $file = Storage::get($filePath);

    return view('resource.show', compact('resource', 'file'));
}

It outputs the following below in my view when I do {!! $file !!}

���p�s0wr�4miq �V�Pr�;�-��##���EM����cA. {����{��1�Whuf��|Ji�{�=3�P� 1�������3�1Y���W���N�/ �Hnt�Ï�[������4����Uԅ�8u�w���XB�r��=F8�ԟȰ�T��T ]���q��:�K~�с�VV�Alv�����7cOV�7�b�`s����M��D�՝�6]�մ���ԕqJ� X�?���ቿ3��>��甽�_4o�^s�Ӻ|�#�����H9 " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " "

Just much, much longer. This isn't useful. How do I convert this into the original image? And is the process the same when I upload/show video?

Answer 1

Okay, so I made things work, but I am in no way sure if this is the smartest way. But hey, it's a step of the way.

Note this solution lets anyone, authenticated or not, access your s3 objects url. I haven't figured out how to control access yet.

Useful resources

The flysystem original documentation

• Detailed information about the flysystem package, and describes methods such as getMimetype not covered in the laravel documentation.

Laravel docs

• Useful for getting started with the laravel implementation of flysystem.

The AWS Sdk guide for PHP

• Good reference if you want to write custom s3 code.

---

With that out of the way, here is how I create & show s3 objects

1. Add your s3 credentials in config/filesystems.php. I also use s3 for development to make sure things work.

return [

    'default' => 's3',

    'cloud' => 's3',

    'disks' => [

        'local' => [
            'driver' => 'local',
            'root'   => storage_path().'/app',
        ],

        's3' => [
            'driver' => 's3',
            'key'    => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_REGION'),
            'bucket' => env('AWS_BUCKET'),
        ],

        'rackspace' => [
            'driver'    => 'rackspace',
            'username'  => 'your-username',
            'key'       => 'your-key',
            'container' => 'your-container',
            'endpoint'  => 'https://identity.api.rackspacecloud.com/v2.0/',
            'region'    => 'IAD',
        ],

    ],

];

---

2. My store method: ResourceController@store

Note here that the key is your s3 objects name, and not your aws access key or secret key. Also, if you do not set visibility to 'public' (default is private), this solution won't work e.g. you can't display the file.

public function store(ResourceRequest $request)
{
    /* Store entry in DB */
    $resource = new Resource();
    $resource->title = $request->title;
    $resource->save();

    /* Prepare data needed for storage */
    $key = 'resource-'.$resource->id;
    $file = file_get_contents($request->file('resource'));
    $visibility = 'public';

    /* Store file */
    Storage::put($key, $file, $visibility);

    /* Success message */
    session()->flash('message', $request->title . ' uploaded!');
    return redirect()->route('resource-index');
}

---

3. My show method: ResourceController@show

Here I simply build up the aws s3 objects public url, so I can reference it in my <img> and <video> tags

public function show($id)
{
    /* Get DB instance */
    $resource = Resource::findOrFail($id);

    /* Set bucket */
    $bucket = env('AWS_BUCKET');

    /* Set file key */
    $key = 'resource-'.$resource->id;

    /* Build & push s3 url into array */
    $file['url']= 'https://s3.eu-central-1.amazonaws.com/'.$bucket.'/'.$key;

    /* Get & push mime type into array. */
    $file['type'] = Storage::getMimetype($key);

    return view('resource.show', compact('resource', 'file'));
}

---

4. Finally, my view. Here I check for mime type to make sure the right filetype gets the right tag.

@extends('layout.base')

@section('title') Show Resource @stop

@section('content')

    <h1>Show Resource</h1>

    @include('layout.partials.message')

    <h2>{{ $resource->title }}</h2>

    @if ($file['type'] == 'image/jpeg')
        <img src="{!! $file['url'] !!}" alt="">
    @else
        <video src="{!! $file['url'] !!}" controls></video>
    @endif

@stop

The result

The picture above gets the s3 url: https://s3.eu-central-1.amazonaws.com/bucketname/resource-22

And remember, the flaw is this url is public to anyone. So anyone can go and guess urls until they find the resource they want.

I Hope someone finds this helpful. Now I'll be off to fix that d*mn url access problem...

Answer 2

Try to encode base64 and show img

 $file = Storage::get($filePath);

// Read image path, convert to base64 encoding

$imgData = base64_encode($file);

// Format the image SRC: data:{mime};base64,{data};

$src = 'data: '.mime_content_type($img_file).';base64,'.$imgData;

// Echo out a sample image

echo '<img src="'.$src.'">';