Image upload and converting to raw binary

help
1

I am trying to get images (4 max) from the users’ computer and then convert them to raw binary content. I’m going to use the raw binary content to send to an API. I’m thinking of using Dropzone JS for the image upload (http://www.dropzonejs.com/) but I’m unsure how to manipulate the images after the user selects them without storing them directly to a collection.

I’m open to any other method of image upload as well.

2

The argument to the onDrop function is an array of the files uploaded. Is the data you need in there?

It sounds like you are trying to not store the files at all but in case I’m mistaken I am doing my file processing using amazon lambda scripts (with Dropzone and Slingshot to upload the files to an s3 bucket).

3

This thread Read/write metadata to/from a jpeg image? might have some overlap with your problem.

4

I am able to get the file data when the user drops a file into the UI but
how can I convert that to a base64?

You’re right, I’m not storing the image at all! I’m passing the image to an
API in base64 format.

5

I don’t have much experience with this specific problem but have you tried something like:

onDrop(files) {
  const base64file = new Buffer(files[0]).toString('base64');
  // do your thing with base64file variable...
}
1 Like
6

I will definitely try that out and tell you my results. Thanks for you
help!

7

…and obviously looping through files[1] etc for the additional files if they exist.

8

I tried that out and it did not work since Buffer is defined on the server and when I sent the file to the server to convert it to base64, it just did not work. I did come to a solution though. I changed the way my application accepts files now, through this method: http://www.jasny.net/bootstrap/javascript/#fileinput

Then I was able to access the file through Javascript using $('.fileinput').fileinput(); and that object has the base64 string in it. I used that for my API call and it worked perfectly.

1 Like
9

Hi @simrank where did you see the base64 in the object of $(’.fileinput’).fileinput();? How did you access it? Can you pass that straight to a meteor call?

10

Found it:
$('.fileinput').fileinput()[0].querySelector('img').getAttribute('src')

1 Like