filereader

shama · shama · commit 181bf763119c · 2018-05-22T22:57:03.000-07:00
diff --git a/javascript-filereader/README.md b/javascript-filereader/README.md
@@ -0,0 +1,10 @@
+# JavaScript FileReader
+
+> [https://www.youtube.com/watch?v=-AR-6X_98rM](https://www.youtube.com/watch?v=-AR-6X_98rM)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/javascript-filereader/bear.jpg b/javascript-filereader/bear.jpg
diff --git a/javascript-filereader/bears.csv b/javascript-filereader/bears.csv
@@ -0,0 +1,3 @@
+name,type
+tim,grizzly
+randy,brown
diff --git a/javascript-filereader/index.html b/javascript-filereader/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>JS FileReader</title>
+</head>
+<body>
+
+  <input type="file" />
+
+  <script src="bundle.js" charset="utf-8"></script>
+</body>
+</html>
diff --git a/javascript-filereader/index.js b/javascript-filereader/index.js
@@ -0,0 +1,56 @@
+const input = document.querySelector('input[type="file"]')
+function handleFiles (files) {
+  console.log(files)
+  const reader = new FileReader()
+  reader.onload = function () {
+    // const lines = reader.result.split('\n').map(function (line) {
+    //   return line.split(',')
+    // })
+    // console.log(lines)
+    const img = new Image()
+    img.onload = function () {
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+      context.drawImage(img, 0, 0)
+
+      const imageData = context.getImageData(0, 0, canvas.width, canvas.height)
+      const data = imageData.data
+      for (var i = 0; i <= data.length; i += 4) {
+        const avg = (data[i] + data[i + 1] + data[i + 2]) / 3
+        data[i] = avg
+        data[i + 1] = avg
+        data[i + 2] = avg
+      }
+      context.putImageData(imageData, 0, 0)
+
+      document.body.appendChild(canvas)
+      //canvas.toDataURL()
+      //const csvfile = new Blob(['one,two,three'], { type: 'text/csv' })
+      canvas.toBlob(function (blob) {
+        const form = new FormData()
+        form.append('image', blob, 'moody.jpg')
+        const xhr = new XMLHttpRequest()
+        xhr.open('POST', '/imageupload', true)
+        xhr.send(form)
+      })
+    }
+    img.src = reader.result
+    //document.body.appendChild(img)
+  }
+  //reader.readAsText(files[0])
+  reader.readAsDataURL(files[0])
+}
+
+input.addEventListener('change', function (e) {
+  handleFiles(input.files)
+}, false)
+
+document.addEventListener('dragover', function (e) {
+  e.preventDefault()
+  e.stopPropagation()
+}, false)
+document.addEventListener('drop', function (e) {
+  e.preventDefault()
+  e.stopPropagation()
+  handleFiles(e.dataTransfer.files)
+}, false)
diff --git a/javascript-filereader/package.json b/javascript-filereader/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "javascript-filereader",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "budo index.js:bundle.js"
+  },
+  "author": "Kyle Robinson Young <kyle@dontkry.com> (http://dontkry.com)",
+  "license": "MIT",
+  "devDependencies": {
+    "budo": "^11.2.2"
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+name,type`
	`2`	`+tim,grizzly`
	`3`	`+randy,brown`