CODEWITHSUNDEEP
javascriptfilemeteoriron-router
JacobPariseau
JacobPariseau

Reputation: 195

Pass file across route in Meteor

One one page, I have a file selector input. When the user selects a file, I would like user to be directed to a separate route that contains an interactive image cropper that is used to prepare the image before I upload it to the server. Since I would like to be able to use the back button to escape from the cropper, it only makes sense to do this in a separate route. I am using iron-router for this. 

Template.myTemplate.events({
    'change input[type="file"]': function(e, t) {
        Router.go('Crop');
    }
});

This successfully takes me to the crop page. At this point though I am not sure how to get the file reference from myTemplate to Crop. The code below is what I was successfully using to draw the uploaded image into a canvas when they were in the same template.

var reader = new FileReader();
reader.onload = function(e) {
    img = new Image();
    img.onload = function() {
         //Draw image into canvas element
    };
    img.src = e.target.result;
};
reader.readAsDataURL(e.target.files[0]);

I just need to find a way to transfer the file reference when I change routes.

Upvotes: 1

Views: 90

Answers (1)

JVercout
JVercout

Reputation: 130

You are not gonna be able to get the file reference from myTemplate from the Crop template. As soon as you call Crop template, my template is unload and not available anymore.

On the change event, you can store the file reference into an variable in your application scope. And call this from the Crop template.

On top of your template file:, or into your client/app.js 

var myFile;

Into your change event: 

Template.myTemplate.events({
  'change input[type="file"]': function(e, t) { 
  myFile = e.currentTarget.files[0];  
  Router.go('Crop'); 
  } 
});

Into your Crop route, just use myFile variable wherever you want!

Upvotes: 1

Related Questions