Интеграция Filepicker.IO с Meteor

Я рассматривал Meteor как потенциальную платформу для веб-приложения, и мне нужно иметь возможность разрешить своим клиентам загружать файлы через приложение. Я начал проверять Filepicker.io как средство для включения этой функции, но у меня возникли проблемы с отображением поля перетаскивания. Он отлично работает в тестовом приложении Rails, но в моем демонстрационном приложении Meteor он просто выглядит как пустое поле ввода.


meteor filepicker.io
person iamnotpretending    schedule 22.10.2012    source источник
comment
добавьте пример кода, чтобы людям было проще предлагать улучшения   -  person Aksel Willgert    schedule 22.10.2012
comment
Некоторое время назад мы создали библиотеку образцов метеоров для сборщика файлов, она может дать вам начало. github.com/Filepicker/meteor   -  person brettcvz    schedule 23.10.2012
comment
Вы читали этот пост? stackoverflow.com/questions/11790191/meteor-file-uploads   -  person Samo    schedule 13.03.2013

Ответы (4)


arrow_upward
4
arrow_downward

Я импортировал библиотеку в папку /client с помощью wget http://api.filepicker.io/v1/filepicker.js

тогда я мог бы просто

meteor.startup ->
  filepicker.setKey 'lalala'

а затем создайте виджет с помощью

Template.fileUpload.rendered = ->  
  filepicker.constructWidget document.getElementById('uploadWidget')
person Perseoh    schedule 29.10.2012
comment
Что значит? Вы имеете в виду: Template.agregaProveedor.rendered = function(){ filepicker.constructWidget(document.getElementById('uploadWidget')); }; - person Acapulco; 15.01.2013
comment
А как это в html отобразить? - person Acapulco; 15.01.2013
comment
Да, '-›' - это обозначение кофескрипта. Я использую '‹input type=filepicker id='uploadWidget'/›' в своем HTML, чтобы разместить кнопку выбора файла. - person Perseoh; 16.01.2013
comment
@perseoh Есть ли способ иметь несколько кнопок выбора на странице? (используя ограничения ID до одного на страницу). Интересно, видели ли вы хороший ответ. - person ppedrazzi; 13.12.2013
comment
Будет ли редактирование кофе здесь грубым? Большинство людей, которые приземляются здесь, кажется, не говорят на кофе. - person meawoppl; 26.02.2014

arrow_upward
3
arrow_downward

Для простоты я опубликовал пакет Atmosphere (сборщик загрузки github), который можно установить вместе с Meteorite.

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

Установить:

mrt add loadpicker

Вызовите скрипт с вашим личным ключом filepicker.io и функцией обратного вызова для создания области перетаскивания:

loadPicker(key, cb);

Пример интеграции выглядит так:

 if (Meteor.isClient) {
  Session.set("widgetSet", false);
  var key = "xxxxxxxxxxxxxxxxx";
  var cb = function () {
    filepicker.makeDropPane($('#exampleDropPane')[0], {
      dragEnter: function() {
        $("#exampleDropPane").html("Drop to upload").css({
          'backgroundColor': "#E0E0E0",
          'border': "1px solid #000"
        });
      }
    });
  };

  Template.home.created = function ( ) { 
    if (!Session.get("widgetSet")) {  
      loadPicker(key, cb);
    }
  };
}

HTML

<h1>Drop Pane</h1>
<div id="exampleDropPane">Drop Here!</div>
<div><pre id="localDropResult"></pre></div>

CSS

#exampleDropPane {
  text-align: center;
  padding: 20px;
  background-color: #F6F6F6;
  border: 1px dashed #666;
  border-radius: 6px;
  margin-bottom: 20px;
}
person guido    schedule 14.05.2013

arrow_upward
1
arrow_downward

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

filepicker.constructWidget(document.getElementById('inputID'));
person Harry    schedule 22.10.2012

arrow_upward
-2
arrow_downward

Следующий код находится в coffeescript.

Сначала вам нужно правильно установить ключ:

Meteor.startup ->
  filepicker.setKey 'YOUR API KEY'

Затем вы можете настроить поведение клиента, используя API:

'click .upload': (e) ->
  filepicker.pickMultiple
    extensions: ['.png', '.jpg', '.gif', '.doc', '.xls', '.ppt', '.docx', '.pptx', '.xlsx', '.pdf', '.txt']
    container: 'modal'
    services: ['COMPUTER']
    (fpfiles) =>
        #do whatever you want to process the data filepicker provided you after upload was done
        Meteor.call 'uploadFiles', fpfiles
person Tyr    schedule 23.10.2012