A little help?

[MattCowski]

Perhaps it's a noob question but I feel overwhelmed and hopefully you can help. I'm learning by building an app (node + mongo + angular + yeoman) and I want to include a simple uploader directive for angular. I assume I copy https://github.com/infowrap/infowrap-filepicker/blob/master/examples/js/app.js and then include https://github.com/infowrap/infowrap-filepicker/blob/master/infowrap-filepicker.coffee in index.html script tag and DI? Are the other files necessary? Is this kinda up to date or should I just learn how to make my own directive based of inkfilepicker docs? Thanks.

[NathanWalker]

This library is up to date with latest from filepicker. It's best used as a bower dependency in your own project. I don't list this as a public bower component, however you can list it as a dependency in your bower.json like this:

"infowrap-filepicker": "git@github.com:infowrap/infowrap-filepicker.git#0.3.5"

Then just run: bower install to pull it into your project.

I would recommend looking at the demo on how to set it up in your angular app, etc. If you run into a snag in setting it up this way, let me know where you get hung up and I'll see if I can assist further.

[MattCowski]

Oh, wow, that makes a lot more sense now. Thanks. Now, any leads on how would I go about adding "crop" functionality? :)

[NathanWalker]

Ah yes adding crop functionality is always fun ;) We implemented it with some custom directives around jCrop and then take the coordinates the user made with jCrop and pass those along to filepickers convert options. (Actually look at filepickers homepage, they use jCrop on the crop example as well)

You then have a variety of options: saving cropped version back to filepicker with writeUrl or write, saving 2 versions so the original stays, or just sticking with the convert call to get your cropped file.

[MattCowski]

Yea, that sounds like the plan. Thanks!

[MattCowski]

btw, I'm using yeoman and it automatically injects bower files and everytime my grunt task runs it overwrites the script location as: <script src="bower_components/infowrap-filepicker/infowrap-filepicker.js"></script> but it should instead be <script src="bower_components/infowrap-filepicker/build/infowrap-filepicker.js"></script>

[NathanWalker]

Is your project on github repo? I'll check it out. Probably just need to tweak grunt setup a tad.

[MattCowski]

Not on there yet. I'll push it soon. btw, I've been stuck on this for hours: When uploading 2 images, why does it iterate only through the first two lines and not go into the filepicker.convert ?

    $rootScope.$on infowrapFilepickerService.events.pickedFiles, (e, originals) ->
      angular.forEach originals, ((original) ->
        $rootScope.newImage = {}
        $rootScope.newImage.original = original
        filepicker.convert original, {width: 580, height: 200, fit: 'crop', quality: 100}, {access: 'public'}, (thumb) ->
          $rootScope.newImage.thumb = thumb
          $timeout ->
            console.log Images.$add $rootScope.newImage
            $rootScope.newImage = ""
      )

[MattCowski]

Nevermind, figured it out.

[NathanWalker]

BTW, There are some parts of the library that have grown and are infowrap specific (primarily the security service implementation infowrapFilepickerSecurity). If you run into those, let me know. I've been wanting to refactor this quite a bit more so that's long overdue.

The directive has grown to have too many confusing options so that could be a lot more straight-forward to understand. At any rate, hope you find it useful and feel free to let me know what you think it needs or what you don't like. :+1:

[NathanWalker]

I want to refactor out all the infowrap stuff, rename it, so that way it's much more easily consumed by various projects.

[MattCowski]

So i've got a buggy version of my repo up, so for the grunt-bower-install task, it builds with the wrong path

more about grunt-bower-install here: https://github.com/stephenplusplus/grunt-bower-install