Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cant show inserted image #66

Closed
msio opened this issue Apr 9, 2016 · 16 comments
Closed

cant show inserted image #66

msio opened this issue Apr 9, 2016 · 16 comments

Comments

@msio
Copy link

msio commented Apr 9, 2016

hi,

I use thus code

    {{#if currentFile}}
        Uploading <b>{{currentFile.file.name}}</b>:
        <span id="progress">{{progress}}%</span>
        <img src="{{fileURL imageFile}}" alt="{{imageFile.name}}"/>
    {{else}}
        <input id="fileInput" type="file"/>
    {{/if}}
    <hr>

and that in template helper

   imageFile: function () {
        return InterestIcons.collection.findOne({});
    }

and cant see the uploaded image

Best regards

@msio
Copy link
Author

msio commented Apr 9, 2016

picture is uploaded server:

Meteor.Files Debugger: [MeteorFileWrite] {name: K8g3CxveXuPCswMhQ, meta:[object Object]}
I20160409-22:51:54.725(2)? Meteor.Files Debugger: Received chunk #1 of 1 chunks, file: dance-icon.png
I20160409-22:51:54.802(2)? Meteor.Files Debugger: [MeteorFileWrite] {name: K8g3CxveXuPCswMhQ, meta:[object Object]}
I20160409-22:51:54.802(2)? Meteor.Files Debugger: Received chunk #-1 of 1 chunks, file: dance-icon.png
I20160409-22:51:54.811(2)? Meteor.Files Debugger: The file dance-icon.png (binary) was saved to ~/interests/K8g3CxveXuPCswMhQ.png

on the client:

Meteor.Files Debugger: [insert()]
files.coffee:878 Meteor.Files Debugger: Connection established continue() upload
files.coffee:884 insert: 121.977ms

@dr-dimitru
Copy link
Member

Have you subscribed to this data? Please see this example

@dr-dimitru
Copy link
Member

Also you need to change template to:

    {{#if currentFile}}
        Uploading <b>{{currentFile.file.name}}</b>:
        <span id="progress">{{progress}}%</span>
    {{else}}
        <input id="fileInput" type="file"/>
    {{/if}}
    <hr>
    {{#if imageFile}}
         <img src="{{fileURL imageFile}}" alt="{{imageFile.name}}"/>
    {{/if}}

@msio
Copy link
Author

msio commented Apr 9, 2016

server

Meteor.publish('files.images.all', function () {
    return InterestIcons.collection.find({});
});

client

Router.route('/interests/new', {
    name: 'newInterest',
    waitOn: function () {
        return [Meteor.subscribe('InterestType'),Meteor.subscribe('files.images.all')];
    }
});

@dr-dimitru
Copy link
Member

Does my comment about template fix this issue?

@msio
Copy link
Author

msio commented Apr 9, 2016

unfortunately no .. looks better

I20160409-22:58:32.321(2)? Meteor.Files Debugger: [findOne("Azyz5KMzneroddsWW")]
I20160409-22:58:32.322(2)? Meteor.Files Debugger: [download(/cdn/storage/InterestIcons/Azyz5KMzneroddsWW/original/Azyz5KMzneroddsWW.png, original)]
W20160409-22:58:32.324(2)? (STDERR) Meteor.Files Debugger: [download(/cdn/storage/InterestIcons/Azyz5KMzneroddsWW/original/Azyz5KMzneroddsWW.png)] [404] File not found

@msio
Copy link
Author

msio commented Apr 9, 2016

but the image is in filesystem I checked it

@dr-dimitru
Copy link
Member

Okay, I saw from you previous issue, what you're using path relative to you user (starts with ~)
Could you try to change it to absolute path?

@dr-dimitru
Copy link
Member

Or even try to keep package's default (for testing purpose)

@msio
Copy link
Author

msio commented Apr 9, 2016

I have it but I didnt want to publish it ;)

@msio
Copy link
Author

msio commented Apr 9, 2016

It works right know but It finds only one image but I want to display curently uploaded

@dr-dimitru
Copy link
Member

Then do something like:

Template.uploadForm.onCreated(function () {
  this.uploadedFile = new ReactiveVar(false);
});

Template.uploadForm.helpers({
  currentFile: function () {
    return Template.instance().currentFile.get();
  },
  uploadedFile: function () {
    return Template.instance().uploadedFile.get();
  }
});

Template.uploadForm.events({
  'change #fileInput': function (e, template) {
    if (e.currentTarget.files && e.currentTarget.files[0]) {
      var file = e.currentTarget.files[0];

      template.currentFile.set(Images.insert({
        file: file,
        onUploaded: function (error, fileObj) {
          if (error) {
            alert('Error during upload: ' + error);
          } else {
            // Two options
            // First (no need for subscription):
            template.uploadedFile.set(fileObj);
            // Second (subscription needed):
            template.uploadedFile.set(InterestIcons.collection.findOne({_id: fileObj._id}));
          }
          template.currentFile.set(false);
        },
        streams: 'dynamic',
        chunkSize: 'dynamic'
      }));
    }
  }
});

@dr-dimitru
Copy link
Member

I'm off for today, will check you reply tomorrow

@msio
Copy link
Author

msio commented Apr 9, 2016

I figured it out with similar implementation .. thanks a lot man :)

@dr-dimitru
Copy link
Member

Solved? Right?

@msio
Copy link
Author

msio commented Apr 14, 2016

that's right .. thanks for your support :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants