-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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