File: Single File

const inputs = document.querySelectorAll('[type="file"]:not(.wpcf7-file)');

Array.prototype.forEach.call(inputs, (input) => {
	const label	 = input.nextElementSibling;
	const labelText	 = label.firstElementChild;
	const labelVal = labelText.innerHTML;
	const removebutton = label.nextElementSibling;

	function handleFileName(e) {
		let fileName = '';
		if (this.files && this.files.length > 1) fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
		else fileName = e.target.value.split('\\').pop();

		if (fileName) labelText.innerHTML = fileName;
		else labelText.innerHTML = labelVal;

		removebutton.classList.remove('is-hidden');
	}

	input.addEventListener('change', handleFileName);

	removebutton.addEventListener('click', () => {
		const fileName = '';
		if (fileName) labelText.innerHTML = fileName;
		else labelText.innerHTML = labelVal;
		removebutton.classList.add('is-hidden');
		input.value = '';
		input.focus();
	});
});

const fileInputs = document.querySelectorAll('input[data-id=fileInput]');

Array.prototype.forEach.call(fileInputs, (fileInput) => {
	const filePreview = fileInput.previousElementSibling.firstElementChild;
	const label	 = fileInput.nextElementSibling;
	const removebutton = label.nextElementSibling;

	const validImgFormats = [
		'image/jpeg',
		'image/png',
		'image/gif',
	];

	function handleFileUpload(inputEvent) {
		const inputFile = inputEvent.target;
		const reader = new FileReader();

		if (validImgFormats.indexOf(inputFile.files[0].type) === -1) {
			console.warning('Välj en bildfil i något av följande filformat: .png, .jpg, and .gif.');
		}

		reader.readAsDataURL(inputFile.files[0]);
		reader.onload = (readerEvent) => {
			filePreview.src = readerEvent.target.result;
		};

		removebutton.addEventListener('click', () => {
			filePreview.src = '';
		});
	}

	fileInput.addEventListener('change', handleFileUpload, false);
});