不能讓流星FileCollection包工作

Question

我（不幸）在Windows機器上工作，所以我不得不手動添加FileCollection包到我的應用程序，但是當我運行我的應用程序時，我可以訪問文件集合和文件從瀏覽器控制檯收集方法。但是，我似乎無法讓事件監聽器在實際頁面上設置。 （僅供參考，我爲我的模板架構使用鐵路由器。）

看起來需要調用的代碼並不是按照正確的順序進行的，但我已經試驗了將代碼放置在哪裏似乎沒有任何區別。

服務器端代碼：

// Create a file collection, and enable file upload and download using HTTP 
Images = new fileCollection('images', 
    { resumable: true, // Enable built-in resumable.js upload support 
    http: [ 
     { method: 'get', 
     path: '/:_id', // this will be at route "/gridfs/images/:_id" 
     lookup: function (params, query) { // uses express style url params 
      return { _id: params._id };  // a mongo query mapping url to myFiles 
     } 
     } 
    ] 
    } 
); 

if (Meteor.isServer) { 

    // Only publish files owned by this userId, and ignore 
    // file chunks being used by Resumable.js for current uploads 
    Meteor.publish('myImages', 
    function() { 
     return Images.find({ 'metadata._Resumable': { $exists: false }, 
        'metadata.owner': this.userId }); 
    } 
); 

    // Allow rules for security. Should look familiar! 
    // Without these, no file writes would be allowed 
    Images.allow({ 
    remove: function (userId, file) { 
     // Only owners can delete 
     if (userId !== file.metadata.owner) { 
     return false; 
     } else { 
     return true; 
     } 
    }, 
    // Client file document updates are all denied, implement Methods for that 
    // This rule secures the HTTP REST interfaces' PUT/POST 
    update: function (userId, file, fields) { 
     // Only owners can upload file data 
     if (userId !== file.metadata.owner) { 
     return false; 
     } else { 
     return true; 
     } 
    }, 
    insert: function (userId, file) { 
     // Assign the proper owner when a file is created 
     file.metadata = file.metadata || {}; 
     file.metadata.owner = userId; 
     return true; 
    } 
    }); 
} 

客戶端代碼（目前在main.js在客戶端目錄的頂層）：

if (Meteor.isClient) { 
    // This assigns a file upload drop zone to some DOM node 
Images.resumable.assignDrop($(".fileDrop")); 

// This assigns a browse action to a DOM node 
Images.resumable.assignBrowse($(".fileBrowse")); 

// When a file is added via drag and drop 
Images.resumable.on('fileAdded', function(file) { 
// Create a new file in the file collection to upload 
    Images.insert({ 
    _id : file.uniqueIdentifier, // This is the ID resumable will use 
     filename : file.fileName, 
     contentType : file.file.type 
     }, function(err, _id) {// Callback to .insert 
     if (err) {throwError('Image upload failed');} 
    // Once the file exists on the server, start uploading 
     Images.resumable.upload(); 
}); 
    }); 
    Images.resumable.on('fileSuccess', function(file) { 
var userId = Meteor.userId(); 
var url = '/gridfs/images/' + file._id; 
Meteor.users.update(userId, { 
    $set : { 
    "profile.$.imageURL" : url 
    } 
    }); 
Session.set('uploading', false); 
    }); 
    Images.resumable.on('fileProgress', function(file) { 
Session.set('uploading', true); 
    }); 
} 

Answer 1

我認爲這個問題可能與使用IronRouter。我假設你通過Iron路由器使用了一些layout.html，並且在它裏面你添加了你的文件表格的模板。 （我猜你正在跟隨fileCollection附帶的sampleApp。）。當我這樣做時，我遇到了一個問題，它與我附加聽衆的代碼的位置有關。問題是你有代碼「Images.resumable.assignDrop（$（」。fileDrop「））;」在你的客戶端文件中。您現在的方式是，在layout.html中呈現模板之前，該代碼行正在運行。所以代碼找不到DOM元素「.fileDrop」。爲了解決這個問題，創建一個layout.js文件並使用像這樣的渲染方法...

Template.layout.rendered = function(){ 
    Images.resumable.assignDrop($(".fileDrop")); 
}