1+ const input = document . querySelector ( 'input[type="file"]' )
2+ function handleFiles ( files ) {
3+ console . log ( files )
4+ const reader = new FileReader ( )
5+ reader . onload = function ( ) {
6+ // const lines = reader.result.split('\n').map(function (line) {
7+ // return line.split(',')
8+ // })
9+ // console.log(lines)
10+ const img = new Image ( )
11+ img . onload = function ( ) {
12+ const canvas = document . createElement ( 'canvas' )
13+ const context = canvas . getContext ( '2d' )
14+ context . drawImage ( img , 0 , 0 )
15+
16+ const imageData = context . getImageData ( 0 , 0 , canvas . width , canvas . height )
17+ const data = imageData . data
18+ for ( var i = 0 ; i <= data . length ; i += 4 ) {
19+ const avg = ( data [ i ] + data [ i + 1 ] + data [ i + 2 ] ) / 3
20+ data [ i ] = avg
21+ data [ i + 1 ] = avg
22+ data [ i + 2 ] = avg
23+ }
24+ context . putImageData ( imageData , 0 , 0 )
25+
26+ document . body . appendChild ( canvas )
27+ //canvas.toDataURL()
28+ //const csvfile = new Blob(['one,two,three'], { type: 'text/csv' })
29+ canvas . toBlob ( function ( blob ) {
30+ const form = new FormData ( )
31+ form . append ( 'image' , blob , 'moody.jpg' )
32+ const xhr = new XMLHttpRequest ( )
33+ xhr . open ( 'POST' , '/imageupload' , true )
34+ xhr . send ( form )
35+ } )
36+ }
37+ img . src = reader . result
38+ //document.body.appendChild(img)
39+ }
40+ //reader.readAsText(files[0])
41+ reader . readAsDataURL ( files [ 0 ] )
42+ }
43+
44+ input . addEventListener ( 'change' , function ( e ) {
45+ handleFiles ( input . files )
46+ } , false )
47+
48+ document . addEventListener ( 'dragover' , function ( e ) {
49+ e . preventDefault ( )
50+ e . stopPropagation ( )
51+ } , false )
52+ document . addEventListener ( 'drop' , function ( e ) {
53+ e . preventDefault ( )
54+ e . stopPropagation ( )
55+ handleFiles ( e . dataTransfer . files )
56+ } , false )
0 commit comments