Howto Upload small profile image/avatar to mongodb?

help
1

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

2

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.

3

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

4

You can use HTML canvas to resize the image.

1 Like
5

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