JSFiddle - React, Tailwind, and code Playground
HTML
<div placeholder="Ваше сообщение..." id="foto-div" contenteditable="true"></div>
<hr>
<textarea placeholder="Ваше сообщение..." id="foto-textarea"></textarea>
<hr>
<div id="foto-all"></div>
<hr>
<div class="foto-status"></div>
<form id="upload-image" enctype="multipart/form-data"><input type="file" name="image" id="image"></form>
CSS
img {max-width:100px;}
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
}
div#foto-all {
display: none;
background: #f6f7f9;
text-align: left;
margin: 10px;
border-radius: 2px;
clear: both;
padding: 10px;
}
div#foto-all div {
display: inline-block;
margin-right: 25px;
}
div#foto-all img {
width: 40px;
object-fit: cover;
height: 40px;
border-radius: 4px;
}
div#foto-all p {
background: red;
color: #fff;
padding: 2px 4px;
position: absolute;
margin: -54px 0px 0px 28px;
border-radius: 50%;
font-family: font3;
border: 3px solid #f6f7f9;
font-weight: bold;
width: 12px;
text-align: center;
}
JavaScript
$('#image').change(function(){
$('.foto-status').html('Загружаем').show();
var formData = new FormData();
formData.append("image", $("#image")[0].files[0]);
$.ajax({
url: "https://api.imgur.com/3/image",
type: "POST",
datatype: "json",
headers: {
"Authorization": "Client-ID 0e3c9522203ed9f"
},
data: formData,
success: function(response) {
var photo = response.data.link;
$('#foto-all').append('<div><img src="'+photo+'"><p>x</p></div>').show(); // Вывод в DIV html
$('#foto-div').append('<img src="'+photo+'">'); // Вывод в DIV поле ввода
$('#foto-textarea').val('[img]'+photo+'[/img]'); // Вывод в textarea поле ввода
$('.foto-status').html('Загружено').hide();
},
error: function(response){
$('div#foto-all, foto-status').html('').hide();
},
cache: false,
contentType: false,
processData: false
});
});
$('div#foto-all p').live( "click", function() {
$(this).parent().remove();
fotoHide = $('div#foto-all div').size();
if(fotoHide < 1) {$('div#foto-all').hide(); }
});