<div class="field-group align-items-center">
    <input type="file" id="file" class="a-file " data-multiple-caption="{count} filer valda">
    <label for="file" class="a-button a-button--icon a-file-icon">
        <span class="a-button__text a-file-text">Välj fil</span>
        <svg class="icon a-button__icon">
            <use xlink:href="#icon-upload"></use>
        </svg>
    </label>
    <button type="button" class="a-button a-button--standalone-icon a-button--icon js-remove-file is-hidden">
        <span class="a-button__text u-visuallyhidden">Ta bort</span>
        <svg class="icon a-button__icon">
            <use xlink:href="#icon-trash"></use>
        </svg>
    </button>
</div>
<div class="field-group{{#unless has_preview}} align-items-center{{/unless}}">
	{{#if has_preview}}
	<div class="a-file-preview" data-label="Förhandsvisning">
		<img data-id="filePreview" alt="Förhandsvisning" src="">
	</div>
	{{/if}}
	<input type="{{type}}" id="{{id}}" {{#if is_invalid}}aria-invalid="true"{{/if}} class="a-file {{#if modifier}} {{modifier}}{{/if}}"  data-multiple-caption="{count} filer valda" {{#if is_multiple}} multiple{{/if}} {{#if has_preview}}accept=".jpg, .jpeg, .png, .gif" data-id="fileInput"{{/if}}>
	<label for="{{id}}" class="a-button a-button--icon a-file-icon{{#if color_variant}} background-{{color_variant}} color-{{color_variant}}{{/if}}">
		<span class="a-button__text a-file-text">{{placeholder}}</span>
		{{> @icon id=icon additional_classes="a-button__icon"}}
	</label>
	<button type="button" class="a-button a-button--standalone-icon a-button--icon js-remove-file is-hidden">
		<span class="a-button__text u-visuallyhidden">Ta bort</span>
		{{> @icon id="trash" additional_classes="a-button__icon"}}
	</button>
</div>
{
  "label": "Välj fil",
  "type": "file",
  "id": "file",
  "value": false,
  "placeholder": "Välj fil",
  "icon": "upload",
  "icon2": "trashcan"
}
  • Content:
    @charset 'UTF-8';
    
    .js {
    	@include atom(file) {
    		@extend %u-visuallyhidden;
    
    		&:focus {
    			@extend %input-focus;
    		}
    
    		&.has-icon {
    			padding-right: rhythm(5);
    		}
    
    		&[disabled] {
    			@extend %disabled;
    		}
    
    		@include m(discreet) {
    			@extend %discreet;
    		}
    	}
    
    	@include atom(file-text) {
    		width: auto;
    		max-width: 250px;
    		overflow: hidden;
    		text-overflow: ellipsis;
    		white-space: nowrap;
    	}
    
    	@include atom(file-preview) {
    		position: relative;
    		width: 100%;
    		height: rem(169px);
    		margin-bottom: rhythm(1);
    		overflow: hidden;
    		border-radius: $border-radius;
    		background-color: $color-concrete;
    
    		&::after {
    			content: attr(data-label);
    			position: absolute;
    			top: 50%;
    			left: 50%;
    			transform: translateX(-50%) translateY(-50%);
    			font-size: $size-medium;
    		}
    
    		> img {
    			position: relative;
    			z-index: 2;
    			width: 100%;
    			height: 100%;
    			object-fit: cover;
    			object-position: center;
    
    			&[src=''],
    			&[src='null'] {
    				display: none;
    			}
    		}
    
    		@include bp-up(sm) {
    			width: rem(300px);
    		}
    	}
    }
    
  • URL: /components/raw/file/_file.scss
  • Filesystem Path: src/atoms/file/_file.scss
  • Size: 1 KB
  • Content:
    const inputs = document.querySelectorAll('[type="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();
    	});
    });
    
  • URL: /components/raw/file/file.js
  • Filesystem Path: src/atoms/file/file.js
  • Size: 970 Bytes
  • Content:
    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);
    });
    
  • URL: /components/raw/file/filePreview.js
  • Filesystem Path: src/atoms/file/filePreview.js
  • Size: 947 Bytes

No notes defined.