Uploading Images with react + dropzone

Hi all,

I am struggling to understand the best data structures with mongo in regards to images/videos/media. Can someone please clarify?

Typically I would store my data in a collection object, for example a blogpost which would have

title: 'foo',
author: 'john',
created_at: [date],
...
}```

My inclination is to add a "cover_photo" in with this collection. Is this is right approach? I'm sure I could figure out how to base64 encode a huge string and save it here, but my hunch is that is probably not the best way to go about this.

Should I create a second collection `Images` and tie it's ID somehow?

I am a front-ender trying to get my feet off the ground with Mongo + FS, any help is much appreciated!

Can you clarify, is your cover_photo the image itself or a url pointing to the image being hosted somewhere? Are you storing on a service like s3 or are you trying to actually store the data inside of mongo itself with GridFS?

Thanks for the response @wesleyfsmith. I’m trying to just hit the basics, and store my an image from my file-system (initially) and use GridFS (or something similar).

I’m uncertain of the basics of the server-side code. I really like Dropzone, but I’m not sure how they can work together. Should I call the insert Meteor-method just as I would for another Meteor.call? Or is there more to it on the server-side and this is a special case?

@sburke0708 welcome to the community :slight_smile:

So if you use dropzone, you could use Meteor.call to send the data back to the server to store with say, GridFS. Personally, I’ve never done that. I usually just have the file uploader (or dropzone), send the data directly to amazon s3 for storage using the slingshot library.

That being said, now that you are doing server-side dev there are a lot of options available to you, and I’m sure you could get your strategy with dropzone working.

2 Likes

@wesleyfsmith thank you!

Someone else just mentioned this approach, keeping all images stored separately on AWS and then only storing the URL ref in mongo. I think this makes the most sense. That way i can skip any of the manipulations in and around Mongo and not worry. I’ll certainly check out sling-shot. Is that still current? I’ve been struggling with this issue for a while.

Thanks!

Hi,

Yeah, the good approach is to use slingshot to send your image to S3.
And then, save the URL in your document.

You can make this by many ways, but this way is the best way I think :slight_smile:

2 Likes

we use slingshot to store in cloudinary, that way we can use cloudinary’s transform functions on the way in and on the way out. Using cloudinary you can specific things like resizing dimensions as query string params when you retrieve the image. You can also use cloudinary with S3, then store the image key but retrieve via Cloudinary. We’ve done that too, but moving to cloudinary for the storage too–nice backend analytics and media library.

try the demo

Hi All,

Can you help me how to get the uploaded file name from physical file system, in dropzone.
Per suppose my file name is files/sample.pdf, after uploading how to get the file name sample.pdf
Any help appreciable.

@sandeepmeenuga console.log(files) in your onDrop function. It will be an array of files that you drop - It should be nested in there.

2 Likes

That’s what I do. I upload to AWS via Slingshot and just store the URL in the MongoDB collection. Makes everything much faster, IMO.

1 Like

There is another forum thread here: Slingshot and Imagemagick / grapicksmagic

The title references processing the image but there is some example code about using Slignshot to upload directly to S3.