Як можна впоратися із завантаженням файлів за допомогою Meteor?

Яким буде канонічний спосіб обробки файлів із Meteor?

На даний момент, здається, не існує способу взаємодії з HTTP-сервером або будь-чого, що пов’язано з HTTP.

Єдине, що ви можете зробити, це поговорити з сервером за допомогою методів RPC, що виставляються Meteor.methods, або поговорити з mongoDB безпосередньо через mongoDB API.

Я використовував http://filepicker.io . Вони завантажать файл, зберігають його у вашому S3 і повертають вам URL-адресу, де знаходиться файл. Потім я просто вкладаю URL-адресу в БД.

1. Введіть скрипт filepicker у папку клієнта.

   wget https://api.filepicker.io/v0/filepicker.js
   

2. Вставте тег введення файлу

   <input type="filepicker" id="attachment">
   

3. Під час запуску ініціалізуйте його:

   Meteor.startup( function() {
       filepicker.setKey("YOUR FILEPICKER API KEY");
       filepicker.constructWidget(document.getElementById('attachment'));
   });
   

4. Приєднайте обробник події

   Templates.template.events({
       'change #attachment': function(evt){
           console.log(evt.files);
       }
   });
   

Для зображень я використовую метод, схожий на метод Даріо, за винятком того, що я не записую файл на диск. Я зберігаю дані безпосередньо в базі даних як поле на моделі. Це працює для мене, оскільки мені потрібно підтримувати лише браузери, які підтримують API файлів HTML5 . І мені потрібна лише проста підтримка зображень.

Template.myForm.events({
  'submit form': function(e, template) {
    e.preventDefault();
    var file = template.find('input type=["file"]').files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
      // Add it to your model
      model.update(id, { $set: { src: e.target.result }});

      // Update an image on the page with the data
      $(template.find('img')).attr('src', e.target.result);
    }
    reader.readAsDataURL(file);
  }
});

Я щойно придумав реалізацію завантаження файлів за допомогою Meteor.methods та API файлу HTML5. Повідомте мене, що ви думаєте.

З'явився новий пакет: edgee: slingshot . Він не завантажує файли на ваш метеорний сервер, але це краще, оскільки він дозволяє метеорному серверу зосередитись на своїй головній меті - обслуговувати метеорну програму, а не обробляти дорогі передачі файлів.

Натомість він завантажує файли до хмарних служб зберігання. На даний момент він підтримує AWS S3 та Google Cloud Files, але він також підтримуватиме Rackspace Cloud Files і, можливо, Cloudinary у майбутньому.

Ваш метеорний сервер виконує лише функцію координатора.

Це також дуже універсальний та легкий пакет.

є пакет атмосфери під назвою маршрутизатор, який дозволяє саме це.

насправді, найкращим способом обробки завантажень файлів є зараз collectionFS

Ось найкраще рішення на цей час. Він використовує collectionFS .

meteor add cfs:standard-packages
meteor add cfs:filesystem

Клієнт:

Template.yourTemplate.events({
    'change .your-upload-class': function(event, template) {
        FS.Utility.eachFile(event, function(file) {
            var yourFile = new FS.File(file);
            yourFile.creatorId = Meteor.userId(); // add custom data
            YourFileCollection.insert(yourFile, function (err, fileObj) {
                if (!err) {
                   // do callback stuff
                }
            });
        });
    }
});

Сервер:

YourFileCollection = new FS.Collection("yourFileCollection", {
    stores: [new FS.Store.FileSystem("yourFileCollection", {path: "~/meteor_uploads"})]
});
YourFileCollection.allow({
    insert: function (userId, doc) {
        return !!userId;
    },
    update: function (userId, doc) {
        return doc.creatorId == userId
    },
    download: function (userId, doc) {
        return doc.creatorId == userId
    }
});

Шаблон:

<template name="yourTemplate">
    <input class="your-upload-class" type="file">
</template>

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

У вашому html ...

<input id="files" type="file" />

У вашій карті подій шаблону ...

Template.template.events({
  'submit': function(event, template){
    event.preventDefault();
    if (window.File && window.FileReader && window.FileList && window.Blob) {
      _.each(template.find('#files').files, function(file) {
        if(file.size > 1){
          var reader = new FileReader();
          reader.onload = function(e) {
            Collection.insert({
              name: file.name,
              type: file.type,
              dataUrl: reader.result
            });
          }
          reader.readAsDataURL(file);
        }
      });
    }
  }
});

Підпишіться на Збірник і в шаблоні відправте посилання ...

<a href="{{dataUrl}}" target="_blank">{{name}}</a>

Хоча це може бути не найнадійнішим або елегантним рішенням для великих файлів або інтенсивного використання файлів, воно дуже добре працює для всіх типів форматів файлів, якщо ви хочете здійснити просте завантаження та завантаження / візуалізацію файлів.

Ви можете спробувати завантажити безпосередньо на Amazon S3, виконавши деякі трюки з js-завантажувачами та іншим. http://aws.amazon.com/articles/1434

Ви можете бачити на дорожній карті метеору що функція "Шаблон завантаження файлів" запланована на "Після 1.0". Тож ми повинні почекати, щоб побачити офіційний шлях.

Наразі одним із найкращих способів є використання "collectionFS" (що становить 0,3.x попередній перегляд розробника на момент написання).

Або inkfilepicker (наприклад, filepicker.io), як пропонується тут. Він досить простий у використанні, хоча для цього, очевидно, потрібне і підключення до Інтернету з боку користувача.

Якщо це просто пограти, ви також можете скористатися функцією html5. Щось подібне , що .

ось ще одне рішення:

https://doctorllama.wordpress.com/2014/11/06/meteor-upload-package-with-jquery-file-upload/

Цей використовує рішення для завантаження Blueimp, яке підтримує завантажені фрагменти, індикатори прогресу тощо.

Щоб виконати ту саму дію, що і найголосніша відповідь, без вартості filepicker.io, дотримуйтесь інструкцій цього пакета: https://github.com/Lepozepo/S3

Потім для отримання посилання використовуйте код, подібний до наведеного нижче. Нарешті, підключіть URL-адресу, повернуту secureLink, до БД.

Template.YourTemplate.events({
  "click button.upload": function() {
    var files = $("input.file_bag")[0].files;
    S3.upload(files, "/subfolder", function(e,r) {
      console.log(r);
      Session.set('secureLink', r.secure_url);
    })
  }
});

Template.YourTemplate.helpers({
  "files": function() {
    return S3.collection.find();
  },

  "secureLink": function() {
    return Session.get('secureLink');
  }
});