How to upload inline images with post content

Question

how can i upload images with content of post. In Quill js images storing as base64. It's perfect way to transport image but there is one little problem; ajax timout. So how can i upload image when adding it or when publishing. I hope i explained well.

--edit--

I already have a code that works fine with some limit. I'm transporting images with inline base64 images. Like;

<p>Some article & post</p>
<p><img src="data:image/jpeg;base64,R0lGODl..."></p>
<p>And some bla bla</p>

The main problem is when images get bigger also it's reaches the ajax limits + server limits. How can i get over this problem? How can i upload images in proper way.

To get help from the community and prevent your question from being closed or deleted, please post the code you're asking about and any attempts you made at solving it. — Kinglish, May 26 '21 at 20:40
It's not about problem or error at code. More like theoretical problem. If i try to share code, need to share lots of lines (and multiple files). — megasteve, May 26 '21 at 20:56

score 1 · Answer 1 · answered May 26 '21 at 21:01

1

Two things to consider.

First, set limits on how large an image your users can insert: https://stackoverflow.com/a/64383983/1772933

Second, you can set the timeout manually on your ajax request

$.ajax({
    url: "test.html",
    error: function(){
        // will fire when timeout is reached
    },
    success: function(){
        //do something
    },
    timeout: 30000 // sets timeout to 30 seconds
});

answered May 26 '21 at 21:01

Kinglish

23,358
3
22
43

Oh we can set timeout by ourselves? That's awesome! But still there is one problem to get over it. Limit of servers. It's perfect solution for local. But in shared hosting i have only 256mb limit. – megasteve May 26 '21 at 21:07
I believe quill itself has a 2MB limit per image. 256mb limit for what? You're not actually storing these images - you're receiving the base64 data and putting it in a database. If your sending more than 256mb per ajax transactions, you need to rethink your approach :) – Kinglish May 26 '21 at 21:17
PHP have post_max_size config. And in my hosting it's limited with 256mb (max). I'm trying to understand how can i upload images separete with actual post content. – megasteve May 26 '21 at 21:21
Again, if you're thinking that your quill.js post data (including images) is going to be anywhere near 256mb, youd have to have over 100 or maybe twice that many images in a single post. Very unlikely. Not sure what your concern is in that respect, but I hope the research, info and tools I recommended help you – Kinglish May 27 '21 at 07:22
Thanks dude, your solution will work fine for short term(i hope it will short). – megasteve May 28 '21 at 03:06

score 0 · Accepted Answer · edited Jul 05 '21 at 21:07

First of all i'm using EditorJS as rich text editor. Thanks to EditorJS, we don't have to deal with base64.

Needings:

Temp folder for uploading images to server.
PHP file upload script.
EditorJS and image plugin.

Answer:

When we add image to EditorJS it will upload file by given url. So at the given url(PHP file upload script) we will upload our image to temporary folder.

As a response we will give full url of image. Here we are, image uploaded. After that when we submit full text of post, we take image url's from string and get base name of them. And by this way you can move the file anywhere as you want. Dont forget to change the original url!

How to upload inline images with post content

2 Answers2