Animated File Upload Button

## image.js
var express = require( 'express' );
var fs = require( 'fs' );
var multer = require( 'multer' );
var path = require( 'path' );
var randomstring = require( 'randomstring' );

// Router
var router = express.Router();

// Upload storage options
// Unique name with extension
var storage = multer.diskStorage( {
  destination: 'uploads',
    filename: function( req, file, cb ) {
      cb( null, randomstring.generate() + '.jpg' );
    }
} );

// Upload handler
var upload = multer( {
  storage: storage
} );

// Get specific image
router.get( '/upload/:path', function( req, res ) {
  res.sendFile( path.resolve( __dirname + '/../uploads/' + req.params.path ) );
} );

// Image upload
router.post( '/upload', upload.single( 'attachment' ), function( req, res ) {
  // Get name from path
  var parts = req.file.path.split( '/' );
  var file = parts[1].split( '.' )[0];

  // Respond with name
  res.json( {
    name: file
  } );
} );

// Test
router.get( '/test', function( req, res ) {
  res.json( {facial: 'Image management.'} );
} );

// Export
module.exports = router;

## index.html
<html>
<head>

<title>Progress</title>

<link href="favicon.ico" rel="icon">

<!-- Google Fonts -->
<!-- Roboto -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

<!-- Styles -->
<link href="style/progress.css" rel="stylesheet" type="text/css">

</head>
<body>

<!-- File upload -->
<input id="upload" type="file" accept=".jpg,.jpeg">
<label for="upload">
  <!-- SVG content in label -->
  <svg width="56" height="56">
    <!-- Background -->
    <circle cx="28" cy="28" r="28" fill="red"/>

    <!-- Icon -->
    <!-- From Material Design -->
    <path
      class="icon"
      d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"
      fill="white"
      transform="translate( 15, 15 )"/>

    <!-- Animated completion indicator -->
    <!-- Pie slice -->
    <path
      class="pie"
      d="M 28 28 L 28 0 A 28 28 1 0 1 28 0 z"
      fill="red"
      opacity="0"/>

    <!-- Numeric completion indicator -->
    <text
      x="28"
      y="28"
      text-anchor="middle"
      fill="white"
      font-size="14"
      font-weight="700"
      dominant-baseline="central"
      opacity="0">0%</text>
  </svg>
</label>

<!-- Full size image -->
<img id="full" style="visibility: hidden; position: absolute;">

<!-- Progress -->
<script src="script/progress.js"></script>

<!-- Application -->
<script>
let button = new ProgressButton( 'label' );
button.root.addEventListener( ProgressButton.COMPLETE, evt => {
  console.log( evt );
  let image = document.querySelector( '#full' );
  image.src = '/api/image/upload/' + evt.detail.name + '.jpg';
} );
</script>

</body>
</html>

## progress.js
class ProgressButton {
  constructor( path ) {
    this.root = document.querySelector( path );
    this.root.addEventListener( 'click', evt => this.doClick( evt ) );

    this.svg = this.root.querySelector( 'svg' );

    // Hidden file form field
    this.file = document.querySelector( '#' + this.root.getAttribute( 'for' ) );
    this.file.addEventListener( 'change', evt => this.doFile( evt ) );

    // Reference parts
    this.circle = this.svg.querySelector( 'circle' );
    this.complete = this.svg.querySelector( 'text' );
    this.icon = this.svg.querySelector( '.icon' );
    this.pie = this.svg.querySelector( '.pie' );

    // Complete (0 - 100)
    this.percent = 0;
  }

  // Animate to current completion
  progress() {
    // Completed
    // Reset to ready
    if( this.percent == 100 ) {
      this.circle.setAttributeNS( null, 'opacity', 1 );
      this.pie.setAttributeNS( null, 'opacity', 0 );
      this.complete.setAttributeNS( null, 'opacity', 0 );
      this.icon.setAttributeNS( null, 'opacity', 1 );

      this.percent = 0;

      // Allow selection of same file
      // Set value to blank
      // Same file will look like a change
      this.file.value = '';
    }

    // Completion arc calculator
    // http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
    let angle = ( this.percent / 100 ) * 360;
    let radians = ( angle - 90 ) * Math.PI / 180;
    let arc = angle <= 180 ? '0' : '1';
    let slice = {
      x: 28 + ( 28 * Math.cos( radians ) ),
      y: 28 + ( 28 * Math.sin( radians ) )
    };
    let d = [
      'M', 28, 28,
      'L', 28, 0,
      'A', 28, 28, 1, arc, 1, slice.x, slice.y,
      'z'
    ].join( ' ' );

    // Update completion pie
    // Update numeric indicator
    this.pie.setAttributeNS( null, 'd', d );
    this.complete.innerHTML = Math.round( this.percent ) + '%';
  }

  doClick( evt ) {
    // Hold up on file selection
    evt.preventDefault();

    // Not currently uploading
    // Proceed
    if( this.icon.getAttributeNS( null, 'opacity' ) != '0' ) {
      this.file.click();
    }
  }

  // File selected
  doFile( evt ) {
    // No file selected
    // Abort
    if( evt.target.files.length == 0 ) {
      return;
    }

    // Set state for upload reporting
    this.icon.setAttributeNS( null, 'opacity', 0 );
    this.circle.setAttributeNS( null, 'opacity', 0.50 );
    this.pie.setAttributeNS( null, 'opacity', 1 );
    this.complete.innerHTML = '0%';
    this.complete.setAttributeNS( null, 'opacity', 1 );

    // Instantiate
    // Hook events if needed
    if( this.xhr == null ) {
      this.xhr = new XMLHttpRequest();
      this.xhr.addEventListener( 'load', evt => this.doLoad( evt ) );
      this.xhr.upload.addEventListener( 'progress', evt => this.doProgress( evt ) );
    }

    // File to upload
    let data = new FormData();
    data.append( 'attachment', evt.target.files[0] );

    // Send to API
    this.xhr.open( 'POST', '/api/image/upload', true );
    this.xhr.send( data );
  }

  // Upload completed
  // Response recieved
  doLoad( evt ) {
    let data = JSON.parse( this.xhr.responseText );
    console.log( data );

    let event = new CustomEvent( ProgressButton.COMPLETE, {detail: data} );
    this.root.dispatchEvent( event );
  }

  // Upload in progress
  // Reflect values in visualization
  doProgress( evt ) {
    this.percent = ( evt.loaded / evt.total ) * 100;
    this.progress();
  }
}

ProgressButton.COMPLETE = 'progress_complete';
	var express = require( 'express' );
	var fs = require( 'fs' );
	var multer = require( 'multer' );
	var path = require( 'path' );
	var randomstring = require( 'randomstring' );

	// Router
	var router = express.Router();

	// Upload storage options
	// Unique name with extension
	var storage = multer.diskStorage( {
	destination: 'uploads',
	filename: function( req, file, cb ) {
	cb( null, randomstring.generate() + '.jpg' );
	}
	} );

	// Upload handler
	var upload = multer( {
	storage: storage
	} );

	// Get specific image
	router.get( '/upload/:path', function( req, res ) {
	res.sendFile( path.resolve( __dirname + '/../uploads/' + req.params.path ) );
	} );

	// Image upload
	router.post( '/upload', upload.single( 'attachment' ), function( req, res ) {
	// Get name from path
	var parts = req.file.path.split( '/' );
	var file = parts[1].split( '.' )[0];

	// Respond with name
	res.json( {
	name: file
	} );
	} );

	// Test
	router.get( '/test', function( req, res ) {
	res.json( {facial: 'Image management.'} );
	} );

	// Export
	module.exports = router;
	<html>
	<head>

	<title>Progress</title>

	<link href="favicon.ico" rel="icon">

	<!-- Google Fonts -->
	<!-- Roboto -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

	<!-- Styles -->
	<link href="style/progress.css" rel="stylesheet" type="text/css">

	</head>
	<body>

	<!-- File upload -->
	<input id="upload" type="file" accept=".jpg,.jpeg">
	<label for="upload">
	<!-- SVG content in label -->
	<svg width="56" height="56">
	<!-- Background -->
	<circle cx="28" cy="28" r="28" fill="red"/>

	<!-- Icon -->
	<!-- From Material Design -->
	<path
	class="icon"
	d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"
	fill="white"
	transform="translate( 15, 15 )"/>

	<!-- Animated completion indicator -->
	<!-- Pie slice -->
	<path
	class="pie"
	d="M 28 28 L 28 0 A 28 28 1 0 1 28 0 z"
	fill="red"
	opacity="0"/>

	<!-- Numeric completion indicator -->
	<text
	x="28"
	y="28"
	text-anchor="middle"
	fill="white"
	font-size="14"
	font-weight="700"
	dominant-baseline="central"
	opacity="0">0%</text>
	</svg>
	</label>

	<!-- Full size image -->
	<img id="full" style="visibility: hidden; position: absolute;">

	<!-- Progress -->
	<script src="script/progress.js"></script>

	<!-- Application -->
	<script>
	let button = new ProgressButton( 'label' );
	button.root.addEventListener( ProgressButton.COMPLETE, evt => {
	console.log( evt );
	let image = document.querySelector( '#full' );
	image.src = '/api/image/upload/' + evt.detail.name + '.jpg';
	} );
	</script>

	</body>
	</html>
	class ProgressButton {
	constructor( path ) {
	this.root = document.querySelector( path );
	this.root.addEventListener( 'click', evt => this.doClick( evt ) );

	this.svg = this.root.querySelector( 'svg' );

	// Hidden file form field
	this.file = document.querySelector( '#' + this.root.getAttribute( 'for' ) );
	this.file.addEventListener( 'change', evt => this.doFile( evt ) );

	// Reference parts
	this.circle = this.svg.querySelector( 'circle' );
	this.complete = this.svg.querySelector( 'text' );
	this.icon = this.svg.querySelector( '.icon' );
	this.pie = this.svg.querySelector( '.pie' );

	// Complete (0 - 100)
	this.percent = 0;
	}

	// Animate to current completion
	progress() {
	// Completed
	// Reset to ready
	if( this.percent == 100 ) {
	this.circle.setAttributeNS( null, 'opacity', 1 );
	this.pie.setAttributeNS( null, 'opacity', 0 );
	this.complete.setAttributeNS( null, 'opacity', 0 );
	this.icon.setAttributeNS( null, 'opacity', 1 );

	this.percent = 0;

	// Allow selection of same file
	// Set value to blank
	// Same file will look like a change
	this.file.value = '';
	}

	// Completion arc calculator
	// http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
	let angle = ( this.percent / 100 ) * 360;
	let radians = ( angle - 90 ) * Math.PI / 180;
	let arc = angle <= 180 ? '0' : '1';
	let slice = {
	x: 28 + ( 28 * Math.cos( radians ) ),
	y: 28 + ( 28 * Math.sin( radians ) )
	};
	let d = [
	'M', 28, 28,
	'L', 28, 0,
	'A', 28, 28, 1, arc, 1, slice.x, slice.y,
	'z'
	].join( ' ' );

	// Update completion pie
	// Update numeric indicator
	this.pie.setAttributeNS( null, 'd', d );
	this.complete.innerHTML = Math.round( this.percent ) + '%';
	}

	doClick( evt ) {
	// Hold up on file selection
	evt.preventDefault();

	// Not currently uploading
	// Proceed
	if( this.icon.getAttributeNS( null, 'opacity' ) != '0' ) {
	this.file.click();
	}
	}

	// File selected
	doFile( evt ) {
	// No file selected
	// Abort
	if( evt.target.files.length == 0 ) {
	return;
	}

	// Set state for upload reporting
	this.icon.setAttributeNS( null, 'opacity', 0 );
	this.circle.setAttributeNS( null, 'opacity', 0.50 );
	this.pie.setAttributeNS( null, 'opacity', 1 );
	this.complete.innerHTML = '0%';
	this.complete.setAttributeNS( null, 'opacity', 1 );

	// Instantiate
	// Hook events if needed
	if( this.xhr == null ) {
	this.xhr = new XMLHttpRequest();
	this.xhr.addEventListener( 'load', evt => this.doLoad( evt ) );
	this.xhr.upload.addEventListener( 'progress', evt => this.doProgress( evt ) );
	}

	// File to upload
	let data = new FormData();
	data.append( 'attachment', evt.target.files[0] );

	// Send to API
	this.xhr.open( 'POST', '/api/image/upload', true );
	this.xhr.send( data );
	}

	// Upload completed
	// Response recieved
	doLoad( evt ) {
	let data = JSON.parse( this.xhr.responseText );
	console.log( data );

	let event = new CustomEvent( ProgressButton.COMPLETE, {detail: data} );
	this.root.dispatchEvent( event );
	}

	// Upload in progress
	// Reflect values in visualization
	doProgress( evt ) {
	this.percent = ( evt.loaded / evt.total ) * 100;
	this.progress();
	}
	}

	ProgressButton.COMPLETE = 'progress_complete';