Textarea: Make multiple attachments

This commit is contained in:
veselcraft 2022-12-09 02:58:37 +03:00
parent 0fd5958443
commit 3a9c6766dd
No known key found for this signature in database
GPG key ID: AED66BC1AC628A4E
4 changed files with 127 additions and 9 deletions

View file

@ -247,15 +247,28 @@ final class WallPresenter extends OpenVKPresenter
$flags |= 0b01000000;
try {
$photo = NULL;
$photos = [];
$video = NULL;
if($_FILES["_pic_attachment"]["error"] === UPLOAD_ERR_OK) {
/* if($_FILES["_pic_attachment"]["error"] === UPLOAD_ERR_OK) {
$album = NULL;
if(!$anon && $wall > 0 && $wall === $this->user->id)
$album = (new Albums)->getUserWallAlbum($wallOwner);
$photo = Photo::fastMake($this->user->id, $this->postParam("text"), $_FILES["_pic_attachment"], $album, $anon);
} */
foreach($_FILES as $file) {
bdump($file);
if($file["error"] === UPLOAD_ERR_OK && preg_match('/^image\//', $file['type'])) {
$album = NULL;
if(!$anon && $wall > 0 && $wall === $this->user->id)
$album = (new Albums)->getUserWallAlbum($wallOwner);
$photos[] = Photo::fastMake($this->user->id, $this->postParam("text"), $file, $album, $anon);
}
}
bdump($photos);
if($_FILES["_vid_attachment"]["error"] === UPLOAD_ERR_OK)
$video = Video::fastMake($this->user->id, $this->postParam("text"), $_FILES["_vid_attachment"], $anon);
@ -276,7 +289,7 @@ final class WallPresenter extends OpenVKPresenter
$this->flashFail("err", tr("failed_to_publish_post"), "Poll format invalid");
}
if(empty($this->postParam("text")) && !$photo && !$video && !$poll)
if(empty($this->postParam("text")) && !$photos && !$video && !$poll)
$this->flashFail("err", tr("failed_to_publish_post"), tr("post_is_empty_or_too_big"));
try {
@ -293,7 +306,7 @@ final class WallPresenter extends OpenVKPresenter
$this->flashFail("err", tr("failed_to_publish_post"), tr("post_is_too_big"));
}
if(!is_null($photo))
foreach($photos as $photo)
$post->attach($photo);
if(!is_null($video))

View file

@ -8,8 +8,8 @@
<!-- padding to fix <br/> bug -->
</div>
<div id="post-buttons{$textAreaId}" style="display: none;">
<div class="post-upload">
{_attachment}: <span>(unknown)</span>
<div class="upload">
</div>
<div class="post-has-poll">
{_poll}

View file

@ -2144,6 +2144,67 @@ a.poll-retract-vote {
border-radius: 1px;
}
.progress {
border: 1px solid #eee;
height: 15px;
background: linear-gradient(to bottom, #fefefe, #fafafa);
}
.progress .progress-bar {
background: url('progress.png');
background-repeat: repeat-x;
height: 15px;
animation-name: progress;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes progress {
from {
background-position: 0;
}
to {
background-position: 20px;
}
}
.upload {
margin-top: 8px;
}
.upload .upload-item {
width: 75px;
height: 60px;
overflow: hidden;
display: inline-block;
margin-right: 3px;
}
.upload-item .upload-delete {
position: absolute;
background: rgba(0,0,0,0.5);
padding: 2px 5px;
text-decoration: none;
color: #fff;
font-size: 11px;
margin-left: 57px; /* мне лень переделывать :DDDD */
opacity: 0;
transition: 0.25s;
}
.upload-item:hover > .upload-delete {
opacity: 1;
}
.upload-item img {
width: 100%;
max-height: 60px;
object-fit: cover;
border-radius: 3px;
}
@keyframes appearing {
from {
opacity: 0;

View file

@ -95,15 +95,17 @@ u(".post-like-button").on("click", function(e) {
return false;
});
let picCount = 0;
function setupWallPostInputHandlers(id) {
u("#wall-post-input" + id).on("paste", function(e) {
/* u("#wall-post-input" + id).on("paste", function(e) {
if(e.clipboardData.files.length === 1) {
var input = u("#post-buttons" + id + " input[name=_pic_attachment]").nodes[0];
input.files = e.clipboardData.files;
u(input).trigger("change");
}
});
}); */
u("#wall-post-input" + id).on("input", function(e) {
var boost = 5;
@ -116,6 +118,48 @@ function setupWallPostInputHandlers(id) {
// revert to original size if it is larger (possibly changed by user)
// textArea.style.height = (newHeight > originalHeight ? (newHeight + boost) : originalHeight) + "px";
});
u(`#wall-post-input${id}`).on("paste", function(e) {
for (let i = 0; i < e.clipboardData.files.length; i++) {
console.log(e.clipboardData.files[i]);
if(e.clipboardData.files[i].type.match('^image/')) {
let blobURL = URL.createObjectURL(e.clipboardData.files[i]);
addPhotoMedia(e.clipboardData.files, blobURL, id);
}
}
});
u(`#post-buttons${id} input[name=_pic_attachment]`).on("change", function(e) {
let blobURL = URL.createObjectURL(e.target.files[0]);
addPhotoMedia(e.target.files, blobURL, id);
});
function addPhotoMedia(files, preview, id) {
if(getMediaCount() >= 10) {
alert('Не больше 10 пикч');
} else {
picCount++;
u(`#post-buttons${id} .upload`).append(u(`
<div class="upload-item" id="aP${picCount}">
<a href="javascript:removePicture(${picCount})" class="upload-delete">×</a>
<img src="${preview}">
</div>
`));
u(`div#aP${picCount}`).nodes[0].append(u(`<input type="file" accept="image/*" name="attachPic${picCount}" id="attachPic${picCount}" style="display: none;">`).first());
let input = u(`#attachPic${picCount}`).nodes[0];
input.files = files; // нужен рефактор, но щас не
console.log(input);
u(input).trigger("change");
}
}
function getMediaCount() {
return u(`#post-buttons${id} .upload`).nodes[0].children.length;
}
}
function removePicture(idA) {
u(`div#aP${idA}`).nodes[0].remove();
}
u("#write > form").on("keydown", function(event) {