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