Wednesday 15 May 2013

With Meteor, how do I store a file upload's input value to be retrieved on form submit? -



With Meteor, how do I store a file upload's input value to be retrieved on form submit? -

i have form:

<form> <input type="text" placeholder="name"> <input id="picture" type="text" placeholder="/images/picture.png"> <input type="file"> <button type="submit">save changes</button> </form>

now i'm using bootstrap file upload , form much more complex demo purposes stripped down. file input area displays in 2 different ways conditional:

{{#if profile.picture}} shows version of file upload has thumbnail of picture. has button remove/change picture. {{else}} shows fresh upload because profile.picture info empty. {{/if}}

helper

template.profile.helpers({ profile: function() { homecoming profile.findone(id); } });

so can see how i'm using spacebars determine show in page.

events

template.profile.events({ "change #picture-select input": function(event, template) { var fileslist = event.currenttarget.files; if (fileslist.length) { $('#picture').val("/images/" + fileslist[0].name); } else { $('#picture').val(""); } } });

so can retrieve files , send them methods save file , update document. no problem far.

so problem i'm facing is, proper way on form submit, , not when file input changes?

logic:

"submit form": function(event, template) { // perform file upload if fileslist has length ( in input file upload ) // also, best way retrieve this? did in "change #picture-select input" function });

i tempted utilize traditional methods via jquery parse through form, have gut feeling should using type of reactively stored true/false/fileslist value somewhere can retrieve using events/rendered/callbacks/some type of method.

i tried looking @ event.target on save, embedded/massive amounts of arrays overwhelming through.

so guess question is, should doing on the:

"change #picture-select input": function(event, template) {});

to have proper info stored query against on forms submit?

hope made sense... perhaps i'm making complex.

thank you.

if i'm not mistaken, don't need reactive variable this.

you declare var @ top of file , global file (so no worries polluting global namespace). whenever "change" event runs, set var value of event.currenttarget.files, , can access in "submit" event normal variable.

meteor

No comments:

Post a Comment