Howto Upload small profile image/avatar to mongodb?

Cant find a example on howto upload a image to the mongodb, that the user want to use for his profile image/avatar.

Is it not okay to upload small images to the db? i’m making a hybrid app so the image have to work offline and I dont know it will work offline if I use Cloudinary, S3 og other online media storage services

If you have an input field with the id ‘upload’ something like the following should work.

if (window.File && window.FileReader && window.FileList && window.Blob)
    for file in template.find('#upload').files
        reader = new FileReader()
        reader.onload = (e) =>
            MyCollection.insert
                name: file.name,
                type: file.type,
                size: file.size
                dataUrl: reader.result
        reader.readAsDataURL(file)

If it’s a good idea depends an the number of users and how big the files are.

Is it posibble to auto resize the image to eg. width 300px?

You can use HTML canvas to resize the image.

1 Like

Do you have a link for a simple example where it uses HTML canvas on the jpg image before upload?