multiple-files.html

buzz · Aug 12, 2020 · 6272b03 · 6272b03
1 parent 2fb29a3
commit 6272b03
Showing 1 changed file with 163 additions and 0 deletions.
diff --git a/examples/multiple-files.html b/examples/multiple-files.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Mediainfo.js Multiple Uploads</title>
+
+    <style>
+    html, body{
+  margin:0;
+  padding:0;
+}
+body * {
+  box-sizing: border-box;
+}
+#wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 8px;
+  position: absolute;
+  width: 100%;
+}
+#fileinput {
+  padding-bottom: 8px;
+}
+#output {
+  height: 100%;
+}
+
+    </style>
+  </head>
+
+  <body>
+
+    <div id="wrapper">
+      <input type="file" id="fileinput" name="fileinput" multiple />
+      <textarea id="output"></textarea>
+    </div>
+
+
+
+    <script src="https://unpkg.com/mediainfo.js/dist/mediainfo.min.js" ></script>
+
+    <script>
+      const fileinput = document.getElementById('fileinput')
+      const output = document.getElementById('output')
+
+
+       async function _finished(){
+
+        console.log('confirmation the file analysis ended')
+
+         // optional run the finall callback method
+      }
+
+       function get_file_info(mediainfo,file){
+
+         let getSize = () => file.size
+           let readChunk = (chunkSize, offset) =>
+            new  Promise((resolve, reject) => {
+              let reader = new FileReader()
+                reader.onload = (event) => {
+                  if (event.target.error) {
+                    reject(event.target.error)
+                  }
+                  resolve(new Uint8Array(event.target.result))
+                }
+                  reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize))
+            })
+
+
+
+         return  mediainfo
+              .analyzeData(getSize, readChunk)
+              .then((result) => {
+
+                //Display outcome in html
+                 output.value = output.value + result
+
+                // or store it in dataObject
+
+                })
+              .catch((error) => {
+
+                  // register error
+                  console.log(error)
+
+              })
+
+
+}
+
+
+async function onChangeFile (mediainfo) {
+      output.value=null;
+     if (fileinput.files.length >=2) { 
+
+
+      for (var i = 0; i < fileinput.files.length;i++) {
+
+                var file = fileinput.files[i];
+                if (file) {
+
+                        await get_file_info(mediainfo,file)
+
+                        // whatever other function you want to run 
+
+
+                       if((i+1)==fileinput.files.length){
+
+                         // end of the loop function
+
+                         //Run callback function
+                         console.log('Task finished, run return');
+                          return _finished();
+
+                       }
+
+                }
+      }
+    }else{
+
+
+
+          let file = fileinput.files[0]
+          if (file) {
+
+
+              await get_file_info(mediainfo,file)
+
+                // whatever other function you want to run 
+
+                console.log('run after get_file_info')
+                return _finished();
+
+
+          }else{
+
+          }
+  }
+
+
+  }
+
+
+
+
+
+
+
+
+
+
+MediaInfo({ format: 'text' }, (mediainfo) => {
+
+  fileinput.addEventListener('change', () => onChangeFile(mediainfo))
+})
+
+
+
+    </script>
+  </body>
+</html>