2017-08-19 91 views
5

Ben amazon s3 görüntüleri yüklemek için this öğretici takip ettik ve ben bir dosya seçici bir görüntü dosyası seçtikten sonra bir hata ile karşılaştım.meteor içinde Amazon s3 undefined özellik yükleniyor

post_submit.js:36 Uncaught TypeError: Cannot read property 'uploadToAmazonS3' of undefined 
at Object.change input[type="file"] (post_submit.js:36) 

İşte benim kod

Ben, bu hataya neden olduğunu anlamaya sen benim kod fazlasına ihtiyaç varsa bana bildirin gibi olamaz, ama bu bunun çoğu kapsar düşünüyorum.

istemci/templates/mesaj/post_submit.html

<template name="postSubmit"> 
    <div class="upload-area"> 
     <form id="upload"> 
     <p class="alert alert-success text-center"> 
      <span>Click or Drag a File Here to Upload</span> 
      <input type="file"> 
     </p> 
     </form> 
     {{> files}} 
    </div> 
    <input type="submit" value="Submit" class="btn btn-primary"/> 
    </form> 
</template> 

istemci/şablon/mesaj/post_submit.js

Template.postSubmit.events({ 
    'change input[type="file"]' (event, template) { 
    Modules.client.uploadToAmazonS3({ event: event, template: template }); 
    } 
}); 

hem/modüller/

_modules.js
Modules  = {}; 
Modules.both = {}; 

istemci/modüller/_modules.js

Modules.client = {}; 

sunucu/modüller//

Modules.server = {}; 

istemci/modülleri _modules.js

let template; 

let _getFileFromInput = (event) => event.target.files[0]; 

let _setPlaceholderText = (string = "Click or Drag a File Here to Upload") => { 
    template.find(".alert span").innerText = string; 
}; 

let _addUrlToDatabase = (url) => { 
    Meteor.call("storeUrlInDatabase", url, (error) => { 
    if (error) { 
     Bert.alert(error.reason, "warning"); 
     _setPlaceholderText(); 
    } else { 
     Bert.alert("File uploaded to Amazon S3!", "success"); 
     _setPlaceholderText(); 
    } 
    }); 
}; 

let _uploadFileToAmazon = (file) => { 
    const uploader = new Slingshot.Upload("uploadToAmazonS3"); 

    uploader.send(file, (error, url) => { 
    if (error) { 
     Bert.alert(error.message, "warning"); 
     _setPlaceholderText(); 
    } else { 
     _addUrlToDatabase(url); 
    } 
    }); 
}; 

let upload = (options) => { 
    template = options.template; 
    let file = _getFileFromInput(options.event); 

    _setPlaceholderText(`Uploading ${file.name}...`); 
    _uploadFileToAmazon(file); 
}; 

Modules.client.uploadToAmazonS3 = upload; 

upload_to_amazon_s3.js sunucu/askılar hot.js

Slingshot.fileRestrictions("uploadToAmazonS3", { 
    allowedFileTypes: [ "image/png", "image/jpeg", "image/gif" ], 
    maxSize: 1 * 1024 * 1024 
}); 

Slingshot.createDirective("uploadToAmazonS3", Slingshot.S3Storage, { 
    bucket: "mrskitson-images", 
    acl: "public-read", 
    authorize: function() { 
    let userFileCount = Files.find({ "userId": this.userId }).count(); 
    return userFileCount < 3 ? true : false; 
    }, 
    key: function (file) { 
    var user = Meteor.users.findOne(this.userId); 
    return user.emails[0].address + "/" + file.name; 
    } 
}); 

lib/koleksiyonları/files.js

Files = new Meteor.Collection('files'); 

Files.allow({ 
    insert: function() { return false; }, 
    update: function() { return false; }, 
    remove: function() { return false; } 
}); 

Files.deny({ 
    insert: function(){ return true; }, 
    update: function(){ return true; }, 
    remove: function(){ return true; } 
}); 

hem/yöntem/ekleme/Anders-Kitson @

Meteor.methods({ 
    storeUrlInDatabase: function(url) { 
    check(url, String); 
    Modules.both.checkUrlValidity(url); 

    try { 
     Files.insert({ 
     url: url, 
     userId: Meteor.userId(), 
     added: new Date() 
     }); 
    } catch(exception) { 
     return exception; 
    } 
    } 
}); 
+0

Bu modül dosyalarını nereden alırsınız? – Styx

+0

Bu modül dosyalarını içe aktararak ne demek istediğinden emin değilim? –

+0

Yani, "import" lib/modules/... 'etc dosyasını yaptığınız dosyaları gösterebilir misiniz? – Styx

cevap

0

files.js Sen hata mesajını dikkatlice okuyarak kendinize bir sürü zaman kazandırabilirdi. sorunun nerede olduğunu size söyler: post_submit.js

ait

post_submit.js:36 Uncaught TypeError: Cannot read property 'uploadToAmazonS3' of undefined at Object.change input[type="file"] (post_submit.js:36)

Hat 36

Eğer post_submit.js olarak gösterdi dosya sadece 5 satır uzunluğundadır rağmen. Doğru dosyası ise, kusurlu hattı muhtemelen şudur:

Modules.client.uploadToAmazonS3({ event: event, template: template });

O Modules.client tanımsız olduğunu size anlatmaya çalışıyor. Bu senin sorununun sebebi.Bilirsiniz

+0

Um, hatayı okudum ve bunun kod satırından kaynaklandığını biliyorum ama Bu kod satırının neden işe yaramadığını biliyorum, tüm diğer kodumu yayınlamamın sebebi budur. –

0

, sadece bu git repo klonlanmış ettik ve bu benim için çalışıyor:

> Modules.client 
{uploadToAmazonS3: ƒ} 

Hatta client/modules/upload_to_amazon_s3.js için client/modules/upload-to-amazon.js mevcut sizin örnek kodda olduğu gibi tam olarak aynı olması değiştirildi.

Belki de dosyanızın yüklenmesini engelleyen bir sorun var mı? Belki de ACL dosyası read iznine sahip değil midir?