Uploading an image before uploading it. How do they do it?

Question

PHP

For example, a post is being made. And an image is added to it. But it is loaded before the publication of the post itself (while the text is being typed, the picture is already visible). That is, by the time the post itself is saved, the picture is already loaded, as it were. But if the post is not saved, then probably the picture will not be saved.

How it's done? How does is called? Where to read?
Example: discourse - post creation

Answer 1

To get started, decide what you really need - a preview of the image (to make it look like the image is loaded, the user sees it in the content that he writes) or the actual upload of the image to the server. There will be different techniques depending on the answer.
Consciously consider and weigh the main disadvantages of uploading to the server. The most important thing is that pictures on the server will accumulate and you will have to develop a system for determining "necessary" and "unnecessary" as well as a mechanism for automatically removing unnecessary ones. Because there will be a lot of garbage. Someone wrote a draft and did not publish / closed the window and scored, and the picture (or even several) was already loaded. Someone uploaded one picture, looked, did not like it, chose and uploaded another one. And so 10 times in a row until I picked up a picture that I like. And you have 9 unnecessary pictures loaded on the server. After a while your downloads folder grows to gigabytes/thousands of files, you look at it and don't really understand what is being used and what is not.
Based on this, in most cases, all you need is a client-side preview with javascript. You can do this with vanilla js or use an adequate library like https://github.com/blueimp/JavaScript-Load-Image which already solves a bunch of small tasks that you don’t even know about yet (for example, automatic rotation by metadata, resize preview for purposes performance optimization, crossorigin, etc.).
If, nevertheless, you decide to load from directly to the server, then start with the minimum technical specification. Are you using any CMS or framework. Where and how will you upload files. How will you store the history of downloaded and clear unnecessary ones. Etc. The upload process itself is trivial - you must have a URL that accepts data (image + any useful information, for example ID / UUID of the draft entry for which the picture is uploaded) using the PUT or POST method, processes them and returns the image URL. Send a picture there with Ajax, get a response with the address of the picture on the server, insert it into the DOM.

Answer 2

I did.
A hidden frame is drawn:

<iframe width="0" height="0" name="iframe"></iframe>

The form is drawn AFTER the main post form:

Форма для загрузки изображений с кнопкой выбора файла:
 <form action="/thumbnail.php" method="post" enctype="multipart/form-data" target="iframe">
     <input type="file" name="file" id="file" />
 </form>

When an image is selected, the submit event fires and loads it into a hidden frame on /thumbnail.php.
thumbnail.php converts the image, saves it to the FS, writes something to the table (see below), after which it gives the path to the preview, JS from the parent browser window draws an image block with the URL of this preview.
Drawn in the main post form hidden view field

<input type="hidden" name="thumbnail[]" value="123">

where 123 is the ID of the picture that we have already put on the server and written to the view table,
id | id_post | file_name | file_date
it turns out something like a record
123 | null | file.jpeg | 20-02-2020
when posting the form itself, we do an update, run through the thumbnail array from POST and update the id_post for each record with the one that we received as a result save post:
update images set id_post = 1 where id = 123
cron runs every 15 minutes and kills all images where id_post is null and file_date < now()-1 hour

Answer 3

The Aleksey option is more suitable for image previews. I would recommend doing this:
1. The user selects an image, you preview it and send it to the server via ajax
2. The server gives you the id or file name for the uploaded image
3. After the user creates a post (or whatever you need) you send along with other data id pictures