Drag'n'drop локального файла на HTML-страницу в Firefox

zencd · №1

Пытаюсь обработать DnD локального файла на страницу - узнать имя файла.

В 3.5 событие удавалось отловить, но имя дропнутого файла пусто.

В Firefox 3.6 появилось проперти event.dataTransfer.files через которое можно узнать и имя файла, и размер, даже содержимое! Но полный путь к файлу недоступен. Как его получить?

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

P.S. Stackoverflow молчит, mozillazine тоже. Если и здесь не ответят, придётся пересилить себя и писать в лист рассылки (-:

Отредактировано zencd (09-01-2010 12:28:21)

luitzen · №2

Виноват, я думал Вы хотите решить свою задачу «обычным» JavaScript, и лишь если не получится — писать расширение.

А нельзя как-нибудь утащить объект event в расширение и там спросить у него .dataTransfer.mozGetDataAt("application/x-moz-file", 0).path ?

Вот здесь какие-то похожие вопросы вроде освещаются…

Отредактировано luitzen (10-01-2010 21:48:39)

zencd · №3

Интересно... Какой-то объект возвращается, но проинспектировать его свойства никак, а свойство 'path' пусто.

Отредактировано zencd (11-01-2010 12:37:05)

Anton · №4

Судя по эксперименту, в event.dataTransfer при "бросании" файла на окно, два flavour'а - "application/x-moz-file" и "text/x-moz-url".
Соответственно, путь к файлу можно получить так

Выделить код

Код:

var dt = event. dataTransfer;
var data = dt. mozGetDataAt ("text/x-moz-url", 0);
alert (data);

или так

Выделить код

Код:

var dt = event. dataTransfer;
var data = dt. mozGetDataAt ("application/x-moz-file", 0);
alert (transferUtils. retrieveURLFromData (data, "application/x-moz-file"));

Детали - в chrome://global/content/nsDragAndDrop.js

zencd · №5

Фантастика, Антон! "text/x-moz-url" работает! Спасибо (-:

Ar2r · №6

Я тут какраз кстати ))

Есть экстеншен для хостинга картинок, который умеет загружать фотки путем перетаскивания на textarea на странице и вставляет туда html код со ссылкой

http://toolbar.imageshack.us/

Уже целый день ковыряю его и пытаюсь переделать под яндекс фотки и не могу понять как он работает :-)

Рад буду пообщаться в skype/icq по этой проблеме

zencd · №7

Собственно, я как раз такой и хотел написать.
10 МБ в распакованном виде - это мощщ :-)

А зачем смотреть как работает этот монстр? Ловить drag'n'drop событие просто, как обрабатывать файлы здесь научили, а дальше смотришь как работает Яндекс.Фотки API и по протоколу заливаешь файл посредством XMLHttpRequest. Вот пример каркаса:

Выделить код

Код:

var dndtest = {
    init : function() {
        var appcontent = document.getElementById("appcontent"); // browser
        if(appcontent)
            appcontent.addEventListener("DOMContentLoaded", dndtest.onPageLoad, true);
    },
    onPageLoad: function(aEvent) {
        var doc = aEvent.originalTarget
        var ee = doc.getElementsByTagName('textarea')
        for(var i = 0; i < ee.length; i++) {
            ee[i].addEventListener('drop', dndtest.onDrop, true)
        }
    },
    onDrop: function(event) {
        var xmf = event.dataTransfer.mozGetDataAt ("application/x-moz-file", 0)
        alert("application/x-moz-file: " + xmf)
    },
}

window.addEventListener('load', dndtest.init, false)

Отредактировано zencd (27-01-2010 16:00:38)

Ar2r · №8

На чем остановились? Сейчас мучаюсь с отправкой файлов на API. Про Апи я вкурсе

Можно попросить Ваш код для примера? Все равно сам все писать буду

Отредактировано Ar2r (27-01-2010 16:35:53)

zencd · №9

Хотел найти а) бесплатный хостинг б) без регистрации в) со стабильным АПИ. Но такого сочетания в природе, кажется, нет (drop.io не отдаёт ссылку на полноформатную картинку). На том, "с горя", и остановился.

Будет интересно узнать о результатах.

UPD. Так весь мой код я выше привёл. Остаётся добавить работу с API через XMLHttpRequest.

Если нужно показать временное окошко как у imageshack, может помочь элемент "panel":
var p = document.createElement('panel')
p.setAttribute('noautohide', true)
p.setAttribute('noautofocus', true)
// здесь добавляются children'ы
p.showPopup(...)

(Не знаю, есть ли в XUL немодальные диалоги.)

Отредактировано zencd (27-01-2010 16:56:44)

Ar2r · №10

Я на яндекс фотках остановился. Как только с Я.фотками разберусь, то создам на своем сайте аналогичный API. Т.е. будет серверная часть, которую можно будет на любой хостинг залить и использовать :-)

В данный момент проблема - как POST запрос сделать и передать файл в бинарном виде.

Открываю файл через

var filestream = Components.classes["@mozilla.org/network/file-input-stream;1"].
createInstance(Components.interfaces.nsIFileInputStream);

var bis = Components.classes['@mozilla.org/binaryinputstream;1']
.createInstance(Components.interfaces.nsIBinaryInputStream);
filestream.init(file, 0x01, 00004, null);

bis.setInputStream(filestream);
//var data = bis.readBytes(file.fileSize);

В data получается содержание картинки

PS: Я лох. Пытался отследить загрузку фйайлов через Print_r($_POST) :-) А нужно было через $_FILES. Загрузка файлов работает. вечером докавыряю

Отредактировано Ar2r (27-01-2010 17:11:33)

Ar2r · №11

Не понимаю, как через XMLHttpRequest закачать файл

Не получается.

http://pastebin.mozilla-russia.org/104165

Мссив $_FILES Пустой на сервере получается.

Отредактировано Ar2r (28-01-2010 01:31:33)

zencd · №12

Может потому что эта строчка закомментирована?
//xhr.sendAsBinary()
Или то что эксепшн подавляется...

Вот некий пример кода отправляющий файл. (Код отвечающий за безопасность не нужен.)
http://www.captain.at/ajax-file-upload.php
Там тело POST'а вручную формируется, что довольно правильно.

Отредактировано zencd (28-01-2010 06:46:45)

Ar2r · №13

Update: Вроде работает :-)

~~Остановился на RSA для Яндекс фоток Апи~~

Скомпилировал на сервере encrypt !!

Алгоритм такой.

1. Дергаем ссылку
2. Парсим тег key
3. Отправляем на свой хост строчки: key, login, pass. Получаем зашифрованные логин и пароль.
4. Отправляем зашифрованные логин и пароль в запросе.
....

Скомпилировал под Windows encrypt.exe

Интересно, можно ли ее запускать из расширения?

Отредактировано Ar2r (28-01-2010 15:44:02)

zencd · №14

Есть у меня сниппет запускающий программу. Правда, внешнюю:

Выделить код

Код:

var process = Components.classes["@mozilla.org/process/util;1"]
                              .createInstance(Components.interfaces.nsIProcess);
process.init(launcherLocation);
process.run(false, args, args.length);

Возможно, сработает не только для схемы file:// но и для chrome://

Отредактировано zencd (28-01-2010 16:29:24)

Ar2r · №15

zencd пишет

Возможно, сработает не только для схемы file:// но и для chrome://

Врятли. пробовал разные варианты
chrome://content/notepad.exe
chrome://myf/content/notepad.exe

Функция file.exists() выдаетч то не найден файл.

===

Временно приходится использовать внешний запрос на свой домен.

Но, возникла проблема.

Выделить код

Код:

req = new XMLHttpRequest();  
        req.open('POST',"http://auth.mobile.yandex.ru/yamrsa/token/?rand="+Math.floor(Math.random()*10000000) , false);   
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        var params  = 'request_id='+escape(request_id)+'&credentials='+escape(creditential);
        req.send(params);

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

Update: Проблема решена:

Выделить код

Код:

function myescape(s) {return escape(s).replace(new RegExp('\\+','g'), '%2B');}

===

Готово. Плагин логинится в яндекс фотки. получает токен ключ. Загружает фотку. Получает полный путь к ней и вставляет этот путь до картинки в textarea. Разберусь как окна с настройками создавать - покажу что получилось

Проблема с запуском внешнего приложения так и осталась.

Необходимо как-то запустить программулину консольную с параметрами.
Например нужно запустить "encrypt.exe keeeeeeeey str_to_encrypt >> out.txt"
А потом прочитать out.txt... Не понимаю как реализовать, что бы encrypt.exe находился в самом расширении для ФФ.

Глюки: Сочетание CTRL+F Приводит к краху [firefox]

Отредактировано Ar2r (29-01-2010 13:24:08)

Ar2r · №16

Вот так работает плагин

http://vimeo.com/9111414

Дорабатываю в свободное время.

Отредактировано Ar2r (31-01-2010 23:07:31)

zencd · №17

Выглядит неплохо (:

А квота на твоём личном аккаунте ЯФ не закончится? Или этот плагин для частного потребления?

Ar2r · №18

zencd пишет

Выглядит неплохо (:
А квота на твоём личном аккаунте ЯФ не закончится? Или этот плагин для частного потребления?

Пункт с логином и паролем хочу в настройки вынести.

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

Отредактировано Ar2r (01-02-2010 11:03:39)

Ar2r · №19

My Yandex.Fotki uploader - Анонс написанного плагина для [firefox] .
https://addons.mozilla.org/ru/firefox/addon/75488

Полезная информация