2017-08-19 66 views
5

Podążałem za samouczkiem this do przesyłania zdjęć do Amazon S3, a po wybraniu pliku obrazu z selektora plików wystąpił błąd.Przesyłanie do nieokreślonej usługi Amazon s3 w meteorrze

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

Oto mój kod

nie wydaje się dowiedzieć, co jest przyczyną tego błędu, daj mi znać, jeśli potrzebujesz więcej mojego kodu, ale myślę, że ten obejmuje większość z nich.

klient/szablony/posty/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> 

klienta/template/postów/post_submit.js

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

oba/moduły/_modules.js

Modules  = {}; 
Modules.both = {}; 

klienta/modules/_modules.js

Modules.client = {}; 

server/moduły/_modules.js

Modules.server = {}; 

klient/moduły/upload_to_amazon_s3.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; 

serwer/zawiesia 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/Kolekcje/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; } 
}); 

zarówno metody// insert/files.js

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

Gdzie importujesz te pliki modułów? – Styx

+0

Nie jestem pewien, co masz na myśli, importując te pliki modułów? –

+0

Mam na myśli, możesz pokazać pliki, w których robisz 'import 'lib/modules/...' etc? – Styx

Odpowiedz

0

@ Anders-Kitson Ty mogłem zaoszczędzić sobie sporo czasu, uważnie czytając komunikat o błędzie. Dowiesz się, gdzie jest problem:

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

Linia 36 post_submit.js

Chociaż plik, który pokazał jak post_submit.js ma tylko 5 linii. Jeśli to jest prawda plik, linia wykraczająca jest prawdopodobnie to:

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

on próbuje powiedzieć, że Modules.client jest niezdefiniowany. To jest przyczyną twojego problemu.

+0

Um, przeczytałem błąd i wiem, że jest on spowodowany przez ten wiersz kodu, ale ja nie wiem, dlaczego ta linia kodu nie działa, i to jest cały powód, dla którego opublikowałem cały mój inny kod. –

0

Wiesz, właśnie sklonowany to git repo i działa dla mnie:

> Modules.client 
{uploadToAmazonS3: ƒ} 

nawet przemianowany istniejący client/modules/upload-to-amazon.js do client/modules/upload_to_amazon_s3.js być dokładnie taka sama jak w przykładzie kodu.

Być może jest jakiś problem, który uniemożliwia załadowanie pliku? Może plik ACL nie ma pozwolenia na read?