Recommended way to upload images in meteor: No plugins, no external services (Solved)

help
21

Oh wow! I thought you had disappeared! :grinning:

I’m basically in the exact same situation you were in - I want to be able to upload images to the server but want to do it in the most simple possible way.

I do need to validate the userId and and also get some other data from the client too.

You call this:

Meteor.methods({
    checkuploaduser: function (userId) {
        if (userId !=null && this.userId == userId) {
            valid = true;
            picid = userId
        }
    }
});

And then use the variable here:

WebApp.connectHandlers.use('/file', (req, res) => {
if (valid) {

But I don’t know how you are getting it to work, I can’t use valid outside of the Method. Do you remember if that code actually worked for you, or did you end up doing something else?

1 Like
22

I remember it working, I might have called another dependency. I’ll set up a very basic vanilla meteor upload, and send you the code today.

23

That would be extremely cool!

24 
//start client.js
Template.upload.events({
	//call upload function when the file-input element changes
    'change #file-input': function(event){
        upload_function(event);
    },
});

//upload funtion
upload_function = function (event) {
	var file = event.target.files[0];
	var reader = new FileReader();
	reader.onload = function(fileLoadEvent) {
	//call created upload method and pass file name, and file-reader info
	Meteor.call('upload', file.name, reader.result,function(error, result) {
        console.log(result)
		});
	};
  reader.readAsBinaryString(file);
}
//end client.js


//start server.js
import fs from 'fs';
Meteor.methods({
'upload': function(fileinfo, filedata) {  
	//get user info based on current logged in user
    var user_info = Meteor.users.findOne({"_id": this.userId}, {fields: {"_id": 1}}); 
	 if(!user_info){
        return "Nope, not happening";
    }
	//path can be any directory you like, I decided to upload to public
	/*if you want to create directories on the fly,
         you'll need to add some extra code, its really easy.*/
    var path = process.env['METEOR_SHELL_DIR'] + '/../../../public/';
	 
	//add user id to file name and move 
    fs.writeFile(path+user_info._id+fileinfo, filedata, {encoding: 'binary'});
 },
});
//end server.js

//template stuff
<head>
  <title>upload</title>
</head>

<body>
  {{> loginButtons}}
  {{> upload}}
  
</body>


<template name="upload">
  <input id="file-input" class="form-control" type="file">
</template>

I was passing the UserID in the functioncall initially, which is really insecure, that’s why the old bit was not working (I just found the old code).

Now we just check on the server to find the current user, without any client input.

You can add other code to check !user or what not, let me know if you need more help.

The page will reload for everyone because a dir changed, so you can move it to some external dir/service instead (like cloudinary)

1 Like
25

No sir, I shut down a while ago. Cheers,

26

Thanks for much for that! It looks like that’s exactly what I need. I’ll post again if I need help but I “get it” now :smiley:

28

I think this code enables anyone to upload files … after the first authenticated user is enabled … in the file upload session there is nothing to identify who is uploading with the PUT method