Upload images in meteor with Collectionfs and display them on the interface

Upload the image with Collectionfs and display the key to the interface is to determine whether the full upload completed, and then through the session notification interface display. There are two ways to do this: 1, with fileobj.hasstored (' Your database table name ') 2. File.isuploaded ()

This article uses the first method.

Original: http://blog.csdn.net/casun_li/article/details/46356379

1. Server-side

//icon FileImages=NewFs. Collection ("Imges",{Stores: [NewFs. Store.filesystem ("Imges", {Path:"/data/files/images"})],Filter: {maxSize: -*1024x768*1024x768,//In bytes         Allow: {Extensions: [' PNG ']        },Oninvalid:function(message) {if(Meteor.isclient) {Alert(message); }Else{Console.Log(message); }}}); 2. Client
varseticonuploaded=function(fileobj) {varIntervalhandle= Meteor.setinterval(function() {//console.log ("Intervalhandle..... ");        if(Fileobj.hasstored (' Your database table name ')) {//When the file is stored successfully and then called//This method has a problem, be sure to have
                                                 //Images.fin done(fileobj._id) to find out the data, fileobj.hasstored () only works
            Session.Set(' iconuploaded ',true);
//console.log ("Session.set (' iconuploaded ', True)");           
File has stored, close out interval          
  Meteor.clearinterval(Intervalhandle);
}Else{
        //console.log ("Intervalhandle.....  +. ");   
       }
},
 +);}





Template. uploadimg.Events({' Change #img':function(Event, template) {//icons     

   Fs. Utility.eachfile (Event,function(file) {
Images.Insert(File,function(Err, Fileobj) {if(ERR) {//alert ('upload icon failed: ' +err);                    Console.Log('upload icon failed: '+ERR);return; }Session.Set(' iconuploaded ',false);Console.Log("upload icon succeeded");seticonuploaded(fileobj);//This method informs the interface to display            });    }); }
});


Template. uploadimg.Helpers({Showicon:function(){Console.Log("Session.get (' iconuploaded ')"+Session.Get(' iconuploaded '));if(Session.Get(' iconuploaded ')){return ' cfs/files/imges/' +icon_file_id;//icon_file_id: A variable, fileobj._id the values to him; }return"";//session.get ("icon_file_id", "" ")    }});


3.html:

<Divclass="Form-group">      <Divclass="Col-sm-10">        <inputtype="File"id="img">        <Pclass="Help-block">please upload512x512PixelPngformat picture, size not more than512kB</P>    </Div></Div>


<Divclass="Form-group">    <Divclass="Col-sm-offset-2 col-sm-10">       <imgsrc="{{Showicon}}" alt="icon">    </Div></Div>4. The last big problem is the re-use of fileobj.hasstored (' Your database table name ') method does not work, originally did not subsribeserver:
Meteor.Publish("Imgges",function() {return imges.Find();}); Client
Template. uploadimg.onrendered (() {This    .  Autorun(() {        Meteor.  Subscribe("imgges");})    ;

Original: http://blog.csdn.net/casun_li/article/details/46356379
Reference: http://stackoverflow.com/questions/29313486/ meteor-collectionfs-make-sure-the-image-is-uploaded-before-displaying/29832414#29832414

http://stackoverflow.com/questions/28860545/ is-there-any-event-to-indicate-that-the-uploaded-file-has-been-written-with-coll/28860844#28860844

Upload images in meteor with Collectionfs and display them on the interface