Wie würde man einen Datei-Upload mit Meteor behandeln?

Was wäre die kanonische Methode, um einen Datei-Upload mit Meteor durchzuführen?

Derzeit scheint es keine Möglichkeit zu geben, mit dem HTTP-Server zu interagieren oder etwas im Zusammenhang mit HTTP zu tun.

Sie können nur über die von Meteor.methods bereitgestellten RPC-Methoden mit dem Server oder direkt über die bereitgestellte mongoDB-API mit mongoDB sprechen.

Ich habe http://filepicker.io verwendet . Sie laden die Datei hoch, speichern sie in Ihrem S3 und geben Ihnen eine URL zurück, unter der sich die Datei befindet. Dann plumpse ich einfach die URL in eine DB.

1. Wget das Filepicker-Skript in Ihren Client-Ordner.

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

2. Fügen Sie ein Filepicker-Eingabe-Tag ein

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

3. Initialisieren Sie es beim Start:

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

4. Fügen Sie einen Ereignishandler hinzu

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

Für Bilder verwende ich eine ähnliche Methode wie Dario, außer dass ich die Datei nicht auf die Festplatte schreibe. Ich speichere die Daten direkt in der Datenbank als Feld im Modell. Dies funktioniert bei mir, da ich nur Browser unterstützen muss, die die HTML5-Datei-API unterstützen . Und ich brauche nur einfache Bildunterstützung.

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);
  }
});

Ich habe gerade eine Implementierung von Datei-Uploads mit Meteor.methods und der API von HTML5 File entwickelt. Lass mich wissen was du denkst.

Es gibt ein neues Paket: edgee: slingshot . Die Dateien werden nicht auf Ihren Meteor-Server hochgeladen, dies ist jedoch besser, da sich der Meteor-Server auf sein primäres Ziel konzentrieren kann, die Meteor-App zu bedienen, anstatt kostspielige Dateiübertragungen durchzuführen.

Stattdessen werden Dateien in Cloud-Speicherdienste hochgeladen. Derzeit werden AWS S3- und Google Cloud-Dateien unterstützt, in Zukunft werden jedoch auch Rackspace Cloud-Dateien und möglicherweise Cloudinary unterstützt.

Ihr Meteorserver fungiert lediglich als Koordinator.

Es ist auch ein sehr vielseitiges und leichtes Paket.

Es gibt ein Atmosphärenpaket namens Router, das genau das ermöglicht.

Der beste Weg, um Datei-Uploads zu verarbeiten, ist jetzt collectionFS

Hier ist die beste Lösung für diese Zeit. Es verwendet collectionFS .

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

Klient:

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
                }
            });
        });
    }
});

Server:

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
    }
});

Vorlage:

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

Wenn Sie keine besonders großen Dateien benötigen oder die Dateien möglicherweise nur für einen kurzen Zeitraum speichern, funktioniert diese einfache Lösung sehr gut.

In Ihrem HTML ...

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

In Ihrer Vorlagenereigniskarte ...

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);
        }
      });
    }
  }
});

Abonnieren Sie die Sammlung und rendern Sie in einer Vorlage einen Link ...

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

Dies ist möglicherweise nicht die robusteste oder eleganteste Lösung für große Dateien oder eine dateieintensive Anwendung. Sie eignet sich jedoch sehr gut für alle Arten von Dateiformaten, wenn Sie ein einfaches Hoch- und Herunterladen / Rendern der Dateien implementieren möchten.

Sie können versuchen, direkt auf Amazon S3 hochzuladen und dabei einige Tricks mit js-Uploadern und anderen Dingen auszuführen. http://aws.amazon.com/articles/1434

Sie können auf der Meteor-Roadmap sehen, dass die Funktion "Datei-Upload-Muster" für "Nach 1.0" geplant ist. Wir müssen also warten, um einen offiziellen Weg zu finden.

Derzeit ist eine der besten Möglichkeiten die Verwendung von "collectionFS" (dies ist die Entwicklungsvorschau von 0.3.x zum Zeitpunkt des Schreibens).

Oder inkfilepicker (zB filepicker.io) wie hier vorgeschlagen. Es ist einfach genug zu bedienen, obwohl dies offensichtlich eine Internetverbindung von der Benutzerseite erfordert.

Wenn Sie nur herumspielen möchten, können Sie auch die HTML5-Funktion nutzen. So etwas wie , dass .

Hier ist noch eine andere Lösung:

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

Dieser verwendet die Upload-Lösung von Blueimp, die Chunk-Uploads, Fortschrittsbalken und mehr unterstützt.

Befolgen Sie die Anweisungen für dieses Paket, um dieselbe Aktion wie die am besten bewertete Antwort ohne die Kosten von filepicker.io auszuführen: https://github.com/Lepozepo/S3

Verwenden Sie dann den folgenden Code, um den Link zu erhalten. Schließen Sie abschließend die von SecureLink zurückgegebene URL an die Datenbank an.

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');
  }
});