Simple File Uploads in Meteor
Question
All the solutions for file uploads in meteor seem to either point to storing them in the DB, or using an external service such as S3 (which is what we've done in our last project).
BUT
is there a simple way to upload them straight to a folder on the server? (ideally without the use of autoform and the likes).
4 answers
solution1
1 ACCPTED 2015-09-18 11:51:48
Consider using the CollectionFS package, which stores files in a filesystem directory. Here is an example from the docs:
Images = new FS.Collection("images", {
stores: [new FS.Store.FileSystem("images", {path: "~/uploads"})]
});
Note that the path can be any filesystem path, including within the project public folder (if you are alright with the security concerns).
CollectionFS also gives you convenience methods on each file, such as generating a URL.
solution2
1 2015-09-19 04:03:49
We use tomi:upload-jquery , tomi:upload-server packages. It is easy to use and works good.
solution3
0 2017-08-01 08:01:18
I use ostrio:files. Despite messy docs, it is possible to make it work.
solution4
0 2017-08-26 20:26:45
Here's a simply example from https://gist.github.com/shobhitg/5b367f01b6daf46a0287 .
Step 1) Create a javascript file on your meteor's "server" folder ie uploadImageServer.js
//Required packages
import fs from "fs"; //var fs = Npm.require("fs")
import os from "os";
import path from "path";
import busboy from "busboy";
var Busboy = Meteor.npmRequire('busboy');
import express from 'express';
var app = express();
app.get(pageToListingFrom, function (req, res) {
res.send('<html><head></head><body>\
<form method="POST" enctype="multipart/form-data">\
<input type="text" name="textfield"><br />\
<input type="file" name="filefield"><br />\
<input type="submit">\
</form>\
</body></html>');
res.end();
});
// accept POST request on the homepage
var pageToListingFrom = "/"; // Page URL to listen from
app.post(pageToListingFrom, function (req, res) {
var busboy = new Busboy({ headers: req.headers });
busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
//saves the file to this directory
var saveTo = path.join('D:/MeteorApp/server/', filename);
console.log('Uploading: ' + saveTo);
file.pipe(fs.createWriteStream(saveTo));
});
busboy.on('finish', function() {
console.log('Upload complete');
res.writeHead(200, { 'Connection': 'close' });
res.end("That's all folks!");
});
return req.pipe(busboy);
});
var server = app.listen(3000, function () {
var host = server.address().address
var port = server.address().port
console.log('Example app listening at http://%s:%s', host, port)
});
At this point, the server should have started listening to "POSTs" from your localhost's default home page, because the "var pageToListingFrom" is set to your default homepage's url "/". You can change this to anything ie "/home/userprofile";
Step 2) Thereafter, you can post to the listening server via a html FORM or javascrip. For example, on your "client" side's default homepage ie userprofile.html you can use a form similar to the one below to upload to the server.
<html>
<head>
</head>
<body>
<form method="POST" enctype="multipart/form-data">\
<input type="text" name="textfield"> <br>
<input type="file" name="filefield"> <br>
<input type="submit"> <br>
</form>
</body>
</html>
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.