Inserting images from clipboard/downloading from a computer

[doroved]

I propose to add inserting images from clipboard/uploading from computer to make it faster and more comfortable to create a template, because it takes much longer to prepare an image from a link.
And when copying HTML code, images should be replaced with links, e.g.
https://cdn.img.com/cat.png, where cat is the name that can be requested when inserting an image.

[arikchakma]

If we do it we need to handle the hosting part of the images, which will be a bit costly. What do you think?

[doroved]

If we do it we need to handle the hosting part of the images, which will be a bit costly. What do you think?

I must have explained it badly.
Look, for example, we pasted an image from the clipboard and saved it in IndexDB.
After exporting HTML code in place of the image will be, for example
{{ CAT }}, where CAT is the user defined name of the image after pasting from the clipboard.
This way we can create templates much faster and after we create, export, upload our images to our server or somewhere else and replace insertions like {{ CAT }} with links.
It's just that if when I create a template I have to go through a lot of different pictures to choose the best one, it's very stressful to upload them somewhere.

P.S. If the application is used locally, you can use sqlite to store the images

[arikchakma]

Ah, It's an excellent idea. I will think about how to implement it and start soon (I might take some time as I'm taking a break right now).

[arikchakma]

Hey @doroved I was thinking about this solution. We allow saving templates, this might be an issue for that. Let's say someone save one template (with images) and try to edit it from somewhere else, the images will not be available there right?

[doroved]

Hey @doroved I was thinking about this solution. We allow saving templates, this might be an issue for that. Let's say someone save one template (with images) and try to edit it from somewhere else, the images will not be available there right?

Hi, well for your site yes, without cdn storage this script will not work.
But for local use it will be ok.
For the site, you can not save images and warn about it.
But quickly design templates due to copying images from clipboard/downloading from computer, it will improve DX and save time.

[arikchakma]

Hey @doroved I was thinking about this solution. We allow saving templates, this might be an issue for that. Let's say someone save one template (with images) and try to edit it from somewhere else, the images will not be available there right?

Hi, well for your site yes, without cdn storage this script will not work. But for local use it will be ok. For the site, you can not save images and warn about it. But quickly design templates due to copying images from clipboard/downloading from computer, it will improve DX and save time.

It will break the workflow for the site, what I can do is expose some low level API for onImageDrop or similar so on local you can upload it wherever you want to. Wdyt?

[doroved]

It will break the workflow for the site, what I can do is expose some low level API for onImageDrop or similar so on local you can upload it wherever you want to. Wdyt?

Any implementation that will allow inserting images from clipboard/downloading from computer - will be appreciated by the community)

[arikchakma]

Any implementation that will allow inserting images from clipboard/downloading from computer - will be appreciated by the community)

I do have the plan to integrate S3, just the way we support sending test emails using Resend. Bring your own key way. I think it will be a much more suitable way to do it.

[m4jor101]

Also consider adding alt text input for the images, as sometimes the link might be broken or from accessibility point of view

Something like this maybe:

Also, for horizontal logo / word logo, the logo seems stretched. We could contain it by default to fix this.
Like in this example:

[arikchakma]

The logo is expected to be a 1x1 Aspect ratio, but I will still look into it. I liked your idea for the Alt text, currently, I'm thinking of adding more customization to the editor (I'm too busy with my other commitments right now). Maybe I will allocate some time from the next weekend to work on it. Thanks for your valuable feedback.

[m4jor101]

Thanks for the response, I'm glad to know you liked my suggestion and No worries take your time.

[bdhamithkumara]

If we do it we need to handle the hosting part of the images, which will be a bit costly. What do you think?

Hi, you can use Cloudflare R2 bucket for storing images, they provide a free plan. we can use some image size limitations to prevent the limit exceeded.

[arikchakma]

Next weekend I will start implementing this feature.

[bdhamithkumara]

If you wish I can contribute 😎

[arikchakma]

I will be more than happy, but we need to discuss the API. I don't want to directly add that into the editor package.