mohamedsabil83 / filament-forms-tinyeditor

A TinyMce Editor component for filament
MIT License
164 stars 37 forks source link

[Question]: How can i resize image after uploading? #123

Closed Matvik closed 3 months ago

Matvik commented 3 months ago

What happened?

Thanks for a great plugin. How can I change the image while uploading to the server? I did not find where the process itself takes place and how it can be influenced. For example, set the maximum width and height of the loaded image. thank you

How to reproduce the bug

Upload image in editor

Package Version

2.3.1

PHP Version

8.2.16

Laravel Version

10.48.4

Which operating systems does with happen with?

Linux

Notes

No response

mohamedsabil83 commented 3 months ago

Hello, @Matvik. Just so you know, the process you asked for is related to the editor itself, not the plugin. When you open the upload image dialog and choose your image, there are two input boxes (width and height). Set your value there, then save. You can do the same after inserting the image by right-clicking on the image and choosing the Edit image from the popup menu.

Also, after inserting the image, you can click once on it to choose it and use the small boxes in the corner to resize it.

Matvik commented 3 months ago

Maybe I didn't explain the situation very clearly. We are not talking about the visible size of the image (which is regulated by the TynyMCE), but about the file itself, which is stored on the server and then displayed in the browser. It is often necessary to resize the file itself during the download process.

If I use this type of editor in my project, then I save the image on the backend myself, and I can perform conversion there. And here it is implemented by means of filament, and it is not entirely clear to me how it can be changed.

mohamedsabil83 commented 3 months ago

I don't know if it works, but maybe you can create a component that extends the TinyEditor one, and overrides needed methods to dispatch an event or job, passing the path to the uploaded file, which does the changes you want.

Also, you can ask in Filament's Discord because they used the same technique in RichEditor component, and I applied that from them.