* selet#formatselect onchange: submits form;

* download file renamed: hype_conversion.ext;
* styled dropzone and tried to use employ messages;

cgi-bin/pandoc.cgi

@@ -42,7 +42,7 @@ if method == "POST":
     download = submit == "download"
     download_filename = None
     if download:
-        download_filename = "pandoc" + to_type['ext']
+        download_filename = "hype_conversion." + to_type['ext']
 
 
     try:
@@ -72,7 +72,7 @@ if method == "POST":
 
             print "Content-type: {0}".format(to_type['mime'])
             if download:
-                print "Content-Disposition: attachment;filename=\"pandoc.{0}\"".format(to_type['ext'])
+                print "Content-Disposition: attachment;filename=\"hype_conversion.{0}\"".format(to_type['ext'])
             print
             # p = subprocess.check_output('pandoc --from {0} --to {1} "{2}"'.format(ffrom, to, tmp.name), shell=True, stderr=subprocess.STDOUT)
             # print p
@@ -97,7 +97,7 @@ if method == "POST":
             try:
                 print "Content-type: {0}".format(to_type['mime'])
                 if download:
-                    print "Content-Disposition: attachment;filename=\"pandoc.{0}\"".format(to_type['ext'])
+                    print "Content-Disposition: attachment;filename=\"hype_conversion.{0}\"".format(to_type['ext'])
                 print
                 # p = subprocess.check_output('pandoc --from {0} --to {1} "{2}"'.format(ffrom, to, tmp.name), shell=True, stderr=subprocess.STDOUT)
                 # print p

hybrid.css

@@ -231,3 +231,16 @@ input, select, button{
     background: #FFF;
     border: 2px solid #0F0;
 }
+
+div.dz-error-message span{
+    border-bottom: 2px dotted #0F0!important; 
+}
+
+div.dz-details{
+    font-size: 0.8em;
+    margin-top: 20px;
+}
+
+div.ace_print-margin{
+    visibility:hidden!important;
+}

hybrid.html

@@ -40,7 +40,7 @@
           <form id="previewform" method="post" action="/cgi-bin/pandoc.cgi" target="previewiframe">
             <input type="hidden" name="text" id="previewformtext" />
             <input type="hidden" name="from" value="markdown" />
-            <select id="formatselect" name="to">
+            <select id="formatselect" name="to" onchange="this.form.submit()">
               <option value="html">HTML</option>
               <option value="plain">Plain text</option>
               <option value="icml">ICML (InDesign)</option>
@@ -55,7 +55,7 @@
     </div>
   </div>
 
-  <div id="footer"><a href="https://github.com/DigitalPublishingToolkit">Hybrid Publishing Editor</a> is <a href="http://www.gnu.org/copyleft/gpl.html">free software</a> based on <a href="http://daringfireball.net/projects/markdown/">markdown</a>, <a href="http://johnmacfarlane.net/pandoc/">pandoc</a> &amp; <a href="http://ace.c9.io/">ace</a>.
+  <div id="footer"><a href="https://github.com/DigitalPublishingToolkit/hybrideditor">Hybrid Publishing Editor</a> is <a href="http://www.gnu.org/copyleft/gpl.html">free software</a> based on <a href="http://daringfireball.net/projects/markdown/">markdown</a>, <a href="http://johnmacfarlane.net/pandoc/">pandoc</a> &amp; <a href="http://ace.c9.io/">ace</a>.
     <a href="http://networkcultures.org/digitalpublishing/"><img src="imgs/logo_horiz.jpg" class="logo" alt="" ></a>
 
   </div>

hybrid.js

@@ -14,7 +14,7 @@ function get_editor_text () {
 }
 
 $("#previewform").on("submit", function () {
-  // console.log("preview form submit")
+  //console.log("preview form submit")
   $("#previewformtext").val(get_editor_text());
   return true;
 })
@@ -32,6 +32,8 @@ Dropzone.options.dropzone = {
     // console.log("success")
     $("#openmenu").hide();
     file.previewElement.classList.add("dz-success");
+      //    file.previewElement.classList.remove("dz-error-mark");
+
     set_editor(resp);
     var pf = $("#previewform");
     // console.log("about to submit", pf.get(0));

lib/dropzone/dropzone.js

@@ -303,23 +303,23 @@ require.register("dropzone/lib/dropzone.js", function (exports, module) {
       params: {},
       clickable: true,
       ignoreHiddenFiles: true,
-      acceptedFiles: null,
+      acceptedFiles: ".docx",
       acceptedMimeTypes: null,
       autoProcessQueue: true,
       autoQueue: true,
       addRemoveLinks: false,
       previewsContainer: null,
-      dictDefaultMessage: "Drop files here to upload",
+      dictDefaultMessage: "Drop or <u>browse</u> .docx file",
       dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.",
       dictFallbackText: "Please use the fallback form below to upload your files like in the olden days.",
       dictFileTooBig: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
-      dictInvalidFileType: "You can't upload files of this type.",
+      dictInvalidFileType: "File type not allowed",
       dictResponseError: "Server responded with {{statusCode}} code.",
       dictCancelUpload: "Cancel upload",
       dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?",
       dictRemoveFile: "Remove file",
       dictRemoveFileConfirmation: null,
-      dictMaxFilesExceeded: "You can not upload any more files.",
+      dictMaxFilesExceeded: "No more files can be uploaded.",
       accept: function(file, done) {
         return done();
       },
@@ -548,7 +548,7 @@ require.register("dropzone/lib/dropzone.js", function (exports, module) {
       completemultiple: noop,
       maxfilesexceeded: noop,
       maxfilesreached: noop,
-      previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n  <div class=\"dz-success-mark\"><span>✔</span></div>\n  <div class=\"dz-error-mark\"><span>✘</span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
+      previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <!--div class=\"dz-error-mark\"><span>✘</span></div-->\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
     };
 
     extend = function() {