[WIP] Textarea: Add upload multiple pictures

Now there's thumbnail feature in TextArea box.

This is WIP, as the video is broken and posts doesn't feel good with multiple images

Web/Presenters/WallPresenter.php

@@ -202,27 +202,26 @@ final class WallPresenter extends OpenVKPresenter
         if($this->postParam("force_sign") === "on")
             $flags |= 0b01000000;
         
+        $photos = [];
+        $_FILES["_pic_attachment"] = null;
+        foreach($_FILES as $file) {
+        	bdump($file);
             try {
-            $photo = NULL;
+                if($file["error"] === UPLOAD_ERR_OK && preg_match('/^image\//', $file['type'])) {
-            $video = NULL;
-            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);
+                    $photos[] = Photo::fastMake($this->user->id, $this->postParam("text"), $file, $album, $anon);
-            }
-            
-            if($_FILES["_vid_attachment"]["error"] === UPLOAD_ERR_OK) {
-                $video = Video::fastMake($this->user->id, $this->postParam("text"), $_FILES["_vid_attachment"], $anon);
                 }
             } catch(\DomainException $ex) {
                 $this->flashFail("err", "Не удалось опубликовать пост", "Файл медиаконтента повреждён.");
             } catch(ISE $ex) {
                 $this->flashFail("err", "Не удалось опубликовать пост", "Файл медиаконтента повреждён или слишком велик.");
             }
+        }
                 
-        if(empty($this->postParam("text")) && !$photo && !$video)
+        if(empty($this->postParam("text")) && empty($photos))
             $this->flashFail("err", "Не удалось опубликовать пост", "Пост пустой или слишком большой.");
         
         try {
@@ -239,11 +238,9 @@ final class WallPresenter extends OpenVKPresenter
             $this->flashFail("err", "Не удалось опубликовать пост", "Пост слишком большой.");
         }
 
-        if(!is_null($photo))
+        foreach($photos as $photo) {
         	$post->attach($photo);
-        
+        }
-        if(!is_null($video))
-            $post->attach($video);
         
         if($wall > 0 && $wall !== $this->user->identity->getId())
             (new WallPostNotification($wallOwner, $post, $this->user->identity))->emit();

Web/Presenters/templates/components/textArea.xml

@@ -8,8 +8,8 @@
             <!-- padding to fix <br/> bug -->
         </div>
         <div id="post-buttons{$textAreaId}" style="display: none;">
-            <div class="post-upload">
+            <div class="upload">
-                {_attachment}: <span>(unknown)</span>
+                
             </div>
             <div n:if="$postOpts ?? true" class="post-opts">
                 {var anonEnabled = OPENVK_ROOT_CONF['openvk']['preferences']['wall']['anonymousPosting']['enable']}
@@ -80,10 +80,6 @@
 
 <script>
     $(document).ready(() => {
-        u("#post-buttons{$textAreaId} .postFileSel").on("change", function() {
-            handleUpload.bind(this, {$textAreaId})();
-        });
-
         setupWallPostInputHandlers({$textAreaId});
     });
 </script>

Web/static/css/style.css

@@ -1841,3 +1841,64 @@ body.scrolled .toTop:hover {
 .center {
     margin: 0 auto;
 }
+
+.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;
+}

Web/static/js/al_wall.js

@@ -22,7 +22,7 @@ function trim(string) {
     return newStr;
 }
 
-function handleUpload(id) {
+/* function handleUpload(id) {
     console.warn("блять...");
     
     u("#post-buttons" + id + " .postFileSel").not("#" + this.id).each(input => input.value = null);
@@ -37,7 +37,7 @@ function handleUpload(id) {
     }
 
     document.querySelector("#post-buttons" + id + " #wallAttachmentMenu").classList.add("hidden");
-}
+} */
 
 function initGraffiti(id) {
     let canvas = null;
@@ -95,16 +95,9 @@ 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) {
-        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;
         var textArea          = e.target;
@@ -116,4 +109,46 @@ 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);
+            }
+        }
+    });
+
+    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);
+    });
+
+    function addPhotoMedia(files, preview) {
+        if(getMediaCount() >= 4) {
+            alert('Низя.');
+        } 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();
 }