Skip to content

Instantly share code, notes, and snippets.

@Ajaxsoap
Forked from jeremyhodges/submit_form.html
Created April 8, 2016 05:52
Show Gist options
  • Save Ajaxsoap/17df5b5ca6773b6e97214a2ce47eaa37 to your computer and use it in GitHub Desktop.
Save Ajaxsoap/17df5b5ca6773b6e97214a2ce47eaa37 to your computer and use it in GitHub Desktop.
Using Dropzone.JS to upload via orion.filesystem with drag and drop support.
<template name="submit_form">
<div class="alert alert-success" style="display: none;" role="alert">
<strong>Your work has been submitted!</strong> You successfully submitted your work. It is now in-review.
</div>
<div class="well">
{{# with job }}
<h3 class="text-info job-name" data-job-id="{{ _id }}">{{ name }}</h3>
<p>{{{ description }}}</p>
{{/ with }}
<div class="form-group">
<div id="dropFrame" class="dropzone" data-file=""></div>
</div>
<div class="form-group" data-required="true">
<label for="status" class="control-label">Status</label>
<select name="status" id="status" required="" data-schema-key="status" autocomplete="off" class="form-control">
<option value="">(Select One)</option>
<option value="Draft">Draft</option>
<option value="Final">Final</option>
</select>
<span class="help-block"></span>
</div>
</div>
<a class="btn btn-success btn-lg btn-submit btn-spacing pull-right">Submit Work</a>
<a class="btn btn-warning btn-lg btn-cancel btn-spacing pull-right">Cancel</a>
</template>
Template.submit_form.events({
'click .btn-submit': function() {
$('.btn-submit').fadeOut();
$('.btn-cancel').fadeOut();
var jobId = $(".job-name").data("job-id");
Work.insert({
job: jobId,
document: {
fileId: $(".dropzone").data("file").fileId,
url: $(".dropzone").data("file").url
},
status: $("#status").val(),
createdBy: Meteor.userId(),
createdAt: new Date().toISOString()
});
Jobs.update(jobId, {
$set: { status: "In-Review" }
});
$('.well').fadeOut('medium', function() {
$('.alert-success').fadeIn();
});
}
});
Template.submit_form.rendered = function() {
Dropzone.autoDiscover = false;
if ($('#dropFrame').length) {
var dropzone = new Dropzone("div#dropFrame", {
url: '/upload',
dictDefaultMessage: 'Drop file here or click to upload.',
maxFiles: 1,
accept: function(file, done) {
var self = this;
var upload = orion.filesystem.upload({
fileList: self.files,
name: file.name,
uploader: 'dropzone'
});
Session.set('isUploading_' + file.name, true);
Session.set('uploadProgress_' + file.name, 0);
Tracker.autorun(function() {
if (upload.ready()) {
if (upload.error) {
Session.set('file_' + file.name, null);
console.log(upload.error);
alert(upload.error.reason);
} else {
Session.set('file_' + file.name, {
fileId: upload.fileId,
url: upload.url
});
$(".dropzone").data("file", {
fileId: upload.fileId,
url: upload.url
});
}
Session.set('isUploading_' + file.name, false);
}
});
Tracker.autorun(function(){
Session.set('uploadProgress_' + file.name, upload.progress());
$(file.previewElement).find(".dz-upload").css('width', upload.progress() + '%');
file.upload.progress = upload.progress();
if(upload.progress() == 100) {
$(file.previewElement).find(".dz-progress").fadeOut();
$(file.previewElement).removeClass("dz-processing").addClass("dz-success");
}
});
}
});
}
}
Template.submit_form.helpers({
job: function() {
var job = Jobs.findOne({ _id: RouterLayer.getParam('jobId') });
return job;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment