Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Save files in Meteor

Create a Meteor app and put the client_/server_ files in a client/server directories. Also, create a public dir to save the uploaded files.{
'change input': function(ev) {
_.each(ev.srcElement.files, function(file) {
<template name="example">
<input type=file />
* @blob (
* @name the file's name
* @type the file's type: binary, text (
* TODO Support other encodings:
* ArrayBuffer / DataURL (base64)
Meteor.saveFile = function(blob, name, path, type, callback) {
var fileReader = new FileReader(),
method, encoding = 'binary', type = type || 'binary';
switch (type) {
case 'text':
// TODO Is this needed? If we're uploading content from file, yes, but if it's from an input/textarea I think not...
method = 'readAsText';
encoding = 'utf8';
case 'binary':
method = 'readAsBinaryString';
encoding = 'binary';
method = 'readAsBinaryString';
encoding = 'binary';
fileReader.onload = function(file) {'saveFile', file.srcElement.result, name, path, encoding, callback);
* TODO support other encodings:
saveFile: function(blob, name, path, encoding) {
var path = cleanPath(path), fs = __meteor_bootstrap__.require('fs'),
name = cleanName(name || 'file'), encoding = encoding || 'binary',
chroot = Meteor.chroot || 'public';
// Clean up the path. Remove any initial and final '/' -we prefix them-,
// any sort of attempt to go to the parent directory '..' and any empty directories in
// between '/////' - which may happen after removing '..'
path = chroot + (path ? '/' + path + '/' : '/');
// TODO Add file existance checks, etc...
fs.writeFile(path + name, blob, encoding, function(err) {
if (err) {
throw (new Meteor.Error(500, 'Failed to save file.', err));
} else {
console.log('The file ' + name + ' (' + encoding + ') was saved to ' + path);
function cleanPath(str) {
if (str) {
return str.replace(/\.\./g,'').replace(/\/+/g,'').
function cleanName(str) {
return str.replace(/\.\./g,'').replace(/\//g,'');

Works a charm mate. Cheers!

Worked perfectly, thanks!

jcampb commented Nov 8, 2012

I've got this working now with a button to trigger the upload rather than when the file is selected...but it refreshes the page when finished. Any suggestions on how to keep meteor from refreshing the page?

The page refresh occurs because Meteor is monitoring the public directory for file changes. I got around it as suggested here:

now i can upload file with these code, but after upload where to get my file ?

i use http://localhost:3000/filename_just_uploaded.jpg

but i cant get it

bcholmes commented Dec 6, 2012

Thanks for this.

You've reversed the names of two files (client_example.js and client_example.html), but otherwise it's really helpful.

Doesn't work for me on my Mac with the latest FireFox (17.0.1).

Firebug show error message: TypeError: ev.srcElement is undefined on line "_.each(ev.srcElement.files, function(file) {" in file: client_example.js.

It does work on Opera, Safari and Chrome. Thanks

saada commented Dec 18, 2012

Just works! Thank you!

janpo commented Dec 25, 2012

@JamieCzuy ev.currentTarget.files it's ok

Thanks a lot for the gist. I was able to successfully upload files using this method, thought I did it a tad differently and for a more narrow use case.

ocombe commented Mar 31, 2013

By the way, for IE10 compatibility you need to use an array buffer. Juste change line 30 in client_save_file.js, replace "blob" by "new Blob([blob])"

Thanks for this! I have a problem though. (through localhost) it crashes Chrome (v27.0.1453.93) on Ubuntu 13.04 with large files(30 MB+). Haven't tested other platforms. Any guesses as to why this might be happening?

From 0.6.0 you need to use Npm.require instead of meteor_bootstrap

fs = Npm.require('fs');

A single regex for cleaning paths and names, for both windows and *nix, could be

return str.replace(/\.\.|\/|\\/g, ''); // And yes I know! Looks like library shelf

Thanks so much for this script. I have a little problem though. I've made it so that the function loops so multiple files can be uploaded at once, by clicking a button. Thing is, when I do more than 1 file, some of the files show up as 0kb in the public folder. As empty files they're useless to me. Ideas? Thanks again!

Thank you so much for this script!
I ended up needing using fs.writeFileSync instead of fs.writeFile.
For some reason, with fs.writeFile, it would only upload an empty file at first. You would then have to upload it again for it to finish the job. It was weird, but then @mike-engel suggested giving fs.writeFileSync a try and ka-bam!

Goddard commented Aug 15, 2013

These does nothing. It doesn't give me an error or nothing, but I can't find the file.

This would work after meteor update to 0.6.5 . The path is wrong.
I find a work round with process.env['PWD'].
Just put it before your path. like following:
chroot = Meteor.chroot || (process.env['PWD'] +'/public') ;

Thank you so much for this, I've tried three other examples and none worked or I misunderstood them. Working beautifully.

I ran into problems using Meteor 6.6.3 where it wasn't saving files. Found this StackOverflow which resolved my problem (Error: ENOENT):

Turns out you can't just use public/myFilename because Meteor changed what the root directory of your app is. When I used "../../../../../public/" it starting working properly.

works fine! after changing to Npm.require and changing the path to reflect new location of chroot in meteor. Beware that uploading to public causes a restart to happen on the server. You should create a folder suffixed by ~ like images~ this will work without meteor restarting or updating the client.

I've uploaded the example to a repo (it's coffee, sorry):

Hi, thanks for the code. Worked well on localhost, but then on production server it is failing for larger files. For files cca > 2MB after some time I receive "404 Error: Page not found" (from Firebug).

Any idea?

ev.srcElement.files doesnt works gives undefined

@piyushcoader try ev.currentTarget.files

I tried it but it doesn't save file to public folder , I have meteor 0.9.3 , changed to
chroot = Meteor.chroot || (process.env['PWD'] +'/public') ;
fs = Npm.require('fs');

any solutions

I tried your example meteor-file-upload got this error
Errors prevented startup:

While building package iron-dynamic-template:
error: no such package: 'blaze'

icolR commented Nov 7, 2014

Works for me on Meteor 1.0 replacing :
ev.srcElement.files -> ev.currentTarget.files
chroot = Meteor.chroot || 'public'; -> chroot = Meteor.chroot || (process.env['PWD'] +'/public') ;
fs = meteor_bootstrap.require('fs') -> fs = Npm.require('fs');

Thanks a lot !

add for meteor 1.0

saveFile: function(blob, name, path, encoding) {
check(blob, Match.Any);
check(name, String);
check(path, String);
check(encoding, String);

I am on meteor 1.0,

Chrome && Opera thowing an error shown below..

Uncaught TypeError: Cannot read property 'files' of undefined

When I tried on Firefox : Error is shown below

TypeError: ev.srcElement is undefined

please help

it worked perfectly for me...Thanks!

typista commented Dec 25, 2014

TypeError: ev.srcElement is undefined

Works for me on Meteor 1.0.1 and 1.0.2 replacing :

30 //'saveFile', file.srcElement.result, name, path, encoding, callback);
31'saveFile',, name, path, encoding, callback);

Can't get this to work in Meteor 1.0.3. Made fixes in comment list. Fails silently without file being written to disk. Permissions are properly set.

I am on Meteor & I get following exception:
Exception while invoking method 'saveFile' TypeError: Object # has no method 'require'

with meteor works perfect for me, thank you;
the only thing I've changed is
fs = __meteor_bootstrap__.require('fs')
fs = Npm.require('fs')
inside the method


ghost commented Nov 20, 2015

the given code is not wokring.
HTML code is written in js file
and js file is written in html file. Blunder mistake

Do you have anywhere full source code where save file is working?

Any one there?

How to change this code to fs write stream, as it is not perfect for Bigger Uploads?, Can you suggest something?

maitrid commented Aug 12, 2016

After looking into different possible solutions to file uploads with Meteor 1.3 and React, I couldn't find a suitable solution. This script helped a great deal. I can upload after a few small tweaks. Of course, for Meteor 1.3 and 1.4, it works without an error after installing fs rather than using fs = Npm.require('fs'):

meteor npm install --save fs

Then, in the server_save_files.js, I added this line on the top:

import fs from 'fs';

Next thing to figure out is: How to implement a progress bar for the upload?

Need to make the following changes to have this working in meteor 1.3

  1. import fs from 'fs'; (instead of fs = meteor_bootstrap.require('fs'))
  2. Change chroot to chroot = '../../../../../public';
  3. In helper function change the ev.srcElement.files to ev.currentTarget.files

Works like a charm after that. Thanks for the tutorial.

code is not working. :(

i am getting error that meteor_bootstrap.require('fs') is not function.

# Thanks alot man #dariocravero

Without any package.


can anyone tell how to create persistence storage in development mode for meteor. Whenever server starts either remove data or give this error
Error: EBUSY: resource busy or locked, rmdir 'C:\Users\admins\Desktop\tripsy\dummy.meteor\local\build\programs\server'
at Error (native)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment