Passing array buffer to Meteor gridFS

MongoDB has a document size limit of 16MB. To store larger file sizes, it is recommended to use GridFS.

Now, if you are a meteor user, you can very easily use the Meteor Collection-FS package to store and upload files. But it is slightly different when you actually want to store an object of size larger than 16MB which is not a file. Usually, these scenarios will come in the server side when you generate a large content and want to store that.

I was doing something like this -

//Collection initialisation
var Store = new FS.Store.GridFS("fileuploads");

FileUploads = new FS.Collection("fileuploads", {
  stores: [Store]
});

var buffer = new Buffer(JSON.stringify(jsonObj));
FileUploads.insert(buffer);

I found myself stuck with this error when I tried to use the insert function with the generated data.

DataMan constructor requires a type argument when passed a Buffer

This is actually a mistake in the documentation here - https://github.com/CollectionFS/Meteor-CollectionFS#initiate-the-upload which says the insert function accepts a Buffer object at the server side. It doesn’t. Issue raised here. It accepts a file object with its data set as a buffer object along with a mime type.

Here is how to get it done-

var buffer = new Buffer(JSON.stringify(jsonObj));
var newFile = new FS.File();
newFile.attachData(buffer, {type: 'application/javascript'});
FileUploads.insert(newFile)

Now this will work :)

But we are not done yet !

How are we going to read the data back, if we are doing it at the client side ?

var fs = FileUploads.findOne({_id: fileId});
$.ajax({
  url: fs.url(),
  type: "GET",
  dataType: "binary",
  processData: false,
  success: function(data){
    var reader = new FileReader();
    reader.onload = function (event) {
      // event.target.result contains your data .. TADA!
      // console.log(event.target.result)
    };
    reader.onerror = function (event) {
      console.error(event.target.error);
    };
    reader.readAsBinaryString(new Blob([ data ],
      { type: 'application/octet-stream' }));
  }
});

Any comments and feedback is most appreciated

Update (May 25th, 2016): I just saw that the author of the repo has stopped from maintaining the project. Sorry to hear it. Its still a great library and I hope will help users who might still use this.

Enforcing git commit structure

I love git. Through and through. I love its distributed nature and the immense power it gives to the user. For someone who likes to be in complete control over his code, this was the real deal.

Naturally, I also started to follow the best practices around using git. Two good posts in this regard that I like are

A subject line, gap, then a nice body. Clean git commits. All nice and dandy.

But one thing was always nagging me at the back of my mind. If we are to enforce a process, there should be a way to automate this, and not have a newcomer memorize all the points before starting to make commits.

Git hooks to the rescue ! I had been planning to look into git hooks for some time but somehow didn’t get the time. Well, this was the perfect time.

After a bit of meddling around, I found that git provides hooks to various stages of the commit lifecycle. All at client side. And some at server side too. And guess what, you can run a script to check the commit message and if you don’t like it, you can choose to reject it. Time for some code :)

#!/bin/bash
cnt=0
while IFS='' read -r line || [[ -n "$line" ]]; do
  cnt=$((cnt+1))
  length=${#line}
  if [ $cnt -eq 1 ]; then
    # Checking if subject exceeds 50 characters
    if [ $length -gt 50 ]; then
      echo "Your subject line exceeds 50 characters."
      exit 1
    fi
    i=$(($length-1))
    last_char=${line:$i:1}
    # Last character must not have a punctuation
    if [[ ! $last_char =~ [0-9a-zA-Z] ]]; then
      echo "Last character of the subject line must not have punctuation."
      exit 1
    fi
  elif [ $cnt -eq 2 ]; then
    # Subject must be followed by a blank line
    if [ $length -ne 0 ]; then
      echo "Your subject line follows a non-empty line. Subject lines should always be followed by a blank line."
      exit 1
    fi
  else
    # Any line in body must not exceed 72 characters
    if [ $length -gt 72 ]; then
      echo "The line \"$line\" exceeds 72 characters."
      exit 1
    fi
  fi
done < "$1"

Here, I have just enforced a few basic rules which I feel should be followed by every repo. You can of course choose to modify or extend them.

Just put this code in a file called commit-msg. And drop it in the .git/hooks/ folder of your repo. Don’t forget to make it an executable. And you are done !

Proper gist link here - https://gist.github.com/agnivade/67b42d664ece2d4210c7

Mixing React and jQuery

Recently, I was doing a client project and got a chance to build a site. I decided this would be the perfect opportunity for me to build it in React and sharpen my React skills. Adventure time !

The site was coming up nice and smooth. But being a hardcore jQuery guy, I couldn’t resist myself from using jQuery here and there. The alternative was to spending more effort in reading React docs and implementing everything in React way. Well, you can guess what was about to happen.

I was stuck with this weird error -

Invariant Violation: ..... This probably means the DOM was unexpectedly mutated (e.g. by the browser).

A quick search gave me links to

But none of these solved my issue. I just had a faint idea that it had to be something related to DOM manipulation and my intermixing of jQuery with React was the culprit.

After hours of playing cat and mouse with the bug, I finally located it. It was in these lines -

$("#poPreviewContainer").empty();
POPreviewRendered = React.render(<POPreviewDialog
    poData={this.props.poData}
    poItems={this.props.poItems} />,
    document.getElementById('poPreviewContainer'));

Basically, there is a dialog that I am dynamically populating everytime with new data and putting it inside a div to be shown in the browser. Now, being the jQuery user that I am, I did a .empty() on the div and did a React.render to re-render the new dialog. And it turns out React does not like someone else to empty divs without telling it.

The solution was to use React specific function calls to empty the div.

React.unmountComponentAtNode(document.getElementById('poPreviewContainer'));

A gentle reminder to those of you migrating from jQuery to React. Always think in React. And try to ditch jQuery completely. And if you can’t, have a look at posts like these to help you out :)