IncidentPicNew.ls

require! {
  React
  RRouter
  request: superagent
  Header: "../components/Header.ls"
  Loading: "../components/Loading.ls"
}

Link = RRouter.Link

Dom = React.DOM
{div, h1, a, button, ul, li, i, span, img} = Dom


IncidentPicSave = React.create-class do
  get-initial-state: ->
    imageURI: null

  #Take picture when mounted.
  component-did-mount: ->
    @take-pic!

  take-pic: !->
    opts =
      quality: 85
      destination-type: Camera.DestinationType.FILE_URI
      encoding-type: Camera.EncodingType.JPEG
      save-to-photo-album: false

    navigator.camera.get-picture do
      #Set state. Note: Bound to @(this)
      (uri) ~>
        @setState imageURI: uri
      (message) -> alert "Failed: #message"
      opts

  save-image: (e) !->
    console.log "save"
    console.log API.usages + "/" + @props.usageNumber + API.newImage
    console.log @state.imageURI

    e.prevent-default!

    do
      state = @~state
      props = @~props
      res <~ request.put API.usages + "/" + @props.usageNumber + API.newImage
        .attach 'image', state.imageURI
        .end
        console.log res
        console.log @state.imageURI
  render: ->
    usageNumber = @props.usageNumber
    nav-back = ~> window.history.back!
    div null,
      Header null,
        * button on-click: nav-back,
            i class-name: "fa fa-chevron-left fa-fw"
        * div class-name: "title", "Picture For #usageNumber"
        * button on-click: @save-image,
            "Save"
      div role: "main",
        img src: @state.imageURI

module.exports = IncidentPicSave

pic.js

var React, RRouter, request, Header, Loading, Link, Dom, div, h1, a, button, ul, li, i, span, img, IncidentPicSave;
React = require('React');
RRouter = require('RRouter');
request = require('superagent');
Header = require('../components/Header.ls');
Loading = require('../components/Loading.ls');
Link = RRouter.Link;
Dom = React.DOM;
div = Dom.div, h1 = Dom.h1, a = Dom.a, button = Dom.button, ul = Dom.ul, li = Dom.li, i = Dom.i, span = Dom.span, img = Dom.img;
IncidentPicSave = React.createClass({
  getInitialState: function(){
    return {
      imageURI: null
    };
  },
  componentDidMount: function(){
    return this.takePic();
  },
  takePic: function(){
    var opts, this$ = this;
    opts = {
      quality: 85,
      destinationType: Camera.DestinationType.FILE_URI,
      encodingType: Camera.EncodingType.JPEG,
      saveToPhotoAlbum: false
    };
    navigator.camera.getPicture(function(uri){
      return this$.setState({
        imageURI: uri
      });
    }, function(message){
      return alert("Failed: " + message);
    }, opts);
  },
  saveImage: function(e){
    var state, props, this$ = this;
    console.log("save");
    console.log(API.usages + "/" + this.props.usageNumber + API.newImage);
    console.log(this.state.imageURI);
    e.preventDefault();
    state = bind$(this, 'state');
    props = bind$(this, 'props');
    request.put(API.usages + "/" + this.props.usageNumber + API.newImage).attach('image', state.imageURI).end(function(res){
      console.log(res);
      return console.log(this$.state.imageURI);
    });
  },
  render: function(){
    var usageNumber, navBack, this$ = this;
    usageNumber = this.props.usageNumber;
    navBack = function(){
      return window.history.back();
    };
    return div(null, Header(null, button({
      onClick: navBack
    }, i({
      className: "fa fa-chevron-left fa-fw"
    })), div({
      className: "title"
    }, "Picture For " + usageNumber), button({
      onClick: this.saveImage
    }, "Save")), div({
      role: "main"
    }, img({
      src: this.state.imageURI
    })));
  }
});
module.exports = IncidentPicSave;
function bind$(obj, key, target){
  return function(){ return (target || obj)[key].apply(obj, arguments) };
}