working on Instagram example; use forms-upload package

package.json

@@ -52,6 +52,7 @@
     "react-cookie": "^0.4.6",
     "react-datetime": "^2.3.2",
     "react-dom": "^15.4.1",
+    "react-dropzone": "^3.12.2",
     "react-helmet": "^3.1.0",
     "react-intl": "^2.1.3",
     "react-redux": "^5.0.1",

packages/example-instagram/lib/components/common/Header.jsx

@@ -20,7 +20,7 @@ const HeaderLoggedIn = ({currentUser}) =>
 
       </div>
 
-      <Components.ModalTrigger label="Upload" size="small">
+      <Components.ModalTrigger label="Upload">
         <PicsNewForm />
       </Components.ModalTrigger>
 

packages/example-instagram/lib/components/pics/PicsDetails.jsx

@@ -25,7 +25,7 @@ const PicsDetails = ({loading, document, currentUser}) => {
 
       <div className="pics-details">
 
-        <div className="pics-details-image"><img src={`http://vulcanjs.org/photos/${document.imageUrl}`}/></div>
+        <div className="pics-details-image"><img src={document.imageUrl}/></div>
         
         <div className="pics-details-sidebar">
           

packages/example-instagram/lib/components/pics/PicsImage.jsx

@@ -4,7 +4,7 @@ const PicsImage = ({imageUrl, onClick}) =>
 
   <div className="pics-image" onClick={onClick}>
     
-    <img src={`http://vulcanjs.org/photos/${imageUrl}`}/>
+    <img src={imageUrl}/>
   
   </div>
 

packages/example-instagram/lib/components/pics/PicsNewForm.jsx

@@ -9,16 +9,16 @@ import { Components, registerComponent, withCurrentUser, getFragment } from 'met
 
 import Pics from '../../modules/pics/collection.js';
 
-const PicsNewForm = ({currentUser}) =>
+const PicsNewForm = ({currentUser, closeModal}) =>
 
   <div>
 
     {Pics.options.mutations.new.check(currentUser) ?
       <div style={{marginBottom: '20px', paddingBottom: '20px', borderBottom: '1px solid #ccc'}}>
-        <h4>Insert New Document</h4>
         <Components.SmartForm 
           collection={Pics}
           mutationFragment={getFragment('PicsItemFragment')}
+          successCallback={closeModal}
         /> 
       </div> :
       null

packages/example-instagram/lib/modules/comments/collection.js

@@ -10,7 +10,6 @@ import resolvers from './resolvers.js';
 import './fragments.js';
 import mutations from './mutations.js';
 import './permissions.js';
-import './parameters.js';
 
 const Comments = createCollection({
 

packages/example-instagram/lib/modules/comments/parameters.js

@@ -1,10 +0,0 @@
-// import { addCallback } from 'meteor/vulcan:core';
-
-// function sortByCreatedAt (parameters, terms) {
-//   return {
-//     selector: parameters.selector, 
-//     options: {...parameters.options, sort: {createdAt: 1}}
-//   };
-// }
-
-// addCallback('comments.parameters', sortByCreatedAt);

packages/example-instagram/lib/modules/icons.js

@@ -1,3 +0,0 @@
-import { Utils } from 'meteor/vulcan:core';
-
-Utils.icons.comment = 'comment';

packages/example-instagram/lib/modules/index.js

@@ -1,9 +1,10 @@
-import { replaceComponent } from 'meteor/vulcan:core';
+import { replaceComponent, Utils } from 'meteor/vulcan:core';
 import './pics/collection.js';
 import './comments/collection.js';
 
 import Layout from '../components/common/Layout.jsx';
 replaceComponent('Layout', Layout);
 
+Utils.icons.comment = 'comment';
+
 import './routes.js';
-import './icons.js';

packages/example-instagram/lib/modules/pics/schema.js

@@ -4,6 +4,9 @@ A SimpleSchema-compatible JSON schema
 
 */
 
+import { getSetting } from 'meteor/vulcan:core';
+import Upload from 'meteor/vulcan:forms-upload';
+
 const schema = {
 
   // default properties
@@ -34,6 +37,12 @@ const schema = {
     viewableBy: ['guests'],
     insertableBy: ['members'],
     editableBy: ['members'],
+    control: Upload,
+    form: {
+      options: {
+        preset: getSetting('cloudinaryPresets').pics
+      },
+    }
   },
   body: {
     label: 'Body',

packages/example-instagram/lib/server/seed.js

@@ -29,7 +29,7 @@ var createPic = function (imageUrl, createdAt, body, username) {
 
   const pic = {
     createdAt,
-    imageUrl,
+    imageUrl: `http://vulcanjs.org/photos/${imageUrl}`,
     body, 
     isDummy: true,
     userId: user._id

packages/example-instagram/package.js

@@ -9,7 +9,8 @@ Package.onUse(function (api) {
     'vulcan:forms',
     'vulcan:routing',
     'vulcan:accounts',
-
+    'vulcan:forms-upload',
+    
     'fourseven:scss',
   ]);
 

packages/vulcan-accounts/imports/ui/components/LoginForm.jsx

@@ -19,7 +19,7 @@ import {
   capitalize
 } from '../../helpers.js';
 
-const loggingInMessage = 'Logging In...';
+const loggingInMessage = 'accounts.logging_in';
 
 export class AccountsLoginForm extends Tracker.Component {
   constructor(props) {

packages/vulcan-i18n-en-us/lib/en_US.js

@@ -30,6 +30,7 @@ addStrings('en', {
   "accounts.or_use": "or use",
   "accounts.info_email_sent": "Email sent.",
   "accounts.info_password_changed": "Password changed.",
+  "accounts.logging_in": "Logging in…",
 
   "forms.submit": "Submit",
   "forms.cancel": "Cancel",