Can't access VaporImage

[1stevengrant]

• Laravel Version: 8.22.1
• Nova Version: 3.19.1
• PHP Version: 7.4
• Database Driver & Version: MySQL 8.0.20

Description:

I have a VaporImage field defined like so

VaporImage::make('Featured Image')
  ->help('Upload a featured image for the post that will display on landing pages ')
  ->storeAs(function ($request) {
    $img = $request->input('vaporFile')['featured_image'];
    return $img['key'].'.'.$img['extension'];
}),

The upload works, Nova displays the preview, and all is well. However, the featured_image column now has tmp/a-random-uuid.jpg as it's value. I can look into the s3 bucket and see the image.

On the front end, if I do {{ asset($post->featured_image) }} I get a URL but the image is 404.

There are 2 things here I guess

1. the image not actually appearing at all on the front end
2. I don't want to have tmp/my-file-name.jpg in the database. I dare say I could live with it if I could solve number 1

I can't call if this is a Nova thing or a Vapor thing or if it's even a bug, undocumented or documented and I've totally missed it.

[crynobone]

I personally never seen an example using VaporImage with storeAs(), but will check it out tommorow.

You might also want to ask if anyone has tried something similar on #nova on Laravel's Discord or other support channel listed at https://nova.laravel.com/docs/3.0/support.html#support-questions

[1stevengrant]

Thank you. Yeah, I've trawled through all the usual places; Discord, SO, Vapor's Github issues as well as Nova's and there was a reference in #2970 to the storeAs method but nothing for the issue I'm running into.

…

On Tue, 19 Jan 2021 at 13:22, Mior Muhammad Zaki ***@***.***> wrote: I personally never seen an example using VaporImage with storeAs(), but will check it out tommorow. You might also want to ask if anyone has tried something similar on #nova on Laravel's Discord <https://discordapp.com/invite/mPZNm7A> or other support channel listed at https://nova.laravel.com/docs/3.0/support.html#support-questions — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3180 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA3OWKKBZ6SFNE3W2LTVKLS2WBSXANCNFSM4WIVL3RQ> .

-- Steven Grant

[crynobone]

Based on the code review, since you explicitly call storeAs() you need to trim tmp/ from the key.

E.g:

VaporImage::make('Featured Image')
  ->help('Upload a featured image for the post that will display on landing pages ')
  ->storeAs(function ($request) {
    $img = $request->input('vaporFile')['featured_image'];
    return str_replace('tmp/', '', $img['key']).'.'.$img['extension'];
}),

[1stevengrant]

Right, that won't solve the issue of displaying the image

[crynobone]

You mean using {{ asset($post->featured_image) }}, outside of Laravel Nova?

Wouldn't you need to access the the URL via Storage? https://laravel.com/docs/8.x/filesystem#file-urls

[1stevengrant]

yeah, it doesn't resolve. I wouldn't have thought so because the `{{ asset() }}` helper is supposed to route to the s3 bucket?

…

On Wed, 20 Jan 2021 at 09:42, Mior Muhammad Zaki ***@***.***> wrote: You mean using {{ asset($post->featured_image) }}? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3180 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA3OWLSV47CXUIPJZLHJV3S22QRPANCNFSM4WIVL3RQ> .

-- Steven Grant

[crynobone]

Use Storage::url(), asset() are only meant for file stored on the application instance. Vapor store everything on s3.

[1stevengrant]

thanks for that added my own helper function

function s3Url($file): string
{
    $disk = Storage::disk('s3');
    $disk->setVisibility($file, 'public');

    return $disk->url($file);
}

[argia-andreas]

Hi @1stevengrant

Trying to solve the same thing. Getting VaporImage uploads set as public.
Could I ask, where in your code did you decide to use the helper function to change the visibility?

[argia-andreas]

If someone has the same problem, I solved it temporarily like this:
In Nova resource:

VaporFile::make('Logo',null, new StorePublicVaporFile)

Invokable class for Storage callback:
(Basically copy/paste from the original VaporFile class.
But with Storage::disk('s3')->setVisibility($storagePath . '/' . $fileName, 'public');)

<?php

namespace App\Nova;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class StorePublicVaporFile
{
    /**
     * Store the incoming file upload.
     *
     * @param \Illuminate\Http\Request $request
     * @param \Illuminate\Database\Eloquent\Model $model
     * @param string $attribute
     * @param string $requestAttribute
     * @param string $disk
     * @param string $storagePath
     * @return array
     */
    public function __invoke(Request $request, $model, $attribute, $requestAttribute, $disk, $storagePath)
    {
        return with($request->input('vaporFile')[$requestAttribute]['key'], function ($key) use ($request, $storagePath) {
            $fileName = str_replace('tmp/', '', $key);

            Storage::disk('s3')->copy($key, $storagePath . '/' . $fileName);
            Storage::disk('s3')->setVisibility($storagePath . '/' . $fileName, 'public');

            return ltrim($storagePath . '/' . $fileName, '/');
        });
    }
}

I were using VaporImage.
But VaporImage doesn't pass on the storageCallback in the constructor. So i had to change it to get it to work.

parent::__construct($name, $attribute, $storageCallback);
instead of
parent::__construct($name, $attribute);

[FlorianB385]

Hi @argia-andreas,
i've the same problem. For my understanding. You created the class "StorePublicVaporFile" in the Nova directory and replace "__construct" in the the "VaporImage" class in the vendor directory?

[argia-andreas]

@FlorianB385
Really sorry for the late. I need to activate notfications :-/

I ended up making a copy of VaporImage and placing it in "app\Libraries". So it wont get overwritten.

This is how it looks:

<?php

namespace App\Libraries;

use Illuminate\Support\Facades\Storage;
use Laravel\Nova\Fields\PresentsImages;
use Laravel\Nova\Fields\VaporFile;

class VaporImage extends VaporFile
{
    use PresentsImages;

    /**
     * Indicates if the element should be shown on the index view.
     *
     * @var bool
     */
    public $showOnIndex = true;

    /**
     * Create a new field.
     *
     * @param  string  $name
     * @param  string  $attribute
     * @param  callable|null  $storageCallback
     * @return void
     */
    public function __construct($name, $attribute = null, $storageCallback = null)
    {
        parent::__construct($name, $attribute, $storageCallback);

        $this->acceptedTypes('image/*');

        $this->thumbnail(function () {
            return $this->value ? Storage::disk($this->getStorageDisk())->temporaryUrl($this->value, now()->addMinutes(5)) : null;
        })->preview(function () {
            return $this->value ? Storage::disk($this->getStorageDisk())->temporaryUrl($this->value, now()->addMinutes(5)) : null;
        });
    }

    /**
     * Prepare the field element for JSON serialization.
     *
     * @return array
     */
    public function jsonSerialize()
    {
        return array_merge(parent::jsonSerialize(), $this->imageAttributes());
    }
}

[hettiger]

Here's another approach to solve this problem:

<?php

namespace App\Support;

use Illuminate\Support\Facades\Storage;
use Laravel\Nova\Fields\VaporImage;

class PublicVaporImage extends VaporImage
{
    protected function storeFile($request, $requestAttribute)
    {
        $filePath = parent::storeFile($request, $requestAttribute);

        $disk = Storage::disk($this->getStorageDisk());
        $disk->setVisibility(rtrim($filePath, '/'), 'public');

        return $filePath;
    }
}

Simply use PublicVaporImage::make() in your Nova Resources.