literalsands / autoform-slingshot

Autoform file upload directive using slingshot

Autoform Slingshot

Work in progress!

Pretty much a clone of yogiben:autoform-file using edgee:slingshot instead of CFS,

NOTICE! There is no tests, so use at your discretion! We are happy for any PR containing tests, and helping this package get to 1.0.

Usage

Follow Slingshot's instructions on setting up a directive, then define the following autoform rules in your schema. If you want to resize before upload the following is an example using thinksoftware:image-resize-client.

Upload a file

The resulting field will contain the URL of the uploaded file.

file: {
  type: String,
  optional:true,
  autoform: {
    type: 'slingshotFileUpload',
    afFieldInput:{
      slingshotdirective: 'myDefinedDirective'
    }
  }
}

Upload a resized picture

The resulting field will contain the URL of the uploaded picture.

We're using the Resize package from

picture_url: {
  type: String,
  optional:true,
  autoform: {
    type: 'slingshotFileUpload',
    afFieldInput:{
      slingshotdirective: {
        directive: 'myDefinedDirective',
        // onBeforeUpload is called once on each file.
        onBeforeUpload: function(file, callback) {
          Resizer.resize(file, {width: 1020, height: 1020, cropSquare: true}, function(err, file) {
            if( err ){
              console.error( err );
              callback( file );
            }else{
              callback( file );
            }
          });
        }
      }
    }
  }
}

Upload a picture (with multiple resized versions)

If you want multiple sizes for a uploaded picture and you want the client to do all the work resizing images for you, you can now define multiple directives:

picture: {
  // This package can also take type: [String],
  // but in that case it will only save the src.
  type: [Object],
  label: 'Select Picture', // (optional, defaults to "Select")
  optional: true, // (optional)
  autoform: {
    type: 'slingshotFileUpload', // (required)
    removeLabel: 'Remove', // (optional, defaults to "Remove")
    afFormGroup: { // (optional)
      label: false
    },
    afFieldInput: {
      // Specify which slingshotdirective to present as thumbnail when  this picture is uploaded, you can use the "key" or "directive".
      thumbnail: 'mobile',
      slingshotdirective: {
        mobile: { // <-- This is the "key" for the "mobile" version.
          directive: "myMobileDirective",
          onBeforeUpload: function(file, callback) {
            // Create a mobile 640x640 size version.
            Resizer.resize(file, {width: 640, height: 640, cropSquare: true}, function(err, file) {
              if( err ){
                console.error( err );
              }
              callback( file );
            });
          }
        },
        large: { // <-- This is the "key" for the "large" version.
          directive: "myLargeDirective",
          onBeforeUpload: function(file, callback) {
            // Create a large 1500x1500 size version.
            Resizer.resize(file, {width: 1500, height: 1500, cropSquare: false}, function(err, file) {
              if( err ){
                console.error( err );
              }
              callback( file );
            });
          }
        },
        original: "myOriginalDirective"
      }
    }
  }
},
// NOTICE! These are required for type: [Object].
'picture.$.key': { type: String },
'picture.$.filename': { type: String },
'picture.$.src': { type: String },
'picture.$.directive': { type: String }

Want to display a picture not done uploading?

Use the helper {{SwapTemp IMAGE_SRC_FROM_COLLECTION}} and it will swap the src with a blob until the image is uploaded and after that it will swap back to src, the user won't even notice the swap. The helper is also available as the function SwapTemp(IMAGE_SRC_FROM_COLLECTION). Happy coding!

Framework support

• Bootstrap 3
• Ionic (Meteoric)