Creating subversion

[Nico-L]

Hi @dr-dimitru,

I have a question about the creation of subversion. I am using meteor-files to upload images (as first application. It will handle all file manipulation at the end).

The idea is to allow the user to insert images the the files collection and then crop them with react-cropperjs package as subversion. The crop issues a blob that I transforms into a file.

Then I creation a new subversion entry (this is ugly react code, I'll fiw that when I got a good understanding of what is going on:

this.refs.cropper.getCroppedCanvas().toBlob(function(blob) {
  const fileName = "imageCarre."+self.state.imageExtension;
  var file = new File([blob], fileName, {type: self.state.imageType});
  var update = Images.findOne({_id: self.state.imageId}).fetch()[0].versions;
    update['cropCarre'] = {
      path: file.path,
      size: file.size,
      type: file.type,
      extension: self.state.imageExtension
  }

  const id = self.state.imageId;
  newVersion.call({id, update}, (error) => {
  if (error) {
    Bert.alert("La nouvelle version n'a pas pu être créée : " + error.reason, "danger");
  } else {
    Bert.alert("La nouvelle version du fichier a été créée avec succès", "success");
  }
});

newVersion.call is a meteor call where I update the collection:

export const newVersion = new ValidatedMethod({
  name: 'images.subversion',
  validate: new SimpleSchema({
    id: {type: String},
    update: {type: Object, blackbox: true},

  }).validator(),
  run({id, update}) {
    Images.update(id,{$set: {versions: update } });
  }
});

Problem: the file has no path as the saving in the file system is not handle. Do I have to handle the save through fs-extra, get the path and then update the image.versions?

Is it the right way to perform this or is there a Meteor-files command able to handle the whole process?

Thanks

[dr-dimitru]

Hi @Nico-L , Great question.

Few notes about the package:

1. Core idea is to keep this package with minimal amount of features, but with open API as much as possible. So every developer can implement its own solution with ease;
2. This package is able to handle only main features around managing and uploading files within Web-application, like upload, loading from external source, writing from Buffer to FS, adding to collection from FS.

About subversions:

The data-flow of subversions: [user uploads the file] -> [server receives the file] -> [file processing (creating subversion) on the server] -> [adding subversion data into versions object]

As you see subversion can be managed/added on the server side. If I'm got you correctly you're cropping the file on the Client, it's a bit different, as you will need to upload cropped version again. Isn't better to load file into browser, crop it and then upload to server?

[Nico-L]

The advantage of uploading the original, then cropping subversions is the possibility to make different cropping afterwards. Is it important? will it be even used? Probably not!

So your proposed way will be better.

So to make my mind clearer. The crop will be declined in different thumbnailed subversions as in your example. In that case, Meteor-Files will create one or several thumbnails with the onAfterUpload event added to different subversions. Does the module save a different file for each thumbnail?

I am not sure as I hardly read Coffeescript, so your example is a bit criptic for me. This would need an image manipulation package, this should be the gm function from the cfs:graphicsmagick package, right?

[dr-dimitru]

The advantage of uploading the original, then cropping subversions is the possibility to make different cropping afterwards. Is it important? will it be even used? Probably not!

Not sure if I got you right, but you store original file, and do whatever you need with it, crop, rotate, resize, then just add all modifications (subversions) into versions object

So to make my mind clearer. The crop will be declined in different thumbnailed subversions as in your example. In that case, Meteor-Files will create one or several thumbnails with the onAfterUpload event added to different subversions. Does the module save a different file for each thumbnail?

Nope, onAfterUpload returns you an Object saved to Collection with data about received file. Then you're free to do what ever you want with it, like use gm to create thumbs, or ffmpeg to convert video to different formats. All you need after file processing is add subversion's info into versions object.

I am not sure as I hardly read Coffeescript, so your example is a bit criptic for me. This would need an image manipulation package, this should be the gm function from the cfs:graphicsmagick package, right?

cfs:graphicsmagick is used in example, but you're free to use any lib you want.

[Nico-L]

Nope, onAfterUpload returns you an Object saved to Collection with data about received file. Then you're free to do what ever you want with it, like use gm to create thumbs, or ffmpeg to convert video to different formats. All you need after file processing is add subversion's info into versions object.

I am not sure to get you right. onAfterUpload let me create thumbs and add subversion info to versions object. OK. Then I have to save the different thumbs by myself or does Meteor-Files take care of this during the onAfterUpload events?

[dr-dimitru]

You do it yourself via FilesCollection#collection.update() method

[dr-dimitru]

See an example

[Nico-L]

This is where I got lost in coffeescript. If I understand correctly: for each size:

• create path for the thumb
• copy the ref file on file system as the thumb file, name = sizeName - fileRefName.fileRefExtension
• udpate collection versions. At this point, the version does not exist and is created
• set the copied version file to the size using gm
• update the versions information

The thing I don't get: when is the new thumb file saved on the filesystem? During the gm manipulation? During the FilesCollection#collection.update()?

[dr-dimitru]

Yes, gm takes original image and saves edited version to fs. Path for edited version is set here, and bytes is written here

[Nico-L]

Thanks @dr-dimitru,

I must have a closer look. For the moment, I close the issue. Maybe i'd return for further questions if needed, but it is much clearer now.

Meteor-Files seems perfect for my project, with the right amount of features.