Upload the image before loading it. How is it done?

Question

Upload the image before loading it. How is it done?

For example, is post. And it is added to the picture. But it is loaded before the publication of the post (as long as the text is typed, the picture is already visible). That is, by the time you save the post, the picture is already uploaded. But if a post doesn't save, and probably the picture will not be saved.

How is it done? What is it called? Where to read?
Example: discourse - the creation of the post

PHP

Ramiro_Jones22 asked April 19th 20 at 12:34

Related questions

More answers about "Upload the image before loading it. How is it done?"

2 answers

eryn answered on · Answer 1 · 2020-04-19T10:36:13.976Z

eryn answered on April 19th 20 at 12:36

Immediately on the server to load not necessarily, you can just JavaScript to do. Here is an example of the popular stackoverflow answer:

function readURL(input) {
 if (input.files && input.files[0]) {
 var reader = new FileReader();

 reader.onload = function(e) {
 $('#blah').attr('src', e.target.result);
}

 reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}

$("#imgInp").change(function() {
readURL(this);
});

And you can actually download it but if the post is not published then remove immediately. - leopold_Boyle commented on April 19th 20 at 12:39

@leopold_BoyleCan, and many do. Additional problems just appear. For example how do you know that the post is not published. The user simply closed the browser. And whether he will then continue to edit it, or quite changed my mind. Or Internet he was temporarily off. And here we out of the blue came up with the problem is to track down and delete images that are not attached to the post.

This is of course solved, but should be some advantage to be here. And I don't see any for the website or for the user.

UPD. Although there are cases, for example when simultaneously downloading 20 images for the user saving will be much faster if these 200MB had already been uploaded in the background and not in POST request to server go. - eryn commented on April 19th 20 at 12:42

Implement just in case. Wanted to see ka, the entire process is organized and how this technology/case in principle called to search examples of implementation. - Ramiro_Jones22 commented on April 19th 20 at 12:45

@Ramiro_Jones22, well, look like in the toaster attached a picture to the comment if you select "upload from computer"
it is actually loaded on hstor.org Ajax and the answer comes filled id of the file
review can not send and picture and will lie dormant
so doing all of that

in the VC if I write a post attach a photo, and then your mind is already flooded with photos remain on the server. - Giuseppe commented on April 19th 20 at 12:48

Billie49 answered on · Answer 2 · 2020-04-19T10:38:13.976Z

I did that.

Draw a hidden frame:

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

Drawn form AFTER the main form post:

Form for loading images with the select button file:
 <form action="/thumbnail.php" method="post" enctype="multipart/form-data" target="iframe">
 <input type="file" name="file" id="file" />
 </form>

In the sample picture triggered the submit event and loads it into a hidden frame on /thumbnail.php.
thumbnail.php converts the image, saves the FS, writes something to the table (see below), and then gives the path to the preview, JS from the parent window, the browser draws the block image with the URL preview.
Drawn in a basic form post hidden field of the form

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

where 123 - ID of the image that we have already put to the server and recorded in a table of the form
id | id_post | file_name | file_date
it's kind of a record
123 | null | file.jpeg | 20-02-2020
when you post the form itself, we do update, we run through the array of thumbnail POST and have each record updated id_post to the one received in the result of saving the post:
update images set id_post = 1 where id = 123

Kron runs every 15 minutes and kills all of the pictures where id_post file_date is null and < now()-1 hour