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

Question

Was wäre der kanonische Weg, um einen Datei-Upload mit Meteor zu machen?

Answer 1

Es scheint derzeit keine Möglichkeit zu geben, mit dem HTTP-Server zu interagieren oder irgendetwas mit HTTP zu tun.

Die einzigen Dinge, die Sie tun können, ist mit Server über die von Meteor.methods ausgesetzt RPC-Methoden zu sprechen oder mit MongoDB direkt über die MongoDB-API ausgesetzt zu kommunizieren.

Answer 2

Sie könnten versuchen, direkt auf Amazon S3 hochzuladen, ein paar Tricks mit js uploadern und so. http://aws.amazon.com/articles/1434

Answer 3

Ich verwendete http://filepicker.io. Sie laden die Datei hoch, speichern sie in Ihrem S3 und geben Ihnen eine URL zurück, wo sich die Datei befindet. Dann plumpste 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. Legen Sie eine Filepicker Eingabetag

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

3. Im Anlauf, es initialisieren:

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

4. einen Event-Handler anhängen

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

Answer 4

Ich bin gerade mit an implementation of file uploads mit Meteor.methods und HTML5 File API gekommen. Lass mich wissen was du denkst.

Answer 5

Für Bilder verwende ich eine ähnliche Methode wie Dario's, außer ich schreibe die Datei nicht auf die Festplatte. Ich speichere die Daten direkt in der Datenbank als ein Feld auf dem Modell. Das funktioniert für mich, weil ich nur Browser unterstützen muss, die die HTML5 File 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); 
    } 
}); 

Answer 6

gibt es eine Atmosphäre Paket namens router, die genau das ermöglicht.

eigentlich der beste Weg, das Hochladen von Dateien zu handhaben ist jetzt collectionFS

Answer 7

Sie auf den meteor roadmap sehen können, dass die Funktion „Datei-Upload-Muster“ für „After 1.0“ geplant ist. Wir müssen also auf einen offiziellen Weg warten.

Für jetzt ist eine der besten Möglichkeiten, "collectionFS" (die 0.3.x dev-Vorschau zum Zeitpunkt des Schreibens ist) zu verwenden.

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

Wenn es nur zum Spielen ist, können Sie auch die HTML5-Funktion nutzen. Etwas wie that.

Answer 8

Wenn Sie keine großen Dateien benötigen oder die Dateien nur für eine kurze Zeit speichern, funktioniert diese einfache Lösung sehr gut.

in Ihrem HTML ...

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

in Ihrer Vorlage Ereigniskarte ...

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

zur Kollektions abonnieren und in einer Vorlage einen Link machen ...

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

Während dies nicht die robusteste oder eleganteste Lösung für große Dateien oder eine dateiintensive Anwendung ist, funktioniert es gut für alle Arten von Dateiformaten, wenn Sie das einfache Hochladen und Herunterladen/Rendern der Dateien implementieren möchten.

Answer 9

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

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

Auftraggeber:

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> 

Answer 10

Um die gleiche Wirkung wie die meisten upvoted Antwort ohne die Kosten für Filepicker zu erreichen. Folgen Sie den Anweisungen Für dieses Paket gilt: https://github.com/Lepozepo/S3

Um den Link zu erhalten, verwenden Sie einen ähnlichen Code wie unten. Schließen Sie abschließend die von SecureLink zurückgegebene URL in die DB.

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

Answer 11

hier ist noch eine andere Lösung:

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

Dieser verwendet wird Upload-Lösung Blueimp, die gestückelt Uploads unterstützt, Fortschrittsbalken und vieles mehr.

Answer 12

Es gibt ein neues Paket: edgee:slingshot. Es lädt die Dateien nicht auf Ihren Meteorserver hoch, aber es ist besser so, da es dem Meteorserver ermöglicht, sich auf sein primäres Ziel zu konzentrieren, die Meteor-App zu bedienen, anstatt kostspielige Dateiübertragungen zu handhaben.

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

Ihr Meteorserver dient lediglich als Koordinator.

Es ist auch ein sehr vielseitiges und leichtes Gehäuse.