This is a demo app showing how you can upload files with an XMLHttpRequest. Check out the original post here. And the relevant gists here.
This app uses Meteor as a backend, (see here for more info) and VueJS for the frontend. The logic in this demo app is completely the same as if you were to use Meteor (or anything else) for the frontend.
To get started:
# Setup the backend:
cd backend
meteor npm install
meteor -p 3000 # The frontend expects meteor on port 3000
# Setup the frontend
cd ../frontend
npm install
npm run dev
# Now you can browse to localhost:8080
The images are stored in a MongoDB collection named Files
. The data is encoded as
base64 data, as it is very easy and quick to do.
There are a number of reasons why you shouldn't do this in production (or
anywhere for that matter). It is slow, there are file size limitations (16MB for
a MongoDB record I believe) and base64 is ~33% larger than binary.
So please, be aware this is for demonstration purposes only!