From c9a2fbbbb34c06814357c5f0ac756fb12baabe7c Mon Sep 17 00:00:00 2001
From: Evg <budo@narod.ru>
Date: Tue, 30 Nov 2021 08:00:54 +0300
Subject: [PATCH] Removing jQuery from uploading photos

---
 .../Answer/EditAnswerController.php           |   1 -
 .../Facets/EditFacetController.php            |   5 +-
 app/Controllers/Post/AddPostController.php    |   5 +-
 app/Controllers/Post/EditPostController.php   |  15 +-
 app/Controllers/User/SettingController.php    |   7 +-
 app/Libraries/UploadImage.php                 |  15 +-
 public/assets/css/image-uploader.css          | 166 --------
 public/assets/js/image-uploader.js            | 379 ------------------
 public/assets/js/uploads.js                   | 120 ++++++
 .../views/default/content/facets/edit.php     |  15 +-
 resources/views/default/content/post/add.php  |  29 +-
 resources/views/default/content/post/edit.php |  38 +-
 resources/views/default/content/post/view.php |   9 +-
 .../default/content/user/setting/avatar.php   |  57 ++-
 14 files changed, 246 insertions(+), 615 deletions(-)
 delete mode 100644 public/assets/css/image-uploader.css
 delete mode 100644 public/assets/js/image-uploader.js
 create mode 100644 public/assets/js/uploads.js

diff --git a/app/Controllers/Answer/EditAnswerController.php b/app/Controllers/Answer/EditAnswerController.php
index 061418e6..ae27ac72 100644
--- a/app/Controllers/Answer/EditAnswerController.php
+++ b/app/Controllers/Answer/EditAnswerController.php
@@ -31,7 +31,6 @@ class EditAnswerController extends MainController
 
         Request::getResources()->addBottomStyles('/assets/js/editor/toastui-editor.min.css');
         Request::getResources()->addBottomScript('/assets/js/editor/toastui-editor-all.min.js');
-        Request::getResources()->addBottomStyles('/assets/js/editor/dark.css');
 
         return view(
             '/answer/edit-form-answer',
diff --git a/app/Controllers/Facets/EditFacetController.php b/app/Controllers/Facets/EditFacetController.php
index ce5d0314..4a807b4e 100644
--- a/app/Controllers/Facets/EditFacetController.php
+++ b/app/Controllers/Facets/EditFacetController.php
@@ -38,8 +38,7 @@ class EditFacetController extends MainController
         );
 
         Request::getResources()->addBottomStyles('/assets/css/select2.css');
-        Request::getHead()->addStyles('/assets/css/image-uploader.css');
-        Request::getResources()->addBottomScript('/assets/js/image-uploader.js');
+        Request::getResources()->addBottomScript('/assets/js/uploads.js');
         Request::getResources()->addBottomScript('/assets/js/select2.min.js');
 
         return view(
@@ -111,7 +110,7 @@ class EditFacetController extends MainController
 
         // Запишем img
         $img = $_FILES['images'];
-        $check_img  = $_FILES['images']['name'][0];
+        $check_img  = $_FILES['images']['name'];
         if ($check_img) {
             UploadImage::img($img, $facet['facet_id'], 'topic');
         }
diff --git a/app/Controllers/Post/AddPostController.php b/app/Controllers/Post/AddPostController.php
index 5ee4fdd3..ad49d3e5 100644
--- a/app/Controllers/Post/AddPostController.php
+++ b/app/Controllers/Post/AddPostController.php
@@ -20,8 +20,7 @@ class AddPostController extends MainController
     // Форма добавление поста
     public function index()
     {
-        Request::getHead()->addStyles('/assets/css/image-uploader.css');
-        Request::getResources()->addBottomScript('/assets/js/image-uploader.js');
+        Request::getResources()->addBottomScript('/assets/js/uploads.js');
         Request::getResources()->addBottomStyles('/assets/css/select2.css');
         Request::getResources()->addBottomScript('/assets/js/select2.min.js');
         Request::getResources()->addBottomStyles('/assets/js/editor/toastui-editor.min.css');
@@ -126,7 +125,7 @@ class AddPostController extends MainController
 
         // Обложка поста
         $cover  = $_FILES['images'];
-        if ($_FILES['images']['name'][0]) {
+        if ($_FILES['images']['name']) {
             $post_img = UploadImage::cover_post($cover, 0, $redirect, $this->uid['user_id']);
         }
 
diff --git a/app/Controllers/Post/EditPostController.php b/app/Controllers/Post/EditPostController.php
index f644d32c..57841348 100644
--- a/app/Controllers/Post/EditPostController.php
+++ b/app/Controllers/Post/EditPostController.php
@@ -26,14 +26,13 @@ class EditPostController extends MainController
             redirect('/');
         }
 
-        Request::getHead()->addStyles('/assets/css/image-uploader.css');
+        Request::getResources()->addBottomScript('/assets/js/uploads.js');
         Request::getResources()->addBottomStyles('/assets/css/select2.css');
-        Request::getResources()->addBottomScript('/assets/js/image-uploader.js');
         Request::getResources()->addBottomScript('/assets/js/select2.min.js');
         Request::getResources()->addBottomStyles('/assets/js/editor/toastui-editor.min.css');
         Request::getResources()->addBottomStyles('/assets/js/editor/dark.css');
         Request::getResources()->addBottomScript('/assets/js/editor/toastui-editor-all.min.js');
-        
+
         return view(
             '/post/edit',
             [
@@ -65,7 +64,7 @@ class EditPostController extends MainController
         $post_user_new          = Request::getPost('user_select');
         $post_merged_id         = Request::getPostInt('post_merged_id');
         $post_tl                = Request::getPostInt('content_tl');
-        $blog_id               = Request::getPostInt('blog_id');
+        $blog_id                = Request::getPostInt('blog_id');
 
         // Связанные посты и темы
         $post_fields    = Request::getPost() ?? [];
@@ -100,6 +99,10 @@ class EditPostController extends MainController
         }
 
         Validation::Limits($post_title, Translate::get('title'), '6', '250', $redirect);
+        
+        if ($post_content == '') {
+            $post_content = $post['post_content'];
+        }
         Validation::Limits($post_content, Translate::get('the post'), '6', '25000', $redirect);
 
         // Проверим хакинг формы
@@ -114,12 +117,12 @@ class EditPostController extends MainController
 
         // Обложка поста
         $cover          = $_FILES['images'];
-        if ($_FILES['images']['name'][0]) {
+        if ($_FILES['images']['name']) {
             $post_img = UploadImage::cover_post($cover, $post, $redirect, $this->uid['user_id']);
         }
 
         $post_img = $post_img ?? $post['post_content_img'];
-
+        
         $data = [
             'post_id'               => $post_id,
             'post_title'            => $post_title,
diff --git a/app/Controllers/User/SettingController.php b/app/Controllers/User/SettingController.php
index 0dc6abfe..03c20138 100644
--- a/app/Controllers/User/SettingController.php
+++ b/app/Controllers/User/SettingController.php
@@ -106,8 +106,7 @@ class SettingController extends MainController
             redirect(getUrlByName('setting.avatar', ['login' => $this->uid['user_login']]));
         }
 
-        Request::getHead()->addStyles('/assets/css/image-uploader.css');
-        Request::getResources()->addBottomScript('/assets/js/image-uploader.js');
+        Request::getResources()->addBottomScript('/assets/js/uploads.js');
 
         return view(
             '/user/setting/avatar',
@@ -129,7 +128,7 @@ class SettingController extends MainController
 
         // Запишем img
         $img        = $_FILES['images'];
-        $check_img  = $_FILES['images']['name'][0];
+        $check_img  = $_FILES['images']['name'];
         if ($check_img) {
             $new_img = UploadImage::img($img, $this->uid['user_id'], 'user');
             $_SESSION['account']['user_avatar'] = $new_img;
@@ -137,7 +136,7 @@ class SettingController extends MainController
 
         // Баннер
         $cover          = $_FILES['cover'];
-        $check_cover    = $_FILES['cover']['name'][0];
+        $check_cover    = $_FILES['cover']['name'];
         if ($check_cover) {
             UploadImage::cover($cover, $this->uid['user_id'], 'user');
         }
diff --git a/app/Libraries/UploadImage.php b/app/Libraries/UploadImage.php
index 6805e18e..9a4a882a 100644
--- a/app/Libraries/UploadImage.php
+++ b/app/Libraries/UploadImage.php
@@ -22,11 +22,11 @@ class UploadImage
                 $default_img = 'noavatar.png';
         }
 
-        $name = $img['name'][0];
+        $name = $img['name'];
 
         if ($name) {
             $filename =  $pref . $content_id . '-' . time();
-            $file = $img['tmp_name'][0];
+            $file = $img['tmp_name'];
 
             $image = new  SimpleImage();
             $image
@@ -73,7 +73,8 @@ class UploadImage
         $month      = date('n') . '/';
         $file       = $img['tmp_name'];
         $filename   = 'post-' . time();
-
+        
+ 
         self::createDir($path_img . $year . $month);
 
         $image = new  SimpleImage();
@@ -119,7 +120,7 @@ class UploadImage
         if ($cover) {
 
             $filename =  $pref . $content_id . '-' . time();
-            $file_cover = $cover['tmp_name'][0];
+            $file_cover = $cover['tmp_name'];
 
             $image = new  SimpleImage();
             $image
@@ -155,8 +156,8 @@ class UploadImage
     public static function cover_post($cover, $post, $redirect, $user_id)
     {
         // Проверка ширину
-        $width_h  = getimagesize($cover['tmp_name'][0]);
-        if ($width_h['0'] < 500) {
+        $width_h  = getimagesize($cover['tmp_name']);
+        if ($width_h < 500) {
             $valid = false;
             addMsg('Ширина меньше 500 пикселей', 'error');
             redirect($redirect);
@@ -165,7 +166,7 @@ class UploadImage
         $image = new  SimpleImage();
         $path = HLEB_PUBLIC_DIR . AG_PATH_POSTS_COVER;
         $year = date('Y') . '/';
-        $file = $cover['tmp_name'][0];
+        $file = $cover['tmp_name'];
         $filename = 'c-' . time();
 
         self::createDir($path . $year);
diff --git a/public/assets/css/image-uploader.css b/public/assets/css/image-uploader.css
deleted file mode 100644
index 68197885..00000000
--- a/public/assets/css/image-uploader.css
+++ /dev/null
@@ -1,166 +0,0 @@
-/*! Image Uploader - v1.2.3 - 26/11/2019
- * Copyright (c) 2019 Christian Bayer; Licensed MIT
- * + modification (c) Evg 2021
- * Icons Font Face */
-
-.upload-text i.icon,
-.delete-image i.icon {
-  margin-right: 0;
-}
-
-.image-uploader {
-  border: 1px solid #d9d9d9;
-  position: relative;
-  width: 95%;
-  height: 225px;
-}
-
-.create .image-uploader,
-.edit-post .image-uploader {
-  height: 125px;
-  max-width: 450px;
-}
-
-.post .input-images img {
-  max-width: 400px;
-  padding: 20px;
-  max-height: 130px;
-}
-
-.create .post .input-images img {
-  max-height: 140px;
-}
-
-.square .image-uploader {
-  border: 1px solid #d9d9d9;
-  position: relative;
-  width: 145px;
-  height: 141px;
-  margin-left: 150px;
-}
-
-.square .image-uploader img {
-  width: 142px;
-  padding: 8px;
-  height: 140px;
-  margin-left: 0;
-}
-
-.img-post-edit img.img-post,
-.box.setting.avatar .input-images-cover .image-uploader {
-  width: 328px;
-}
-
-.img-post-edit {
-  width: 388px;
-}
-
-a.img-remove {
-  margin-bottom: 15px;
-  display: table;
-}
-
-.img-post-edit img.img-post {
-  border: 1px solid #eee;
-}
-
-.image-uploader.drag-over {
-  background-color: #f3f3f3;
-}
-
-.img-topic-edit,
-.edit-topic .uploaded-image img {
-  float: left;
-  border: 1px solid #d9d9d9;
-  padding: 7px;
-  width: 141px;
-}
-
-.image-uploader input[type="file"] {
-  width: 0;
-  height: 0;
-  position: absolute;
-  z-index: -1;
-  opacity: 0;
-}
-
-.image-uploader .upload-text {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.image-uploader .upload-text i {
-  display: block;
-  font-size: 3rem;
-}
-
-.image-uploader .upload-text span {
-  display: block;
-}
-
-/* Hide the text if there is at least one uploaded image */
-.image-uploader.has-files .upload-text {
-  display: none;
-}
-
-/* Delete image button */
-.image-uploader .uploaded .uploaded-image .delete-image {
-  display: none;
-  cursor: pointer;
-  position: absolute;
-  top: 0.2rem;
-  right: 0.2rem;
-  padding: 0.3rem;
-  line-height: 1;
-  border: none;
-}
-
-.box.setting.avatar img.ava,
-.box.setting.space img.ava {
-  float: left;
-  border: 1px solid #d9d9d9;
-  padding: 7px;
-  width: 140px;
-}
-
-.box.setting.avatar .input-images-cover .uploaded-image img {
-  width: 312px;
-}
-
-.box-form-img {
-  float: left;
-  margin-left: 30px;
-  width: 150px;
-}
-
-.image-uploader .uploaded .uploaded-image:hover .delete-image {
-  display: block;
-}
-
-.image-uploader .uploaded .uploaded-image .delete-image i {
-  display: block;
-  color: #333;
-  width: 1.4rem;
-  height: 1.4rem;
-  font-size: 1.4rem;
-  line-height: 1.4rem;
-}
-
-@media screen and (max-width: 786px) {
-  .image-uploader .uploaded {
-    padding: 0.3rem;
-  }
-
-  .image-uploader .uploaded .uploaded-image {
-    width: calc(33.3333333333% - 0.6rem);
-    padding-bottom: calc(33.3333333333% - 0.3rem);
-    margin: 0.3rem;
-  }
-}
diff --git a/public/assets/js/image-uploader.js b/public/assets/js/image-uploader.js
deleted file mode 100644
index 1720760f..00000000
--- a/public/assets/js/image-uploader.js
+++ /dev/null
@@ -1,379 +0,0 @@
-/*! Image Uploader - v1.2.3 - 26/11/2019
- * https://github.com/christianbayer/image-uploader
- * Copyright (c) 2019 Christian Bayer; Licensed MIT */
-
-(function ($) {
-
-  $.fn.imageUploader = function (options) {
-
-    // Default settings
-    let defaults = {
-      preloaded: [],
-      imagesInputName: 'images',
-      preloadedInputName: 'preloaded',
-      label: 'Фото',
-      extensions: ['.jpg', '.jpeg', '.png', '.gif'],
-      mimes: ['image/jpeg', 'image/png', 'image/gif'],
-      maxSize: 2100000, // 2мб
-      maxFiles: 1,
-    };
-
-    // Get instance
-    let plugin = this;
-
-    // Will keep the files
-    let dataTransfer = new DataTransfer();
-
-    // The file input
-    let $input;
-
-    // Set empty settings
-    plugin.settings = {};
-
-    // Plugin constructor
-    plugin.init = function () {
-
-      // Define settings
-      plugin.settings = $.extend(plugin.settings, defaults, options);
-
-      // Run through the elements
-      plugin.each(function (i, wrapper) {
-
-        // Create the container
-        let $container = createContainer();
-
-        // Append the container to the wrapper
-        $(wrapper).append($container);
-
-        // Set some bindings
-        $container.on("dragover", fileDragHover.bind($container));
-        $container.on("dragleave", fileDragHover.bind($container));
-        $container.on("drop", fileSelectHandler.bind($container));
-
-        // If there are preloaded images
-        if (plugin.settings.preloaded.length) {
-
-          // Change style
-          $container.addClass('has-files');
-
-          // Get the upload images container
-          let $uploadedContainer = $container.find('.uploaded');
-
-          // Set preloaded images preview
-          for (let i = 0; i < plugin.settings.preloaded.length; i++) {
-            $uploadedContainer.append(createImg(plugin.settings.preloaded[i].src, plugin.settings.preloaded[i].id, true));
-          }
-
-        }
-
-      });
-
-    };
-
-    let createContainer = function () {
-
-      // Create the image uploader container
-      let $container = $('<div>', { class: 'image-uploader' });
-
-      // Create the input type file and append it to the container
-      $input = $('<input>', {
-        type: 'file',
-        id: plugin.settings.imagesInputName + '-' + random(),
-        name: plugin.settings.imagesInputName + '[]',
-        accept: plugin.settings.extensions.join(','),
-        multiple: ''
-      }).appendTo($container);
-
-      // Create the uploaded images container and append it to the container
-      let $uploadedContainer = $('<div>', { class: 'uploaded' }).appendTo($container),
-
-        // Create the text container and append it to the container
-        $textContainer = $('<div>', {
-          class: 'upload-text'
-        }).appendTo($container),
-
-        // Create the icon and append it to the text container
-        $i = $('<i>', { class: 'bi bi-cloud-arrow-down gray-light' }).appendTo($textContainer),
-
-        // Create the text and append it to the text container
-        $span = $('<span>', { text: plugin.settings.label }).appendTo($textContainer);
-
-
-      // Listen to container click and trigger input file click
-      $container.on('click', function (e) {
-        // Prevent browser default event and stop propagation
-        prevent(e);
-
-        // Trigger input click
-        $input.trigger('click');
-      });
-
-      // Stop propagation on input click
-      $input.on("click", function (e) {
-        e.stopPropagation();
-      });
-
-      // Listen to input files changed
-      $input.on('change', fileSelectHandler.bind($container));
-
-      return $container;
-    };
-
-
-    let prevent = function (e) {
-      // Prevent browser default event and stop propagation
-      e.preventDefault();
-      e.stopPropagation();
-    };
-
-    let createImg = function (src, id, preloaded) {
-
-      // Create the upladed image container
-      let $container = $('<div>', { class: 'uploaded-image' }),
-
-        // Create the img tag
-        $img = $('<img>', { src: src }).appendTo($container),
-
-        // Create the delete button
-        $button = $('<button>', { class: 'delete-image' }).appendTo($container),
-
-        // Create the delete icon
-        $i = $('<i>', { class: 'bi bi-x' }).appendTo($button);
-
-      // If the image is preloaded
-      if (preloaded) {
-
-        // Set a identifier
-        $container.attr('data-preloaded', true);
-
-        // Create the preloaded input and append it to the container
-        let $preloaded = $('<input>', {
-          type: 'hidden',
-          name: plugin.settings.preloadedInputName + '[]',
-          value: id
-        }).appendTo($container)
-
-      } else {
-
-        // Set the index
-        $container.attr('data-index', id);
-
-      }
-
-      // Stop propagation on click
-      $container.on("click", function (e) {
-        // Prevent browser default event and stop propagation
-        prevent(e);
-      });
-
-      // Set delete action
-      $button.on("click", function (e) {
-
-        // Prevent browser default event and stop propagation
-        prevent(e);
-
-        // Get the parent element
-        let $parent = $container.parent();
-
-        // If is not a preloaded image
-        if ($container.data('preloaded') === true) {
-
-          // Remove from preloaded array
-          plugin.settings.preloaded = plugin.settings.preloaded.filter(function (p) {
-            return p.id !== id;
-          });
-
-        } else {
-
-          // Get the image index
-          let index = parseInt($container.data('index'));
-
-          // Update other indexes
-          $parent.find('.uploaded-image[data-index]').each(function (i, cont) {
-            if (i > index) {
-              $(cont).attr('data-index', i - 1);
-            }
-          });
-
-          // Remove the file from input
-          dataTransfer.items.remove(index);
-
-          // Update input files
-          $input.prop('files', dataTransfer.files);
-        }
-
-        // Remove this image from the container
-        $container.remove();
-
-        // If there is no more uploaded files
-        if (!$parent.children().length) {
-
-          // Remove the 'has-files' class
-          $parent.parent().removeClass('has-files');
-
-        }
-
-      });
-
-      return $container;
-    };
-
-    let fileDragHover = function (e) {
-
-      // Prevent browser default event and stop propagation
-      prevent(e);
-
-      // Change the container style
-      if (e.type === "dragover") {
-        $(this).addClass('drag-over');
-      } else {
-        $(this).removeClass('drag-over');
-      }
-    };
-
-    let fileSelectHandler = function (e) {
-
-      // Prevent browser default event and stop propagation
-      prevent(e);
-
-      // Get the jQuery element instance
-      let $container = $(this);
-
-      // Get the files as an array of files
-      let files = Array.from(e.target.files || e.originalEvent.dataTransfer.files);
-
-      // Will keep only the valid files
-      let validFiles = [];
-
-      // Run through the files
-      $(files).each(function (i, file) {
-        // Run the validations
-        if (plugin.settings.extensions && !validateExtension(file)) {
-          return;
-        }
-        if (plugin.settings.mimes && !validateMIME(file)) {
-          return;
-        }
-        if (plugin.settings.maxSize && !validateMaxSize(file)) {
-          return;
-        }
-        if (plugin.settings.maxFiles && !validateMaxFiles(validFiles.length, file)) {
-          return;
-        }
-        validFiles.push(file);
-      });
-
-      // If there is at least one valid file
-      if (validFiles.length) {
-        // Change the container style
-        $container.removeClass('drag-over');
-
-        // Makes the upload
-        setPreview($container, validFiles);
-      } else {
-
-        // Update input files (it is now empty due to a default browser action)
-        $input.prop('files', dataTransfer.files);
-
-      }
-    };
-
-    let validateExtension = function (file) {
-
-      if (plugin.settings.extensions.indexOf(file.name.replace(new RegExp('^.*\\.'), '.')) < 0) {
-        alert(`The file "${file.name}" does not match with the accepted file extensions: "${plugin.settings.extensions.join('", "')}"`);
-
-        return false;
-      }
-
-      return true;
-    };
-
-    let validateMIME = function (file) {
-
-      if (plugin.settings.mimes.indexOf(file.type) < 0) {
-        alert(`The file "${file.name}" does not match with the accepted mime types: "${plugin.settings.mimes.join('", "')}"`);
-
-        return false;
-      }
-
-      return true;
-    };
-
-    let validateMaxSize = function (file) {
-
-      if (file.size > plugin.settings.maxSize) {
-        alert(`Файл: "${file.name}" Больше ${plugin.settings.maxSize / 1024 / 1024}Mb`);
-
-        return false;
-      }
-
-      return true;
-
-    };
-
-    let validateMaxFiles = function (index, file) {
-
-      if ((index + dataTransfer.items.length + plugin.settings.preloaded.length) >= plugin.settings.maxFiles) {
-        alert(`The file "${file.name}" could not be added because the limit of ${plugin.settings.maxFiles} files was reached`);
-
-        return false;
-      }
-
-      return true;
-
-    };
-
-    let setPreview = function ($container, files) {
-
-      // Add the 'has-files' class
-      $container.addClass('has-files');
-
-      // Get the upload images container
-      let $uploadedContainer = $container.find('.uploaded'),
-
-        // Get the files input
-        $input = $container.find('input[type="file"]');
-
-      // Run through the files
-      $(files).each(function (i, file) {
-
-        // Add it to data transfer
-        dataTransfer.items.add(file);
-
-        // Set preview
-        $uploadedContainer.append(createImg(URL.createObjectURL(file), dataTransfer.items.length - 1), false);
-
-      });
-
-      // Update input files
-      $input.prop('files', dataTransfer.files);
-
-    };
-
-    // Generate a random id
-    let random = function () {
-      return Date.now() + Math.floor((Math.random() * 100) + 1);
-    };
-
-    this.init();
-
-    // Return the instance
-    return this;
-  };
-
-}(jQuery));
-
-$('.input-images').imageUploader();
-
-let cover = {
-  preloaded: [],
-  imagesInputName: 'cover',
-  preloadedInputName: 'preloaded',
-  label: 'Фото',
-  extensions: ['.jpg', '.jpeg', '.png', '.gif'],
-  mimes: ['image/jpeg', 'image/png', 'image/gif'],
-  maxSize: 3100000,
-  maxFiles: 1,
-};
-$('.input-images-cover').imageUploader(cover);
\ No newline at end of file
diff --git a/public/assets/js/uploads.js b/public/assets/js/uploads.js
new file mode 100644
index 00000000..9294b584
--- /dev/null
+++ b/public/assets/js/uploads.js
@@ -0,0 +1,120 @@
+// File Upload
+function ekUpload(){
+  function Init() {
+
+    let fileSelect    = document.getElementById('file-upload'),
+        fileDrag      = document.getElementById('file-drag'),
+        submitButton  = document.getElementById('submit-button');
+
+    fileSelect.addEventListener('change', fileSelectHandler, false);
+
+    // Is XHR2 available?
+    let xhr = new XMLHttpRequest();
+    if (xhr.upload) {
+      // File Drop
+      fileDrag.addEventListener('dragover', fileDragHover, false);
+      fileDrag.addEventListener('dragleave', fileDragHover, false);
+      fileDrag.addEventListener('drop', fileSelectHandler, false);
+    }
+  }
+
+  function fileDragHover(e) {
+    let fileDrag = document.getElementById('file-drag');
+
+    e.stopPropagation();
+    e.preventDefault();
+
+    fileDrag.className = (e.type === 'dragover' ? 'hover' : 'modal-body file-upload');
+  }
+
+  function fileSelectHandler(e) {
+    // Fetch FileList object
+    let files = e.target.files || e.dataTransfer.files;
+
+    // Cancel event and hover styling
+    fileDragHover(e);
+
+    // Process all File objects
+    for (let i = 0, f; f = files[i]; i++) {
+      parseFile(f);
+      uploadFile(f);
+    }
+  }
+
+  // Output
+  function output(msg) {
+    // Response
+    let m = document.getElementById('messages');
+    m.innerHTML = msg;
+  }
+
+  function parseFile(file) {
+
+    console.log(file.name);
+    output(
+      '<strong>' + encodeURI(file.name) + '</strong>'
+    );
+    
+    // var fileType = file.type;
+    // console.log(fileType);
+    let imageName = file.name;
+
+    let isGood = (/\.(?=gif|jpg|png|jpeg)/gi).test(imageName);
+    if (isGood) {
+      document.getElementById('start').classList.add("none");
+      document.getElementById('response').classList.remove("none");
+      document.getElementById('notimage').classList.add("none");
+      // Thumbnail Preview
+      document.getElementById('file-image').classList.remove("none");
+      document.getElementById('file-image').src = URL.createObjectURL(file);
+    }
+    else {
+      document.getElementById('file-image').classList.add("none");
+      document.getElementById('notimage').classList.remove("none");
+      document.getElementById('start').classList.remove("none");
+      document.getElementById('response').classList.add("none");
+      document.getElementById("file-upload-form").reset();
+    }
+  }
+
+
+  function uploadFile(file) {
+
+    let xhr = new XMLHttpRequest(),
+      fileInput = document.getElementById('class-roster-file'),
+      pBar = document.getElementById('file-progress'),
+      fileSizeLimit = 2024; // In MB
+    if (xhr.upload) {
+      // Check if file is less than x MB
+      if (file.size <= fileSizeLimit * 1024 * 1024) {
+
+        // File received / failed
+        xhr.onreadystatechange = function(e) {
+          if (xhr.readyState == 4) {
+            // Everything is good!
+
+            // progress.className = (xhr.status == 200 ? "success" : "failure");
+            // document.location.reload(true);
+          }
+        };
+
+        // Start upload
+        // xhr.open('POST', document.getElementById('file-upload').action, true);
+        // xhr.setRequestHeader('X-File-Name', file.name);
+        // xhr.setRequestHeader('X-File-Size', file.size);
+        // xhr.setRequestHeader('Content-Type', 'multipart/form-data');
+        //  xhr.send(file);
+      } else {
+        output('Please upload a smaller file (< ' + fileSizeLimit + ' MB).');
+      }
+    }
+  }
+
+  // Check for the various File API support.
+  if (window.File && window.FileList && window.FileReader) {
+    Init();
+  } else {
+    document.getElementById('file-drag').style.display = 'none';
+  }
+}
+ekUpload();
\ No newline at end of file
diff --git a/resources/views/default/content/facets/edit.php b/resources/views/default/content/facets/edit.php
index 51d41a10..5447e54c 100644
--- a/resources/views/default/content/facets/edit.php
+++ b/resources/views/default/content/facets/edit.php
@@ -9,12 +9,21 @@
   <?= $data['breadcrumb']; ?>
 
   <div class="br-box-gray bg-white p15">
-    <?= facet_logo_img($fs['facet_img'], 'max', $fs['facet_title'], 'img-topic-edit'); ?>
     <form action="<?= getUrlByName($fs['facet_type'] . '.edit.pr'); ?>" method="post" enctype="multipart/form-data">
       <?= csrf_field() ?>
 
-      <div class="mb20 square">
-        <div class="input-images"></div>
+      <div class="file-upload mb10" id="file-drag">
+        <div class="flex">
+          <?= facet_logo_img($fs['facet_img'], 'max', $fs['facet_title'], 'w94 h94 mr15'); ?>
+          <img id="file-image" src="/assets/images/1px.jpg" alt="" class="mr20 w94 h94 br-box-gray">
+            <div id="start" class="mt15">
+              <input id="file-upload" type="file" name="images" accept="image/*" />
+              <div id="notimage" class="none">Please select an image</div>
+            </div>
+        </div>
+        <div id="response" class="hidden">
+          <div id="messages"></div>
+        </div>
       </div>
 
       <div class="mb20">
diff --git a/resources/views/default/content/post/add.php b/resources/views/default/content/post/add.php
index 6af9c726..5d0c06c6 100644
--- a/resources/views/default/content/post/add.php
+++ b/resources/views/default/content/post/add.php
@@ -54,17 +54,30 @@
       ]); ?>
 
       <?php if ($uid['user_trust_level'] >= Config::get('trust-levels.tl_add_url')) { ?>
-        <div class="mb20 max-w640">
-          <label class="block" for="post_title">URL</label>
-          <input id="link" class="w-100 h30" type="text" name="post_url" />
-          <input id="graburl" readonly="readonly" class="right center mt15 mb15" type="submit_url" name="submit_url" value="<?= Translate::get('to extract'); ?>" />
+        <div class="flex flex-row items-center justify-between mb20 max-w640">
+          <div class="flex-auto mr15">
+            <input id="link" placeholder="URL" class="w-100 h30" type="text" name="post_url" />
+          </div>
+          <input id="graburl" readonly="readonly" class="blog center pt5 pr15 pb5 pl15 br-rd5" name="submit_url" value="<?= Translate::get('to extract'); ?>" />
         </div>
       <?php } ?>
 
-      <div class="mb20 post">
-        <div class="input-images"></div>
-        <div class="size-14 gray-light-2"><?= Translate::get('format-cover-post'); ?>.</div>
-      </div>
+      <div class="file-upload mb20" id="file-drag">
+        <div class="flex">
+          <img id="file-image" src="#" alt=" " class="mr20 w200 br-box-gray">
+            <div id="start">
+              <input id="file-upload" type="file" name="images" accept="image/*" />
+              <i class="fa fa-download" aria-hidden="true"></i>
+              <div id="notimage" class="none">Please select an image</div>
+            </div>
+        </div>
+        <div id="response" class="hidden">
+          <div id="messages"></div>
+        </div>
+        <div class="size-14 gray mt5">
+          <?= Translate::get('format-cover-post'); ?>.
+        </div>
+      </div> 
 
       <?= includeTemplate('/_block/editor/editor', [
         'type'      => 'post',
diff --git a/resources/views/default/content/post/edit.php b/resources/views/default/content/post/edit.php
index 8bb2927f..61cf0284 100644
--- a/resources/views/default/content/post/edit.php
+++ b/resources/views/default/content/post/edit.php
@@ -58,24 +58,35 @@
         </div>
       <?php } ?>
 
-      <?php if ($post['post_content_img']) { ?>
-        <div class="img-post-edit">
-          <?= post_img($post['post_content_img'], $post['post_title'], 'img-post', 'cover'); ?>
-          <input type="hidden" name="content_img" value="<?= $post['post_content_img']; ?>">
-          <a class="img-remove size-14" href="/post/img/<?= $post['post_id']; ?>/remove">
-            <?= Translate::get('remove'); ?>
-          </a>
+      <div class="file-upload mb20" id="file-drag">
+        <div class="flex">
+             <?php if ($post['post_content_img']) { ?>
+            <div class="img-post-edit">
+              <?= post_img($post['post_content_img'], $post['post_title'], 'img-post', 'cover'); ?>
+              <input type="hidden" name="images" value="<?= $post['post_content_img']; ?>">
+              <a class="img-remove size-14" href="/post/img/<?= $post['post_id']; ?>/remove">
+                <?= Translate::get('remove'); ?>
+              </a>
+            </div>
+          <?php } ?>
+       
+          <img id="file-image" src="#" alt=" " class="mr20 w200 br-box-gray">
+            <div id="start">
+              <input id="file-upload" type="file" name="images" accept="image/*" />
+              <i class="fa fa-download" aria-hidden="true"></i>
+              <div id="notimage" class="none">Please select an image</div>
+            </div>
         </div>
-      <?php } ?>
-
+        <div id="response" class="hidden">
+          <div id="messages"></div>
+        </div>
+      </div>
+      
+      
       <?php if ($post['post_thumb_img']) { ?>
         <?= post_img($post['post_thumb_img'], $post['post_title'], 'thumb right', 'thumbnails'); ?>
       <?php } ?>
 
-      <div class="mb20 post">
-        <div class="input-images"></div>
-      </div>
-
       <?= includeTemplate('/_block/editor/editor', [
         'type'      => 'post',
         'height'    => '300px',
@@ -164,6 +175,7 @@
         'help'          => Translate::get('necessarily'),
       ]); ?>
 
+
       <div class="mb20">
         <?php if ($post['post_draft'] == 1) { ?>
           <input type="hidden" name="draft" id="draft" value="1">
diff --git a/resources/views/default/content/post/view.php b/resources/views/default/content/post/view.php
index a2dd4f8e..883bf28a 100644
--- a/resources/views/default/content/post/view.php
+++ b/resources/views/default/content/post/view.php
@@ -341,10 +341,13 @@
               body: "type=" + type + "&post_id=" + post_id + "&content_id=" + content_id,
               headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
             })
-            .then((response) => {
+            .then(
+                response => {
                   return;
-                }).then((text) => {
-               });  
+                }
+              ).then(
+                text => {  }
+              );  
         }
       })
      }));
diff --git a/resources/views/default/content/user/setting/avatar.php b/resources/views/default/content/user/setting/avatar.php
index 8ccbd5cf..c8fcf5a9 100644
--- a/resources/views/default/content/user/setting/avatar.php
+++ b/resources/views/default/content/user/setting/avatar.php
@@ -11,35 +11,54 @@
   <div class="bg-white br-box-gray pt15 pr15 pb5 pl15 box setting avatar">
     <form method="POST" action="<?= getUrlByName('setting.avatar.edit'); ?>" enctype="multipart/form-data">
       <?= csrf_field() ?>
-
-      <?= user_avatar_img($data['user']['user_avatar'], 'max', $data['user']['user_login'], 'ava'); ?>
-
-      <div class="mb10 square">
-        <div class="input-images"></div>
+   
+      <div class="file-upload mb10" id="file-drag">
+        <div class="flex">
+          <?= user_avatar_img($data['user']['user_avatar'], 'max', $data['user']['user_login'], 'w94 mr20 br-box-gray'); ?> 
+          <img id="file-image" src="/assets/images/1px.jpg" alt="" class="mr20 w94 h94 br-box-gray">
+            <div id="start" class="mt15">
+              <input id="file-upload" type="file" name="images" accept="image/*" />
+              <div id="notimage" class="none">Please select an image</div>
+            </div>
+        </div>
+        <div id="response" class="hidden">
+          <div id="messages"></div>
+        </div>
       </div>
 
       <div class="clear gray mb10 size-15">
-        <div class="mb5"><?= Translate::get('recommended size'); ?>: 240x240px (jpg, jpeg, png)</div>
+        <div class="mb5 size-14"><?= Translate::get('recommended size'); ?>: 240x240px (jpg, jpeg, png)</div>
         <?= sumbit(Translate::get('download')); ?>
       </div>
 
-      <?php if ($data['user']['user_cover_art'] != 'cover_art.jpeg') { ?>
-        <div class="relative size-15">
-          <img class="block max-w-100" src="<?= user_cover_url($data['user']['user_cover_art']); ?>">
-          <a class="right size-14" href="<?= getUrlByName('user', ['login' => $uid['user_login']]); ?>/delete/cover">
-            <?= Translate::get('remove'); ?>
-          </a>
+      <div class="file-upload mt20 mb10" id="file-drag">
+        <div class="flex">
+           <?php if ($data['user']['user_cover_art'] != 'cover_art.jpeg') { ?>
+            <div class="relative size-15 mr15">
+              <img class="block br-box-gray max-w-100" src="<?= user_cover_url($data['user']['user_cover_art']); ?>">
+              <a class="right size-14" href="<?= getUrlByName('user', ['login' => $uid['user_login']]); ?>/delete/cover">
+                <?= Translate::get('remove'); ?>
+              </a>
+            </div>
+          <?php } else { ?>
+            <div class="block br-box-gray max-w-100 size-14 gray p20 mr15">
+              <?= Translate::get('no-cover'); ?>...
+            </div>
+          <?php } ?>
+            <div id="start">
+              <img id="file-image bi bi-cloud-download" src="/assets/images/1px.jpg" alt="" class="h94">
+             
+              <input id="file-upload" type="file" name="cover" accept="image/*" />
+              <div id="notimage" class="none">Please select an image</div>
+            </div>
+        </div>
+        <div id="response" class="hidden">
+          <div id="messages"></div>
         </div>
-      <?php } else { ?>
-        <?= Translate::get('no-cover'); ?>...
-      <?php } ?>
-
-      <div class="box-form-img-cover mb10">
-        <div class="input-images-cover mt10"></div>
       </div>
 
       <div class="clear gray mb10 size-15">
-        <div class="mb5"><?= Translate::get('recommended size'); ?>: 1920x240px (jpg, jpeg, png)</div>
+        <div class="mb5 size-14"><?= Translate::get('recommended size'); ?>: 1920x240px (jpg, jpeg, png)</div>
         <?= sumbit(Translate::get('download')); ?>
       </div>
     </form>