I am using the following html to allow the user to upload images:
<input class="upload" type="file" id="upload">
I have the following method to upload to Cloudinary:
cloud : function (source) {
cloudinary.uploader.upload(source, function(result) { console.log(result) },
{ public_id: "test" });
},
And the following to detect input and call the method:
'change #upload': function(event, template) {
var imgVal = document.getElementById("upload");
Meteor.call("cloud",imgVal);
},
I receive this error:
Exception while invoking method 'cloud' TypeError: Object #<Object> has no method 'match'
I20150813-10:10:38.007(-4)? at C:\Users\Raj\art\.meteor\local\isopacks\npm-container\npm\node_modules\cloudinary\lib\uploader.js:61:34
I20150813-10:10:38.007(-4)? at call_api (C:\Users\Raj\art\.meteor\local\isopacks\npm-container\npm\node_modules\cloudinary\lib\uploader.js:368:22)
I20150813-10:10:38.008(-4)? at Object.exports.upload (C:\Users\Raj\art\.meteor\local\isopacks\npm-container\npm\node_modules\cloudinary\lib\uploader.js:58:12)
I20150813-10:10:38.008(-4)? at [object Object].Meteor.methods.cloud (app\art.js:132:28)
I20150813-10:10:38.008(-4)? at maybeAuditArgumentChecks (packages/ddp/livedata_server.js:1617:1)
I20150813-10:10:38.008(-4)? at packages/ddp/livedata_server.js:648:1
I20150813-10:10:38.008(-4)? at [object Object]._.extend.withValue (packages/meteor/dynamics_nodejs.js:56:1)
I20150813-10:10:38.008(-4)? at packages/ddp/livedata_server.js:647:1
I20150813-10:10:38.009(-4)? at [object Object]._.extend.withValue (packages/meteor/dynamics_nodejs.js:56:1)
I20150813-10:10:38.009(-4)? at [object Object]._.extend.protocol_handlers.method (packages/ddp/livedata_server.js:646:1)
=> Meteor server restarted
What can I do to fix this?
Image Upload dont support the Meteor.call function.
Try:
'yourcollection'.allow({ <-- without the ''.
insert: function() {return true},
update: function() {return true},
});
put it in your lib/yourcollection.js
cloudinary.uploader.upload
expects the first argument file
to be a string. You are sending an HTMLInputElement
.
You can extract the selected file(s) as a base64 encoded string from the input element using the files
property and FileReader
:
'change #upload': function(event, template) {
var imgVal = document.getElementById("upload");
var files = imgVal.files; // FileList object
// Loop through the FileList and upload each image file.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
Meteor.call("cloud",e.target.result);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
},
(Source adapted from http://www.html5rocks.com/en/tutorials/file/dndfiles/ .)
Please note that cloudinary_npm was designed for server side operation - however I believe the above code would work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.