Filament•5mo ago•

5 replies

MarkdownEditor will save to local disk but not S3

So this is probably a stupid question, but I'm banging my head against the wall here and I'm not really sure where else to look.

I have a MarkdownEditor component that I want to accept images within. If I don't set a disk with

->fileAttachmentsDisk()

->fileAttachmentsDisk()

, it effectively saves the file as soon as I drag the image onto the editor pane. Once it's been saved, it shows up immediately in the editor pane, exactly as you'd expect, on the local disk storage, etc.

My problem is that if I try to set the component to store to the disk called "s3" by doing

->fileAttachmentsDisk('s3')

->fileAttachmentsDisk('s3')

on the MarkdownEditor component - which works perfectly fine throughout the rest of the Admin Panel in the form of various

SpatieMediaLibraryFileUpload::disk('s3')->...

SpatieMediaLibraryFileUpload::disk('s3')->...

elements - dragging an image on the pane does "nothing". I say "nothing" in quotes because I can see traffic in DevTools and it's doing something but no file ever actually ends up in S3, and no file shows up in the editor panel, confirming that something probably went wrong but no exceptions are being thrown.

What I've tried:
- Digging into the internals of the MarkdownEditor component to see if I could isolate where it's failing, but moving my way up the dependency/inheritance tree, I can't actually figure out where the actual upload is taking place
- Confirmed that the AWS API key is valid and has active rights to store in the target bucket
- Confirmed that the file never ends up in S3
- Confirmed that the

aws/aws-sdk-php

aws/aws-sdk-php

package is installed and is up to date
- Confirmed that by removing the disk setting, things go back to normal and the file is saved to the

local

local

disk configured on my machine
- Confirmed that DevTools shows no actual errors; all the requests succeed

If anyone has any suggestions of things to dig into, I would really appreciate them, even if they seem far-fetched. I think I've tried most of the low-hanging fruit so I'm ready to get creative.

Thanks!

Solution

Ok I was able to solve the problem by doing a couple things:
1. In my

config/filesystems.php

config/filesystems.php

file, I set

'throw' => true

'throw' => true

on the S3 disk so I could see the actual upload exception
2. The exception being thrown was (unsurprisingly)

League \ Flysystem \ UnableToWriteFile

League \ Flysystem \ UnableToWriteFile

but the error message went into more detail about the problem which helped:

Unable to write file at location: blog/uAbRbGcMhJ2FiBJkpJPce6hv9WZVAl4rH3yOA7ye.png. Error executing "PutObject" on "https://mysite.com/blog/uAbRbGcMhJ2FiBJkpJPce6hv9WZVAl4rH3yOA7ye.png"; AWS HTTP error: Client error: `PUT https://mysite.com/blog/uAbRbGcMhJ2FiBJkpJPce6hv9WZVAl4rH3yOA7ye.png` resulted in a `400 Bad Request` response: <?xml version="1.0" encoding="UTF-8"?> <Error><Code>AccessControlListNotSupported</Code><Message>The bucket does not all (truncated...) AccessControlListNotSupported (client): The bucket does not allow ACLs - <?xml version="1.0" encoding="UTF-8"?> <Error><Code>AccessControlListNotSupported</Code><Message>The bucket does not allow ACLs</Message><RequestId>P3RAERHS2YN0K5YY</RequestId><HostId>hVGhDkRqaDPynZwe82JbxCOciQUFwBc0wzGvYtuO4N4bb9alyw9IO+BTUrD7rTWlyn826wZNrDk=</HostId></Error>

Unable to write file at location: blog/uAbRbGcMhJ2FiBJkpJPce6hv9WZVAl4rH3yOA7ye.png. Error executing "PutObject" on "https://mysite.com/blog/uAbRbGcMhJ2FiBJkpJPce6hv9WZVAl4rH3yOA7ye.png"; AWS HTTP error: Client error: `PUT https://mysite.com/blog/uAbRbGcMhJ2FiBJkpJPce6hv9WZVAl4rH3yOA7ye.png` resulted in a `400 Bad Request` response: <?xml version="1.0" encoding="UTF-8"?> <Error><Code>AccessControlListNotSupported</Code><Message>The bucket does not all (truncated...) AccessControlListNotSupported (client): The bucket does not allow ACLs - <?xml version="1.0" encoding="UTF-8"?> <Error><Code>AccessControlListNotSupported</Code><Message>The bucket does not allow ACLs</Message><RequestId>P3RAERHS2YN0K5YY</RequestId><HostId>hVGhDkRqaDPynZwe82JbxCOciQUFwBc0wzGvYtuO4N4bb9alyw9IO+BTUrD7rTWlyn826wZNrDk=</HostId></Error>

3. Ok, so now we know it's trying to set an ACL but the bucket is configured not to use them. This is intentional as the bucket is specifically meant to host public assets.
4. Initially I tried adding

'options' => ['ACL' => null]

'options' => ['ACL' => null]

to my S3 disk in

filesystems.php

filesystems.php

but it seemed like it was being ignored because the value was null. Then I tried

'options' => ['ACL' => '']

'options' => ['ACL' => '']

and everything started working. Files could be dropped into the MarkdownEditor and were immediately being displayed!

Jump to solution

MarkdownEditor will save to local disk but not S3

->fileAttachmentsDisk()

->fileAttachmentsDisk()

->fileAttachmentsDisk('s3')

->fileAttachmentsDisk('s3')

on the MarkdownEditor component - which works perfectly fine throughout the rest of the Admin Panel in the form of various

SpatieMediaLibraryFileUpload::disk('s3')->...

SpatieMediaLibraryFileUpload::disk('s3')->...

aws/aws-sdk-php

aws/aws-sdk-php

package is installed and is up to date
- Confirmed that by removing the disk setting, things go back to normal and the file is saved to the

local

local

Solution

Ok I was able to solve the problem by doing a couple things:
1. In my

config/filesystems.php

config/filesystems.php

file, I set

'throw' => true

'throw' => true

on the S3 disk so I could see the actual upload exception
2. The exception being thrown was (unsurprisingly)

League \ Flysystem \ UnableToWriteFile

League \ Flysystem \ UnableToWriteFile

but the error message went into more detail about the problem which helped:

Unable to write file at location: blog/uAbRbGcMhJ2FiBJkpJPce6hv9WZVAl4rH3yOA7ye.png. Error executing "PutObject" on "https://mysite.com/blog/uAbRbGcMhJ2FiBJkpJPce6hv9WZVAl4rH3yOA7ye.png"; AWS HTTP error: Client error: `PUT https://mysite.com/blog/uAbRbGcMhJ2FiBJkpJPce6hv9WZVAl4rH3yOA7ye.png` resulted in a `400 Bad Request` response: <?xml version="1.0" encoding="UTF-8"?> <Error><Code>AccessControlListNotSupported</Code><Message>The bucket does not all (truncated...) AccessControlListNotSupported (client): The bucket does not allow ACLs - <?xml version="1.0" encoding="UTF-8"?> <Error><Code>AccessControlListNotSupported</Code><Message>The bucket does not allow ACLs</Message><RequestId>P3RAERHS2YN0K5YY</RequestId><HostId>hVGhDkRqaDPynZwe82JbxCOciQUFwBc0wzGvYtuO4N4bb9alyw9IO+BTUrD7rTWlyn826wZNrDk=</HostId></Error>

Unable to write file at location: blog/uAbRbGcMhJ2FiBJkpJPce6hv9WZVAl4rH3yOA7ye.png. Error executing "PutObject" on "https://mysite.com/blog/uAbRbGcMhJ2FiBJkpJPce6hv9WZVAl4rH3yOA7ye.png"; AWS HTTP error: Client error: `PUT https://mysite.com/blog/uAbRbGcMhJ2FiBJkpJPce6hv9WZVAl4rH3yOA7ye.png` resulted in a `400 Bad Request` response: <?xml version="1.0" encoding="UTF-8"?> <Error><Code>AccessControlListNotSupported</Code><Message>The bucket does not all (truncated...) AccessControlListNotSupported (client): The bucket does not allow ACLs - <?xml version="1.0" encoding="UTF-8"?> <Error><Code>AccessControlListNotSupported</Code><Message>The bucket does not allow ACLs</Message><RequestId>P3RAERHS2YN0K5YY</RequestId><HostId>hVGhDkRqaDPynZwe82JbxCOciQUFwBc0wzGvYtuO4N4bb9alyw9IO+BTUrD7rTWlyn826wZNrDk=</HostId></Error>

'options' => ['ACL' => null]

'options' => ['ACL' => null]

to my S3 disk in

filesystems.php

filesystems.php

but it seemed like it was being ignored because the value was null. Then I tried

'options' => ['ACL' => '']

'options' => ['ACL' => '']

and everything started working. Files could be dropped into the MarkdownEditor and were immediately being displayed!

Jump to solution

MarkdownEditor will save to local disk but not S3

MarkdownEditor will save to local disk but not S3

Similar Threads

Similar Threads

Similar Threads