Issue#14: Meteor 0.8.x and Blaze compatibility

[lindleycb]

Ported code to Meteor 0.8.x and Blaze as discussed in #14

[lindleycb]

Sorry it took such a long time to get round to this. In the end was much simpler than I expected!

[jase88]

Thanks lindleycb for your fix, but didn't worked out for me with Meteor 0.8.1.3
I'm getting the following error clientside:

Exception in defer callback: Error at _.extend.upload (http://localhost:3000/packages/meteor-file.js?7b94b5401d15af2f9b884b24d42e84624fc516de:196:15) at http://localhost:3000/client/client.js?5ea0e4c468cc46c86d7310c5ccfcd826789c7806:52:31 at wrappedCallback (http://localhost:3000/packages/mongo-livedata.js?26f4a1853dbf09c49d7cc49710b6fa14f83b138b:522:9) at http://localhost:3000/packages/minimongo.js?4ee0ab879b747ffce53b84d2eb80d456d2dcca6d:588:7 at _.extend.withValue (http://localhost:3000/packages/meteor.js?148e9381d225ecad703f4b858769b636ff7a2537:794:17) at http://localhost:3000/packages/meteor.js?148e9381d225ecad703f4b858769b636ff7a2537:379:45 at Object.<anonymous> (http://localhost:3000/packages/meteor.js?148e9381d225ecad703f4b858769b636ff7a2537:822:22) at onGlobalMessage (http://localhost:3000/packages/meteor.js?148e9381d225ecad703f4b858769b636ff7a2537:316:23) Any ideas? :(

[lindleycb]

Can you create a small project that displays this problem as per these instructions:

https://www.eventedmind.com/feed/github-issues-and-reproductions

and I'll see if I can work out what's going wrong

[jase88]

Okay, I created a repo. I didn't open a new issue cause this is EventedMinds repo. I couldn't open a issue for the repo meteor-file that you created (https://github.com/lindleycb/meteor-file/issues doesn't work).

Here's the link:
https://github.com/kerosin/meteor-file-issue-14

Thanks in advance!

[lindleycb]

Hi, Thanks for producing that repo - it helped a lot. I ran this up in the debugger and I think I can see what's happening. The issue is not in the meteor-file package but in the way it's being called and I think that's just all down to the way that closures work.

When you iterate the chosen files:

It looks like you should be passing in the next file but, as this callback won't be called until the file has been inserted in the Files collection, "files[i]" no longer points to the expected file.

So, if you put a breakpoint in the MeteorFile.upload method, you'll see that the "file" parameter is undefined:

If you tweak your code just a little to use $.each instead of a for loop, this doesn't happen and the file uploads correctly:

Just one more thought: I didn't actually have to make any changes to meteor-file.js to port to Meteor 0.8, my changes were just down to the replacement of Spark with Spacebars in the {{#FileUploader}} component. Have you considered using this instead of writing all that template code yourself? There's an EventedMind video about it here:

https://www.eventedmind.com/feed/meteor-file-uploader-part-9-build-a-ui-component

Hope this helps. Cheers,

Chris

[jase88]

Wow thanks for your help! Uploading seems to work fine - great!
Only thing that's not correct working is the progress-bars...Any ideas about that?

I will have into the UI-component-version...

Yes, it helps a lot!
Cheers

[lindleycb]

I noticed that and I think there are a couple of things:
(a) on your version not using the {{#FileUploader}} component: bootstrap-3 changed some of the class names e.g. "bar" becomes "progress-bar" and the completed class needs to go on the bar div not the progress div (if you see what I mean).
(b) if you follow the {{#FileUploader}} way of doing this, I think {{#each files}} will need tweaking to reference the Files collection within the MeteorFile.

Good luck!

[jase88]

Oh wow thanks again! I checked the bootstrap-3 docs and managed to fix it:

    <div class="progress progress-striped">
                <div class="progress-bar {{uploadCompleteClass}}" role="progressbar" aria-valuenow="{{uploadProgress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{uploadProgress}}%">
                        {{uploadProgress}}%
                </div>

and

Template.fileUploadRow.helpers({
    uploadCompleteClass: function(){
        return this.uploadProgress == 100 ? 'progress-bar-success' : '';
    }
});

What do you mean with tweaking {{#each files}} (sorry I'm not a native speaker)? I noticed that multiple file select isn't working - so I guess that what you mean. A MeteorFile can contain multiple files in it's Collection, right? Probably I need to push all files to one MeteorFile instead of creating multiple MeteorFiles?!

Thanks in advance!

[lindleycb]

Sorry for not replying on this earlier - been really busy recently - I'm aware it still needs answering and will hopefully get a chance to look into it before the end of the month.

[lindleycb]

Hi,

Apologies for the delay but I've now looked into this and made a small change to the meteor-file project to support displaying a list of files as you require. I've also created a new github project (https://github.com/lindleycb/meteor-file-example) holding and example usage based on the Chris' screencast example here: https://www.eventedmind.com/feed/meteor-file-uploader-part-9-build-a-ui-component . It all seems to work fine for me (see screenshot below) so hopefully it will for you too!

Good luck!

Chris

[cmather]

Oh cool thanks! I haven't worked on this in a little while. Interested in helping to deploy a new version?

[lindleycb]

Hi Chris, Yep happy to help out if I can be of use. Just let me know what you want me to do.