codebytere/index.html Secret

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Complete file example</title>
  <style>
    html {
      font-family: sans-serif;
    }

    form {
      width: 600px;
      background: #ccc;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid black;
    }

    form ol {
      padding-left: 0;
    }

    form li, div > p {
      background: #eee;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      list-style-type: none;
      border: 1px solid black;
    }

    form img {
      height: 64px;
      order: 1;
    }

    form p {
      line-height: 32px;
      padding-left: 10px;
    }

    form label, form button {
      background-color: #7F9CCB;
      padding: 5px 10px;
      border-radius: 5px;
      border: 1px ridge black;
      font-size: 0.8rem;
      height: auto;
    }

    form label:hover, form button:hover {
      background-color: #2D5BA3;
      color: white;
    }

    form label:active, form button:active {
      background-color: #0D3F8F;
      color: white;
    }
  </style>
</head>
<body>
  <form>
    <div>
      <label for="image_uploads">Choose images to upload</label>
      <input type="file" id="image_uploads" name="image_uploads" multiple>
    </div>
    <div class="preview">
      <p>No files currently selected for upload</p>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>
  <script>
    const input = document.querySelector('input');
    const preview = document.querySelector('.preview');

    input.style.opacity = 0;

    input.addEventListener('change', updateImageDisplay);

    function updateImageDisplay() {
      while(preview.firstChild) {
        preview.removeChild(preview.firstChild);
      }

      const curFiles = input.files;
      if(curFiles.length === 0) {
        const para = document.createElement('p');
        para.textContent = 'No files currently selected for upload';
        preview.appendChild(para);
      } else {
        const list = document.createElement('ol');
        preview.appendChild(list);

        for(const file of curFiles) {
          const listItem = document.createElement('li');
          const para = document.createElement('p');

          para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`;
          listItem.appendChild(para);
          list.appendChild(listItem);
        }
      }
    }

    function returnFileSize(number) {
      if(number < 1024) {
        return number + 'bytes';
      } else if(number > 1024 && number < 1048576) {
        return (number/1024).toFixed(1) + 'KB';
      } else if(number > 1048576) {
        return (number/1048576).toFixed(1) + 'MB';
      }
    }
  </script>
</body>
</html>

## main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

## preload.js
// Empty

## renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.

## styles.css
/* Empty */
	<!DOCTYPE html>
	<html>
	<head>
	<title>Complete file example</title>
	<style>
	html {
	font-family: sans-serif;
	}

	form {
	width: 600px;
	background: #ccc;
	margin: 0 auto;
	padding: 20px;
	border: 1px solid black;
	}

	form ol {
	padding-left: 0;
	}

	form li, div > p {
	background: #eee;
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	list-style-type: none;
	border: 1px solid black;
	}

	form img {
	height: 64px;
	order: 1;
	}

	form p {
	line-height: 32px;
	padding-left: 10px;
	}

	form label, form button {
	background-color: #7F9CCB;
	padding: 5px 10px;
	border-radius: 5px;
	border: 1px ridge black;
	font-size: 0.8rem;
	height: auto;
	}

	form label:hover, form button:hover {
	background-color: #2D5BA3;
	color: white;
	}

	form label:active, form button:active {
	background-color: #0D3F8F;
	color: white;
	}
	</style>
	</head>
	<body>
	<form>
	<div>
	<label for="image_uploads">Choose images to upload</label>
	<input type="file" id="image_uploads" name="image_uploads" multiple>
	</div>
	<div class="preview">
	<p>No files currently selected for upload</p>
	</div>
	<div>
	<button>Submit</button>
	</div>
	</form>
	<script>
	const input = document.querySelector('input');
	const preview = document.querySelector('.preview');

	input.style.opacity = 0;

	input.addEventListener('change', updateImageDisplay);

	function updateImageDisplay() {
	while(preview.firstChild) {
	preview.removeChild(preview.firstChild);
	}

	const curFiles = input.files;
	if(curFiles.length === 0) {
	const para = document.createElement('p');
	para.textContent = 'No files currently selected for upload';
	preview.appendChild(para);
	} else {
	const list = document.createElement('ol');
	preview.appendChild(list);

	for(const file of curFiles) {
	const listItem = document.createElement('li');
	const para = document.createElement('p');

	para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`;
	listItem.appendChild(para);
	list.appendChild(listItem);
	}
	}
	}

	function returnFileSize(number) {
	if(number < 1024) {
	return number + 'bytes';
	} else if(number > 1024 && number < 1048576) {
	return (number/1024).toFixed(1) + 'KB';
	} else if(number > 1048576) {
	return (number/1048576).toFixed(1) + 'MB';
	}
	}
	</script>
	</body>
	</html>
	// Modules to control application life and create native browser window
	const {app, BrowserWindow} = require('electron')

	function createWindow () {
	// Create the browser window.
	const mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true
	}
	})

	// and load the index.html of the app.
	mainWindow.loadFile('index.html')

	// Open the DevTools.
	// mainWindow.webContents.openDevTools()
	}

	// This method will be called when Electron has finished
	// initialization and is ready to create browser windows.
	// Some APIs can only be used after this event occurs.
	app.on('ready', createWindow)

	// Quit when all windows are closed.
	app.on('window-all-closed', function () {
	// On OS X it is common for applications and their menu bar
	// to stay active until the user quits explicitly with Cmd + Q
	if (process.platform !== 'darwin') {
	app.quit()
	}
	})

	app.on('activate', function () {
	// On OS X it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (BrowserWindow.getAllWindows().length === 0) {
	createWindow()
	}
	})

	// In this file you can include the rest of your app's specific main process
	// code. You can also put them in separate files and require them here.
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// All of the Node.js APIs are available in this process.