Use dropzonejs with slingshot (and s3)

help
1

I’ve been trying to setup dropzone with slingshot for a coupe of days now.

Slingshot.createDirective('upload', Slingshot.S3Storage, {
  bucket: 'myBucket',
  maxSize: 1024 * 1024 * 1,
  region: 'eu-west-1',
  AWSAccessKeyId: Meteor.settings.server.AWS.AccessKeyId,
  AWSSecretAccessKey: Meteor.settings.server.AWS.SecretAccessKey,
  allowedFileTypes: ['image/png', 'image/jpeg', 'image/gif'],
  authorize: function() {
    if (!this.userId) {
      var message = 'Please login before posting files';
      throw new Meteor.Error('Login Required', message);
    }
    return true;
  },
  key: function(file) {
    return 'uploads/' + file.name + '_' + Date.now();
  }
 });

Template:

Template.dropzoneArea.onRendered(function(){
  if (Meteor.isClient) {
    Dropzone.autoDiscover = false;

    var dropzone = new Dropzone("form#dropzone", {
      accept: function(file, done) {
        var uploader = new Slingshot.Upload('upload');
        uploader.send(file, function (err, downloadUrl) {
          if (err) {
            console.error('Error uploading', uploader);
          } else {
            console.log('success: ' + downloadUrl);
          }
        });
      }
    });
  }
});

[package: https://atmospherejs.com/dbarrett/dropzonejs]

The upload to amazon s3 works fine.
But the ui behavior of dropzonejs is not working correctly (eg. the progressbar and the success check symbol).

Any ideas on how to get that working?

2

Don’t forget setting the ‘url’ property of your dropzone to your bucket url.

Only thing I haven’t found out is how to fetch the downloadUrl after a successful upload

3

I somehow can’t post a link here, but check out issue #31 on the official Slingshot repo.

4

I`m with the same problem of you, did you find a solution for that ?
But i’m using autoform, and i have a photo id array after successfully upload, but how implement the dropzone template in a afQuickfield and get the photoId array returned ?

Template.DropArea.rendered = function(){

  if (Meteor.isClient){

    var arrayOfImageIds = [];

    Dropzone.autoDiscover = false;

    // Adds file uploading and adds the imageID of the file uploaded
    // to the arrayOfImageIds object.

    var dropzone = new Dropzone("form#dropzone", {
        accept: function(file, done){
        Images.insert(file, function(err, fileObj){
            if(err){
              alert("Error");
            } else {
              alert(fileObj._id + " inserido !");
              // gets the ID of the image that was uploaded
              var imageId = fileObj._id;
              // do something with this image ID, like save it somewhere
              arrayOfImageIds.push(imageId);
            };
        });
        }
    });
  };

};

how can i get arrayOfImageIds on another template ?
thanks.

5

I found autoform hooks … i can pass the arrayOfImageIds in a hook of autoform ? It’s a good idea ?