Drupal → Модуль One Click Upload — простая заливка файлов в текст

02.04.2011

One Click Upload — это модуль быстрой загрузки файлов в BUEditor, CKEditor и обычные textarea.

Модуль представляет из себя кнопку на панели редактора, клик на которой вызывает диалог выбора файлов. После выбора файлов и загрузки их на сервер, в редактор вставляется шаблон, соответствующий расширению файла. Например если была загружена картинка, то в редактор вставится код:

<img src="/sites/default/files/public/usergen/old/images/image.jpg" alt="" />

Если был загружен текстовый файл, то вставленный код будет:

<a href="/sites/default/files/public/usergen/old/file.txt">file.txt</a>

Возможности

  • Загрузка картинок и вставка html кода прямо в редактор.
  • Поддержка стилей изображения (Image Style) (скриншот).
  • Загрузка файлов и вставка в редактор ссылки на файл.
  • Мультизагрузка файлов и картинок.
  • Drag&drop файлов на кнопку редактора и на сам textarea (версия 2.x).
  • Редактируемые html шаблоны, которые вставляются в редактор после загрузки файла (скриншот).
  • Настройка разрешений для каждого шаблона (скриншот).

Видео демонстрация

Живое демо с версией 1.x.

Скриншоты

Установка

Установка модуля

  1. Распаковать архив с модулем в sites/all/modules
  2. Включить модуль One Click Upload
  3. (только для версии 1.x) Скачать SWFUpload v2.2.0.1 Core, распаковать архив в sites/all/libraries и переименовать папку SWFUpload v2.2.0.1 Core в swfupload. После этого, основной файл swfupload.js должен быть доступен по адресу sites/all/libraries/swfupload/swfupload.js (проверьте в браузере).

    Drush пользователи могут воспользоваться командой drush ocupload-dl-library

Интеграция с модулем BUEditor

  1. Открыть страницу настроек BUEditor — admin/config/content/bueditor
  2. Кликнуть по ссылке Edit напротив используемого редактора.
  3. Добавить новую кнопку с кодом js: E.showFileSelectionDialog(); (не изменяйте этот код!) (скриншот).
  4. Сохранить изменения.

Интеграция с модулем CKEditor (не с модулем Wysiwyg)

  1. Открыть страницу настроек CKEditor — admin/config/content/ckeditor
  2. Кликнуть по ссылке edit напротив используемого редактора.
  3. В секции Editor appearance, в поле Toolbar, переместить иконку One Click Upload из All buttons в Used buttons (скриншот до, скриншот после).
  4. В этой же секции, ниже, в поле Plugins, отметить плагин One Click Upload (скриншот).
  5. Сохранить изменения.
  6. Очистить кэш браузера.

Интеграция с модулем Wysiwyg + CKEditor 4

  1. Открыть страницу настроек модуля Wysiwyg — admin/config/content/wysiwyg
  2. Кликнуть по ссылке Edit напротив используемого редактора.
  3. Раскрыть группу Buttons and plugins и отметить кнопку One Click Upload.
  4. Сохранить изменения.

Важно: версия 1.x не работает в режиме техобслуживания (Maintenance mode).

Если модуль не работает

В комментариях или через обратную связь, оставляем:

— подробное описание ошибки
— ссылку на скриншот
— при каких обстоятельствах появляется ошибка
— содержание консоли ошибок javascript
— содержание системного журнала Drupal (watchdog)
— содержание error.log вашего сервера
— версию Drupal
— версию модуля BUEditor (если установлен)
— версию модуля CKEditor и версию самого редактора (если установлен)
— версию модуля Wysiwyg (если установлен)
— дату сборки модуля One Click Upload
— название и версию браузера
— название и версию ОС

Все просьбы о помощи без этих данных будут игнорироваться.

Написанное актуально для
Drupal 7
Похожие записи

Комментарии

Спасибочки. Класный модуль, удобно работать стало. А то после шестой версии никак не мог понять как файлы подгружать. Ну может это и к лучшему - нашел ваш замечательный модуль.

ckeditor_3.5.3 + wysiwyg-7.x-2.0 + ocupload-7.x-1.x-dev
Выдаёт ошибку : Module initialization error.
Вот что показал жучок:
SWFUpload is not defined
var swfu = new SWFUpload({

пропустили третий пункт в установке модуля

В смысле: "Раскрыть группу Buttons and plugins и отметить кнопку One Click Upload."...?
Галочку ествственно поставил.
В общем пока бился, решил ставить FCK. Немного плясок с бубном и сейчас заработало. Однако убогий он внешне...Жаль что ваш модуль не пашет. Буду ждать с нетерпением.
Удачи)

в смысле скачать и установить SWFUpload v2.2.0.1 Core

Всё работает. Спасибо вам)
В избранное, однозначно!

Гость
15.05.2011, 20:49

Все сделала как сказали. Только все равно появляется ошибка Module initialization error. Вроде ничего не упустила... и третий пункт сделала... Не пойму почему ошибка

Гость
16.05.2011, 00:31

Извините за панику. Проблема решилась! Дело было в правах данных на папку libraries. Для корректной работы скрипта права выставила 777. Спасибо за модуль

Гость
20.05.2011, 22:29

Добрый день, скажите пожалуйста, а есть такой модуль для 6 Drupal? Если нет, то планируется вообще его разработка?

Спасибо, статья помогла быстро прикрутить загрузку фоток. Именно то, что нужно клиенту, который очевидно не будет (и не должен) сам заливать каждую фотку на сервер.

Не очень хорошо, imho, что в Drupal'е 7 нет визуального редактора по умолчанию, как в WordPress'е. Преимущество такого редактора по умолчанию в том, что он качественно настроен под конкретную CMS и с ним не надо возиться.

Гость
17.07.2011, 19:57

Всё работает , отличный модуль в избранное.
Спасибо автору статьи.

Гость
20.07.2011, 08:22

1. Каков алгоритм удаления картинок? На диске они остаются, если из текста удалить?

2. Как управлять размером картинок? У меня несколько Image Style, которые я хотел бы выбирать по мере необходимости (...в этом тексте мне нужна большая картинка, там маленькая..).

1. файлы загружаются с флагом temporary, если встречаются в тексте - ставиться флаг permanent. в последующем с файлом никаких манипуляций не производится

2. никак. пользуйтесь image resize filter

Установил - все работает. Но хотел бы узнать возможно ли предварительно сортировать загруженные файлы - тоесть разложить по папкам на сервере для быстрого поиска и редактирования. Заранее благодарен

Гость
11.10.2011, 19:57

отлично, вначале поставил модуль кнопки, включил...потом дочитал пост и поставил флэш, вначале не заработало. Изменил права на всякий случай на флэш и на папку с файлами и плюс создал папку для картинок. Включил/выключил модуль заново - все заработало. Загрузка удобна, но в СК эдиторе есть функция загрузки файлов в принципе, странно, что такая мощная система как дрюпал не поддерживает эту функцию - необходимо делать лишние ненужные шаги для простой загрузки картинок.

дрюпал не поддерживает эту функцию

модуль upload в ядре с бородатых времён

модуль отличный, но замечен один нюанс: при выборе файлов через Ctrl+click файлы загружаются и вставляются в редактор в обратной последовательности от процесса выбора.
можете подсказать где можно исправить этот порядок?

Вы хотите сказать что этот порядок обрабатывается на другом уровне не зависящем от Вашего модуля? если да то не подскажите где копать?

Гость
14.01.2012, 18:47

1. Картинки к ревизиям ноды не привязываются, как я вижу.
2. При удалении ноды/ревизии файл на сервере останется.
Планируется это исправить?

модуль не имеет отношения к нодам, поэтому нет, не планируется

Гость
14.01.2012, 21:23

Я не заметил, что оно и в комментариях работает. Потрясающе!
А как насчёт того, чтобы связать файл с текстовым полем через field API?

Почему-то не срабатывает вставка в форму, если шаблон для вставки [video]!filepath[/video] или подобный...

если речь про ckeditor, то шаблон должен содержать html-теги, можно так: <p>[video]!filepath[/video]</p>

Почему может не работать загрузка на сайте, закрытом базовой http авторизацией?

Т.е. если у меня в .htaccess прописано:

AuthUserFile /ПУТЬ/К/ПАРОЛЯМ/.htpasswd
AuthName "Secret Stuff" 
AuthType Basic
require valid-user 

Загрузчик просто висит. В некоторых браузерах повторно выскакивает окно авторизации.

Вопрос: а в filepath подстановки вроде [user_id] работают? Например, чтобы закачиваемые файлы летели не в общую папку, а в папку юзера.

Никита
03.04.2012, 23:39

Здравствуйте! Модуль и вправду отличный, но хотелось бы задать несколько вопросов - заливаю на страницу файл "структура.doc" - на сервере сохраняется как "PPOPOвсякая билеберда.doc" - следствие,скачать с сайта нельзя. Имена файлов на латинице или числовые имена заливаются отлично и так же скачиваются.

И еще не воспринимает формат docx, в маске форматов прописал их, все равно не пашет, даже с англ именем.

P.S. я новичок, может туплю где-нибудь)

Никита
04.04.2012, 13:49

Поставил, но теперь при закачке файла его имя преобразуется в число, с сегодняшней датой и вроде порядковым номером. Для любых языков так. И как-то даже настроек этого модуля найти не могу в друпале

Настройки закачиваемых файлов тут: /admin/config/media/file-system

Никита
04.04.2012, 14:01

с превращениями в числовые имена разобрался - это я галочку поставил на rename,ночью уже голова видимо не соображала :\

Никита
04.04.2012, 14:12

все получилось! русский превращается в транслит.

тока подскажите как заливать docx и xlsx - они не скачиваются, а открывается новая страница с полной ерундойи кучей символов на экране.(

Андрей
24.04.2012, 17:31

Здравствуйте. Такая проблема. После переноса с одного хостинга на другой, модуль перестал загружать изображения. То есть можно выбрать файл, отображается прелоадер, но фотки не грузятся. На сервере они не появляются, в редакторе тоже. Права на папки смотрел, там все нормально. Права на swfupload тоже проверял.

Андрей
24.04.2012, 17:34

Консоль браузера пуста. Ватчдог тоже пустой.
До переноса сайт был на патруле, после переноса там же, только на другом аккаунте.

Настенька
03.07.2012, 14:52

Здравствуйте, спасибо за отличный модуль, это именно то что нужно.
Но у меня небольшой баг. Drupal 7.14. Мои действия:
1. Добавляю файл (ckeditor), затем просто удаляю его в редакторе и удаляю вручную на сервере (!)
2. Добавляю ещё раз этот файл (или другой с тем же именем), получаю ошибку:
Error -200: 500
сам файл при этом прекрасно загружается на сервер, но пресет не создаётся и в редактор соответственно ничего не вставляется.
3. Добавляю ещё раз - к файлу прибавляется суффикс _0 и всё ок.

Лог друпала:
PDOException: SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry 'public://images/002.jpg' for key 'uri': INSERT INTO {file_managed} (uid, filename, uri, filemime, filesize, status, timestamp) VALUES (:db_insert_placeholder_0, :db_insert_placeholder_1, :db_insert_placeholder_2, :db_insert_placeholder_3, :db_insert_placeholder_4, :db_insert_placeholder_5, :db_insert_placeholder_6); Array ( [:db_insert_placeholder_0] => 1 [:db_insert_placeholder_1] => 002.jpg [:db_insert_placeholder_2] => public://images/002.jpg [:db_insert_placeholder_3] => image/jpeg [:db_insert_placeholder_4] => 219521 [:db_insert_placeholder_5] => 0 [:db_insert_placeholder_6] => 1341312214 ) в функции drupal_write_record() (строка 7013 в файле Z:\home\demo\www\includes\common.inc).

Не критично, но всё же )

вручную ничего удалять не надо

ckeditor_3.5.3 + wysiwyg-7.x-2.0 + ocupload-7.x-1.x-dev
Drupal 7
Google chrome v.19.0.1084.52
Demo Flash upload works on site

Nazhimaju na upload ikonku, vybiraju foto i vydajot oshibku v popape: Error -200: 500

Привет.
У меня ошибка при загрузке файла =(
В ответ на закачку файла вылазиет алерт с текстом "Error -200: 503".
Js консоль пуста.
Watchdog пуст.
Drupal 7.13-dev.
CKeditor 3.6.2 (7.x-1.x-dev).
Модуль One Click Upload скачал сегодня.
SWFUpload - тоже.
Браузер FireFox 14.0.1
Flash плеер обновляю (последний).
ОС Windows 7.

Названия файлов прописаны латиницей, файлы и большие и срелние пытался грузить.

"сервер временно не имеет возможности обрабатывать запросы по техническим причинам (обслуживание, перегрузка и прочее)."

Правильно ли я понимаю, что через некоторое время должно заработать?
Или проблема в другом?

Я извиняюсь за настойчивость.
Я не понимаю, это же обычная загрузка файлов, через флеш кнопку.
Что такого может использовать эта библиотека, что бы это вызывало проблемы на сервере?

всё написано в логах. я увы не телепат

Но в логах сервера ничего нет =(
Единственная ошибка:
[Wed Aug 08 11:55:11 2012] [error] [client 2.95.103.229] File does not exist: /home/***/favicon.ico

К сожалению единственные логи, которые мне предоставляет хостинг - это *.error.log и *.access.log.
Кстати, интересный факт (!) В IE всё работает.

Гость
29.08.2012, 13:06

Отличный модуль. Давно искал подобное. А сложно сделать чтобы загруженные в редактор картинки паралельно сохранялись в какое-то поле типа field_image ноды?

Гость
11.10.2012, 17:26

Вам огромное пречеловеческое спасибо! Я два часа билась, пока сайт Ваш не нашла. Все заработало. Папку libraries я создала сама и выставила права доступа 777.

Дмитрий
17.10.2012, 21:22

Здравствуйте, xandeadx
При загрузке фотографии в браузере IE9 в CKEditor через "One Click Upload" вместо фото отображается значек "битой" фотографии(ссылка на скриншот).
Если в CKEditor нажать дважды кнопку "Источник", фотография отображается нормально(ссылка на скриншот).

- ошибок в журналах нет
- Drupal 7.9
- модуль CKEditor 7.x-1.6, редактор 3.6.2
- библиотеки SWFUpload 2.2.0.1
- Flash player 11.4.402.287
- браузер IE 9.0.8112.16421
- ОС Windows 7 32х разрядная

Дмитрий
17.10.2012, 21:25

К предыдущему комментарию.
Ошибка возникает, если к изображению применяется стиль, использующий ImageCache Action(overlay) + масштабирование.

обновите друпал, модуль CKEditor, редактор CKEditor.
у меня ошибок нет.

Дмитрий
23.10.2012, 10:40

Спасибо за ответ и отличный модуль.

Николай
12.11.2012, 15:04

Отличный модуль! Скажите, есть ли возможность вставки многострочных шаблонов для замены. Хочу добавить заливку аудио и видео.

Антон
14.11.2012, 04:23

Супер, супер, супер! Спасибо, спасибо, спасибо!

@Николай шаблоны для видео и аудио доступны из коробки

Николай
14.11.2012, 09:32

HTML5 это хорошо. Но у меня есть тип материала с полями - видео и аудио, для них я использую Jw_player. Хотелось бы и тут свести к нему для стандартного вида.

Валерка
11.12.2012, 01:42

xandeadx, помоги, пжл

Всю установку перепроверил 3 раза, все равно не пашет, при загрузке файла выдает ошибку:

"ответ с сервера пришел не в формате JSON: "{"status":true, "data":"\u003Cimg
src=\u0022\u002files\u002Fimages\u002F20121112013759.jpg\u0022
alt=\u0022\u0022 \u002F\u003E"}"

Внизу только кнопка "ОК".

У всех пашет, а я за грибами с бензопилой как всегда. Спасай)

Валерка
11.12.2012, 10:35

— подробное описание ошибки:

при загрузке файла выдает ошибку:
"ответ с сервера пришел не в формате JSON: "{"status":true, "data":"\u003Cimg
src=\u0022\u002files\u002Fimages\u002F20121112013759.jpg\u0022
alt=\u0022\u0022 \u002F\u003E"}"
Внизу только кнопка "ОК".;

ссылку на скриншот;

— при каких обстоятельствах появляется ошибка
см. п.1 - попытка загрузки файла;

— содержание консоли ошибок javascript,
сколько не рылся - не нашел консоль в этой долбаной виндовс 8;

— содержание системного журнала Drupal (watchdog),
ничего о BUEditor или ocupload;

— содержание error.log вашего сервера - никаких ошибок нету,

— версию Drupal - 7.17,
— версию модуля BUEditor - BUEditor 7.x-1.5,
— дату сборки модуля One Click Upload - datestamp = "1337190668",
— версию библиотеки SWFUpload - mmSWFUpload 1.0: Flash upload dialog,
— название и версию браузера - Google Chrome Версия 23.0.1271.95 m и ИЕ 10;
— версию Flash плеера - Adobe Flash Player 11.2.202.235 (использовал в ИЕ 10),
— название и версию ОС - Microsoft Windows [Version 6.2.9200].

попробуйте в ocupload/static/bueditor.js перед

if (serverData.substring(0, 1) != '{') {

вставить

serverData = jQuery.trim(serverData);
Валерка
11.12.2012, 11:59

Все заработало на "ура"! Благодарю! :)

Гость
14.12.2012, 17:01

module initialization error
ckeditor 4
http://drupal.org/node/1268946 все попробовал
+ при установке этого модуля перестает работать enter в окне редактора и source

bigferumdron
27.12.2012, 01:46

Привет, спасибо за модуль! Понимаю, что ты просил куча всего собрать, чтобы комментировать. Но у меня скорее другая ситуация. Все работает! но вот заметил, что работа прекращается когда загрузка идет не по прямому пути, а скажем через синонимы, виртуальные диски, ярлыки, привязки.. Наверное это бок swfuploada, но все же.. Вот например, есть виртульный диск, от DENWER . Т.е. физически он находится на диске D/webservers но еще типо отдельно создается виртуальный диск Z . Так вот когда выбираешь в проводнике диск Z и файлв - то ничего не происходит. А когда идешь по реальному пути, но загрузка идет. Хотя в стандартном модуле, скажем картинок, загрузка идет в обеих вариантах.

Гость
31.12.2012, 13:59

Всем драсть, с НГ 2013!!! у меня проблема, сделал все нормально, установилось, появилось в ckeditor, а при нажатии на кнопку модуля ничего не открывается (с правами норм), кто сталкивался с такой проблемой!? Спасибо!

Гость
16.01.2013, 15:13

Загружаю файл, формируется картинка что надо в соответствии с заданным стилем, все ок, через какое-то время захожу на страницу с записью, картинки не отображаются, в папке со стилем картинки тоже нет, при загрузке изображений через image field проблем нет, все все изображения нужного стиля формируются на папку files и libraries права 755, в чем может быть проблема? Если я правильно понимаю, они записываются в кэш браузера только, после сброса кэша соответственно я ничего не вижу

bigferumdron
17.01.2013, 00:53

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

Причем даже когда проверяю на странице демки ,той что ты предлагал пару сообщений назад, в фарифоксе получаю ошибку Cannot upload Zero Byte files. В других браузерах все норм и идет загрузка.

ТАкже, интересует, реально ли сделать какой-то индикатор загрузки ? когда юзаю в буэдиторе, там просто появляется незаметный текст типо Uploaing и ппц

Гость
22.01.2013, 19:54

Подскажите пожалуйста, как сделать так, чтобы при загрузке картинки в поле текстового редактора появлялся ее thumbnail (как в демо-видео). В настройках One Click Upload, в маске для изображений выбрано отображение thumbnail. В качестве WYSIWYG-редактора используется CKEditor 4, установленный также по вашей статье. Drupal 7.19. Т.е. в данный момент я могу вставить изображение только в предварительно выделенный текст. Ссылка на thumbnail идет следующая: /sites/default/files/styles/thumbnail/public/images/mypicture.jpg - но при этом никакой файл не создается, даже когда с полным доступом создал эти папки вручную. Где копать?

я так понимаю, модуль не использует поля сск.
планируется ли в будущем интеграция с сск?

Гость
11.03.2013, 12:40

Друпал 7.20
CKEditor 3.6.3
PHP 5.3.19
Модуль One Click Upload скачал сегодня.
SWFUpload - тоже.
Браузер FireFox 18.0
Flash плеер обновляю (последний).
ОС openSUSE 12.1 (x86_64)
При нажатии на кнопку открывается диалоговое окно, файл выбираю и нажимаю ОК

Открывается окошко Error -200: 404
Файл не прикрепляется...
в error.log появляется строка File does not exist: /www/nki2/data/ocupload

Гость
12.03.2013, 13:23

Drupal 7.20
CKEditor 3.6.6.1
PHP 5.3.8
библиотеки SWFUpload 2.2.0.1

Все работает, но! кнопка в редакторе отображается так:
картинка

где копать?

Гость
12.03.2013, 13:40

Только что поставил 4.0.2
всё тоже самое
[Tue Mar 12 13:37:00 2013] [error] [client 10.24.37.174] File does not exist: /www/nki2/data/ocupload

Если делаю ссылку ocupload -> sites/all/modules/ocupload/
то в логе пишется
[Tue Mar 12 13:39:29 2013] [error] [client 10.24.37.174] File does not exist: /www/nki2/data/ocupload/upload

это было не вам, у вас какие-то проблемы с сервером

Гость
12.03.2013, 13:47

это было не вам, у вас какие-то проблемы с сервером

Подскажите хоть куда копать?...

Drupal 7.20
CKEditor 4.0.2
PHP 5.3.8
библиотеки SWFUpload 2.2.0.1

поставил 4-й CKEditor, иконка встала на место, но object SWFUpload_1 располагается рядом, а не над иконкой и растягивается на 300х150
картинка 2

сменил тему на стандартную, все ок. буду копать тему...

Гость
12.03.2013, 14:27

Только что поставил 4.0.2
всё тоже самое
[Tue Mar 12 13:37:00 2013] [error] [client 10.24.37.174] File does not exist: /www/nki2/data/ocupload

Если делаю ссылку ocupload -> sites/all/modules/ocupload/
то в логе пишется
[Tue Mar 12 13:39:29 2013] [error] [client 10.24.37.174] File does not exist: /www/nki2/data/ocupload/upload

Разобрался. Были отключены "чистые ссылки". если в файле sites/all/modules/ocupload/static/bueditor.js в строке upload_url "ocupload/upload" заменить на "?q=ocupload/upload", то всё заработает. Либо включить "чистые ссылки".. если это возможно!

Гость
18.03.2013, 03:32

Кнопка добавилась, но она не активна. И также неактивными стали 80% других кнопок редактора.
Помогите, пожалуйста, устранить эту неприятность.

Скажите пожалуйста а не планируется ли добавить в список редакторов TinyMCE? Очень бы хотелось.

Здравствуйте! Насколько безопасно если установить модуль One Click Upload c визуальным редактором CKEditor для друпал 7?

Безопасно ли давать авторизованным пользователям возможность загрузки фотографий с расширением jpg,jpeg,gif,png с помощью плагина One Click Upload?

Во время настройки прав для данного модуля, система вывела следующее сообщение:

Для АВТОРИЗОВАННЫх ПОЛЬЗОВАТЕЛей:

Upload jpg,jpeg,gif,png files

Предупреждение: это право связано с безопасностью сайта. Предоставляйте это право только пользователям той роли, которым вы доверяете.

Что думаете: насколько это безопасно? Могут ли авторизованные пользователи загружать файлы для взлома сайта если им дать право загрузки файлов с расширением jpg,jpeg,gif,png? Спасибо. Буду ждать вашего ответа.

Добавить комментарий