Перетаскивание файлов в поле HTML (JavaScript)

11.11.21

Разработка - Работа с интерфейсом

Может возникнуть необходимость добавлять файлы в систему под управлением 1С:Предприятие через достаточно распространенный и удобный механизм - перетаскивание (Drag & Drop). В данной публикации этот механизм реализован через поле HTML, с небольшим усовершенствованием на Java Script.

Скачать файлы

Наименование Файл Версия Размер
Перетаскивание файлов в поле HTML (JavaScript):
.epf 7,67Kb
11
.epf 7,67Kb 11 Скачать

При разработке проекта Тикеты - система учета задач/Service Desk в 1С (интеграция с Trello, Мобильное приложение) необходимо было реализовать загрузку файлов через перетаскивание (Drag & Drop).

Java Script раньше видел только  в кино, потому получилось так как получилось.

Что умеет обработка:

  • Перетаскивание файла или группы файлов с получением имени файла, размера, двоичных данных.
  • Фильтр по максимальному размеру файла (переменная var maxSizeFile = 5242880) в 5Мб.

Что не умеет обработка:

  • Индикацию. Т.е. если файлов много и они качаются, пользователь не в курсе на каком этапе процесс. Окно не блокируется.

Тестировалось на платформе 8.3.16, как на управляемых, так и на обычных формах, в вэб-клиенте.

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
	
	Комментарий = ПолеВводаКомметария();
	
КонецПроцедуры

&НаСервере
Функция ПолеВводаКомметария() Экспорт
	
	ВводКомментария = "<html>
						|<head></head>
						|<body>
						|<meta http-equiv='X-UA-Compatible' content='IE=edge'>
						|<script>
						|var arrayFiles = []
						|var maxSizeFile = 5242880
						|function drop(ev) {
						|  ev.preventDefault();
						|  if (ev.dataTransfer.files.length > 0)
						|     {var numFiles = ev.dataTransfer.files.length - 1
						|	   var files = ev.dataTransfer.files;
						|	   
						|	   for(var i = 0; i < files.length; i++){
						|	   var file = files[i];
						|	   if (file.size > maxSizeFile)
						|	      {elem = {
						|            'name'       : file.name,
						|            'data'       : ""#0"",
						|            'size'       : file.size,
						|            'type'       : file.type}
						|		  arrayFiles.push(elem);
						|		  if (i == numFiles)
						|	         {document.getElementById(""DropData"").innerHTML = JSON.stringify(arrayFiles);
						|			 arrayFiles = [];
						|	         document.getElementById(""DropData"").click();}}
						|	   else
						|	   filesData(file, i == numFiles)}}
						|}
						|function filesData(file, endFile) {
						|	var reader = new FileReader();
						|	reader.onload = function(f, endFile) {
						|	return function(e) {
						|      		elem = {
						|          'name'       : f.name,
						|          'data'       : e.target.result,
						|          'size'       : f.size,
						|          'type'       : f.type}
						|		arrayFiles.push(elem);
						|	if (endFile == true)
    					|	{document.getElementById(""DropData"").innerHTML = JSON.stringify(arrayFiles);
						|   arrayFiles = [];
						|	document.getElementById(""DropData"").click();}
						|};
  						|}(file, endFile);
						|	reader.readAsDataURL(file);
						|}												
						|</script>
						|</head>
						|<div id=""comment"" class=""stylecomment"" contenteditable=""true"" display: inline-block></div>
						|<div id=""DropData"" style=""display:none""></div>
						|</body>
						|</html>";
	
	Возврат(ВводКомментария);
	
КонецФункции

&НаКлиенте
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
	
	ТаблицаФайлов.Очистить();
	
	ЭлементДанных = ДанныеСобытия.Document.getElementById("DropData");
	Данные = ЭлементДанных.innerHTML;
	Если НЕ ПустаяСтрока(Данные) Тогда
		ЧтениеJSON = Новый ЧтениеJSON;
		ЧтениеJSON.УстановитьСтроку(Данные);
		
		МассивФайлов = ПрочитатьJSON(ЧтениеJSON);
		
		ЭлементДанных.innerHTML = "";
		
		Для Каждого СтруктураФайла Из МассивФайлов Цикл
			Если СтруктураФайла.data = "#0" Тогда
				Сообщение = Новый СообщениеПользователю;
				Сообщение.Текст = "Размер файла """ + СтруктураФайла.name + "(" + Строка(Окр(СтруктураФайла.size / 1024 / 1024)) + " Мб)"", что более допустимого (5 Мб)";
				Сообщение.Сообщить();
			Иначе
				Поз = Найти(СтруктураФайла.data, "base64");
				Если Поз > 0 Тогда
					ДанныеBase64 = Прав(СтруктураФайла.data, СтрДлина(СтруктураФайла.data) - Поз - 6);
				
					СтрокаТаблицы = ТаблицаФайлов.Добавить();
					СтрокаТаблицы.ИмяФайла = СтруктураФайла.name;
					СтрокаТаблицы.ДвоичныеДанныеФайла = Base64Значение(ДанныеBase64);
				КонецЕсли;
			КонецЕсли;
		КонецЦикла;
		
		Если ТаблицаФайлов.Количество() > 0 Тогда
			Для Каждого СтрокаТаблицы Из ТаблицаФайлов Цикл
				Сообщение = Новый СообщениеПользователю;
				Сообщение.Текст = "Успешно загружен файл """ + СтрокаТаблицы.ИмяФайла + """";
				Сообщение.Сообщить();
			КонецЦикла;
		КонецЕсли;
	КонецЕсли;
	
КонецПроцедуры

 

См. также

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    61797    43    59    

80

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016    54403    16    21    

42

Управление дашбордами

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    16698    21    4    

35

Новогоднее оформление для 1С

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    10738    750    elcoan    45    

106

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

Подходит для создания web-страниц для замены управляемых форм 1С, красивых отчетов, интерфейса мобильного приложения на платформе 1С и для простых страниц веб-сайтов.

2 стартмани

10.04.2023    9615    151    acces969    31    

118

Модель состояния для MVC

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    3666    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12082    1    5    

10
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. andryandry 94 04.03.21 17:44 Сейчас в теме
Отличный подход! Обожаю драгэндропы в 1с!

А стандартными средствами не решилось? Без HTML
2. Andreyyy 74 04.03.21 18:20 Сейчас в теме
(1) А у меня поле для комментария на HTML, другие варианты не рассматривал.
3. Steelvan 302 04.03.21 23:32 Сейчас в теме
Зачетный вариант тяни-бросая в ПолеHTMLДокумента.
4. retr0 17.05.21 15:43 Сейчас в теме
Не работает твоя обработка, любой файл пытался скинуть. А условие
Если НЕ ПустаяСтрока(Данные)
здесь вообще всегда пусто.
5. Andreyyy 74 17.05.21 16:07 Сейчас в теме
(4) Версию платформы озвучьте. На 8.3.15,16,17 100% работает.
6. retr0 17.05.21 16:23 Сейчас в теме
7. Andreyyy 74 17.05.21 16:36 Сейчас в теме
(6) 17 платформа, тот же код, смотреть с 1:40 https://youtu.be/QYRkiQEhoXc
По какой причине не работает у Вас, предположить не могу.
8. Andreyyy 74 17.05.21 17:17 Сейчас в теме
(6) Еще видео на примере публикации https://yadi.sk/i/wMFQXIEaDTwVtQ версия платформы 8.3.17.2127
9. retr0 18.05.21 08:05 Сейчас в теме
Ну я что, по твоему здесь грязь на пустом месте развожу? НЕ РАБОТАЕТ. Я уже не знаю как нужно скинуть файл, в какой угол чтобы она поняла че я от нее хочу. Попробуй сам именно этот код, что лежит здесь и проверь, прежде чем эти видео присылать.
10. Andreyyy 74 18.05.21 08:14 Сейчас в теме
(9) Не хамите. В видео выложен именно этот код. Перетаскивать нужно в место, где находится курсор или уже набитый текст.
Более не смогу Вам ничем помочь.
11. retr0 18.05.21 08:15 Сейчас в теме
(10) Не знаю в чем ты увидел здесь "хамство".
12. Teplotrassamen 08.08.21 18:09 Сейчас в теме
Ну справедливости ради в шапке код и в правду не рабочий.
Курсор не активируется и нельзя ввести текст.
Не хватает куска:
<div id="drag_comment" contenteditable="true" class="dragndrop" on drop="dr op ( event)"></div>

Взял из демоверсии, автору спасибо! Теперь при перетаскивании можно отследить что было именно оно.
13. Andreyyy 74 08.08.21 18:26 Сейчас в теме
(12) Код скопипастен из файла приложенного к публикации. В (8) видео именно на примере файла публикации, что работает.
14. Teplotrassamen 08.08.21 18:51 Сейчас в теме
(13) ну у меня также как и у retr0 в (4) не работал код, который приведен в статье. При переносе файла в поле html ничего не происходило. Поэтому стал искать где может быть рабочий вариант и нашел его в вашей разработке. Если интересно могу даже видео снять, что не работает ваш код если его просто скопировать и вставить, но думаю это излишне ¯\_(ツ)_/¯
15. Andreyyy 74 08.08.21 19:22 Сейчас в теме
(14) в (4) похоже были претензии на файл обработки, т.к. был скачан.
Текст в публикации взят из файла. Может какие-то символы не так скопировались - не проверял его куда-то вставлять, можно считать что размещен скорее как концепт.
16. retr0 09.08.21 06:44 Сейчас в теме
(15) Я проблему решил, у меня заработало, но там способ максимально костыльный был. Но и иных вариантов тоже не было как это решить, поскольку все варианты предполагали в себе возможность редактирования поля сброса чего нельзя было делать в моем случае. То, что работало в браузере, то отказывалось работать в 1С.
17. Andreyyy 74 09.08.21 10:02 Сейчас в теме
(16) Без редактирования поля сброса у меня не получилось реализовать - не срабатывало событие.
Так же не получилось реализовать подсветку поля при наведении на него переносимого файла - в этом случае 1С просто открывало файл как текст вместо срабатывания события перетаскивания. Пробовал на 8.3.17. В браузере работает https://jsfiddle.net/p8f04e5x/
Видимо с WebKit у 1С что-то не так.
18. retr0 09.08.21 10:08 Сейчас в теме
(17) Да да у меня также, но я скриптами запретил редактировать, скрыл курсор, с виду выглядело все так будто поле статичное, в свойствах у полей редактирование разрешено, обычный пользователь даже не заметит. А любая попытка ввода вызывала обработку события которая делала тоже что и в 1с делает Возврат. Но и сброс при этом работал. Примерно недели полторы ушло но то чтобы таким способом решить задачу, хотя решение проще некуда.
19. dimasts 22 26.10.22 21:13 Сейчас в теме
ПрочитатьJSON, вроде не доступно на Веб-клиенте, а на тонком не заводится. Событие ПолеHTMLПриНажатии() не запускается
20. Andreyyy 74 26.11.22 22:21 Сейчас в теме
(19) Обработка работает на всех клиентах.
21. d.zhukov 1392 02.02.23 13:52 Сейчас в теме
Перетаскиваю файл, ничего не происходит. 1С:Предприятие 8.3 (8.3.22.1709) толстый клиент БП 3.0.109
22. Andreyyy 74 03.02.23 02:44 Сейчас в теме
(21) Перетаскивать в место ввода текста.
Для надёжности вбейте текст и на него тащите.
Или можно посмотреть как сделано в публикации "Тикеты - система учёта задач".
Там отдельное место для перетаскивания выведено.
Дополню: тестировалось на максимально 8.3.17 платформе.
Оставьте свое сообщение