What's the best way to store S3 image URI to work with the file upload field?
For my file upload field to render a thumbnail of a previously stored image, how should I be storing the file URI? A full endpoint type path (e.g. http://example.s3-website.eu-west-2.amazonaws.com/image/file/Screen_Shot_2019-03-20_at_11_57_05.png) or a relative path (e.g. image/file/Screen_Shot_2019-03-20_at_11_57_05.png) ?
The resources are private, so will need presigned urls' - I assume the visibility method can take care of this?
My form field component looks like this;
11 Replies
visbility should take care of that and it should allow it to render correctly depending on how your driver is setup
and should I be saving the location as a full URL, or a file path relative to the bucket? I've tried both and can't get the preview to render on reload.
You shouldn't be doing any of that, it should do it for you...
when you run $this->getState it should already be processed etc
my setup is a bit different, I don't write directly to the underlying model. I post to an API (via afterStateUpdated) then persist the record locally once it's been returned from the remote service. I do get the initial (local) preview after upload - but when I reload the form, there isn't a thumbnail.
there is a value in the property of the record, I assumed this would be used to render the image when the form's reloaded.
Ok so you need a custom driver really for that, and write a custom function for the getTemporaryUrl I suspect. The way you are doing it is the problem.
Temporary always works as that's cached in the browser
but if this is set up with s3 as storage in a more normal way (without the api round trip), then the s3 driver would normally be able to render a thumbnail from an S3 path, wouldn't it? Am I right in assuming that's how it's meant to work?
so when you return to the form the next day, the image is rendered and visible.
It would, the driver is built to use the s3 temporary signed up
hmm, so my problem isn't related to the api trip, in that case. When the page loads, it has valid data in the file upload component, but it fails to render the image. Is there a way to debug this other than hacking into the component code?
But it is, because the driver creates the url for s3 for instance, therefore the driver cannot find the file and it fails
It fails to render the image because the driver cannot find the image url
Would you expect a component defined like this
to be able to draw the image (http://example.s3-website.eu-west-2.amazonaws.com/image/file/Screen_Shot_2019-03-20_at_11_57_05.png) on next visit, if the value in the property is something like this
and the bucket is correctly set in the filesystems.php config file?
I don't understand why the driver wouldn't be able to find that file. Have I correctly understood what the 'directory' method is for?
How is your s3 driver configured?
Example I use a custom driver for media to go into a sub folder we use:
's3_media' => [
'driver' => 's3',
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'region' => env('AWS_DEFAULT_REGION'),
'bucket' => env('AWS_BUCKET'),
'url' => env('AWS_URL'),
'endpoint' => env('AWS_ENDPOINT'),
'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
'throw' => false,
'root' => env('AWS_MEDIA_ROOT', 'media'),
],
to store the media in s3 bucket /media folder. Then we have:
SpatieMediaLibraryFileUpload::make('cv')
->collection('cvs')
->label('CV')
->enableDownload()
->enableOpen()
->disk('s3_media')
->directory($dir)
->required()
->preserveFilenames()
->disablePreview()
->visibility('private')
->columnSpan(6),
This works as expected for documents. and they are private. Images work too when we enforce image type