Добавил пример с подписью файла

examples/script-tag/public/create-sign.js

@@ -7,22 +7,37 @@
   var $createSignature = document.forms.createSignature,
     $certificate = document.getElementById('certificate'),
     $message = document.getElementById('message'),
+    $messageFile = document.getElementById('messageFile'),
+    $messageFileError = document.getElementById('messageFileError'),
     $hash = document.getElementById('hash'),
     $hashError = document.getElementById('hashError'),
     $signature = document.getElementById('signature'),
-    $signatureError = document.getElementById('signatureError');
+    $signatureError = document.getElementById('signatureError'),
 
-  $createSignature.addEventListener('submit', function (event) {
+    // https://support.cryptopro.ru/index.php?/Knowledgebase/Article/View/213/12/ogrnichenie-n-rzmer-podpisyvemogo-fjjl-v-bruzere
+    MAX_FILE_SIZE = 25000000;
+
+  function readFile(messageFile) {
+    return new Promise(function (resolve, reject) {
+      var fileReader = new FileReader();
+
+      fileReader.onload = function () {
+        resolve(this.result);
+      };
+
+      if (messageFile.size > MAX_FILE_SIZE) {
+        reject('Файл для подписи не должен превышать ' + MAX_FILE_SIZE / 1000000 + 'МБ');
+
+        return;
+      }
+
+      fileReader.readAsArrayBuffer(messageFile);
+    });
+  }
+
+  function createSignature(message, hash) {
     var thumbprint = $certificate.value,
-      message = $message.value;
+      detachedSignature = document.querySelector('input[name="signatureType"]:checked').value,
-
-    event.preventDefault();
-
-    $hash.placeholder = 'Вычисляется...';
-    $hash.value = '';
-
-    window.cryptoPro.createHash(message).then(function (hash) {
-      var detachedSignature = document.querySelector('input[name="signatureType"]:checked').value,
       signaturePromise;
 
     detachedSignature = Boolean(Number(detachedSignature));
@@ -40,15 +55,43 @@
 
     signaturePromise.then(function (signature) {
       $signature.value = signature;
+      $signatureError.textContent = '';
     }, function (error) {
       $signature.placeholder = 'Не создана';
-
       $signatureError.textContent = error.message;
     });
-    }, function (error) {
+  }
-      $hash.placeholder = 'Не вычислен';
 
-      $hashError.textContent = error.message;
+  $message.addEventListener('keydown', function() {
+    $messageFile.value = null;
   });
+
+  if ($messageFile) {
+    $messageFile.addEventListener('change', function() {
+      $message.value = '';
+    });
+  }
+
+  $createSignature.addEventListener('submit', function (event) {
+    var messageFile = $messageFile && $messageFile.files.length && $messageFile.files[0],
+      messagePromise = Promise.resolve($message.value);
+
+    if (messageFile) {
+      messagePromise = readFile(messageFile);
+    }
+
+    event.preventDefault();
+
+    messagePromise.then(function (message) {
+      $hash.placeholder = 'Вычисляется...';
+      $hash.value = '';
+
+      window.cryptoPro.createHash(message).then(createSignature.bind(null, message), function (hashError) {
+        $hash.placeholder = 'Не вычислен';
+        $hashError.textContent = hashError.message;
+      });
+    }, function (fileError) {
+      $messageFileError.textContent = fileError;
+    })
   });
 })();

examples/script-tag/public/index.html

@@ -13,6 +13,14 @@
             <textarea id="message" cols="80" rows="5" placeholder="Введите сообщение" autofocus required>Привет мир!</textarea>
             <br><br>
 
+            <!--[if gte IE 10]><!-->
+            <label for="messageFile">Или файл для подписи:</label>
+            <br/>
+            <input id="messageFile" type="file">
+            <pre id="messageFileError"></pre>
+            <!--<![endif]-->
+            <hr>
+
             <label for="certificate">Сертификат: *</label>
             <br>
             <select id="certificate" tabindex="-1" required>