Removing jQuery from uploading photos
This commit is contained in:
Evg
parent
4564d2545f
commit
c9a2fbbbb3
14 changed files with 246 additions and 615 deletions
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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']);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
120
public/assets/js/uploads.js
Normal file
120
public/assets/js/uploads.js
Normal file
|
|
@ -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();
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 => { }
|
||||
);
|
||||
}
|
||||
})
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue