Skip to content

Commit

Permalink
feat: add upload image component (#66)
Browse files Browse the repository at this point in the history
* Criei um componente de upload de imagem

* feat: Create and adjust the UploadImage component

closes #24

* Made some adjustments in UploadImage component

* feat: A component to upload images, code with corrections made in code review

fic #24

* feat: Made adjustments in the Upload Image component

fix #24
  • Loading branch information
nathalia-84 authored Feb 5, 2024
1 parent ba5cf2a commit 72cb253
Show file tree
Hide file tree
Showing 5 changed files with 187 additions and 0 deletions.
3 changes: 3 additions & 0 deletions src/components/UploadImage/img/photo-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/components/UploadImage/img/placeholder.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/components/UploadImage/img/plus-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 60 additions & 0 deletions src/components/UploadImage/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { Component } from 'pet-dex-utilities';
import './index.scss';
import placeholderImage from './img/placeholder.svg';
import plusIcon from './img/plus-icon.svg';
import photoIcon from './img/photo-icon.svg';

const html = `
<div class="container">
<div class="container__animation">
<div class="container__circle"></div>
<div class="container__circle-duplicate"></div>
</div>
<label for="input-file" class="container__label">
<div class="container__image-container">
<img class="container__placeholder-image" src="${placeholderImage}" alt="Placeholder">
<img class="container__preview-image hidden" data-select="image-preview" alt="Imagem carregada">
</div>
<div class='container__button'>
<img data-select="button-icon" src="${plusIcon}">
</div>
<input class="container__input" id="input-file" name="input-file" type="file" accept="image/*" data-select="upload-input">
</label>
</div>
`;

export default function UploadImage() {
Component.call(this, { html });

const previewImage = this.selected.get('image-preview');
const buttonIcon = this.selected.get('button-icon');
const uploadInput = this.selected.get('upload-input');

const readAndDisplayImage = (file) => {
const reader = new FileReader();
reader.addEventListener('load', (e) => {
const readerTarget = e.target;
previewImage.src = readerTarget.result;
previewImage.classList.remove('hidden');
buttonIcon.src = photoIcon;
});

reader.readAsDataURL(file);
};

const handleInputChange = (e) => {
const inputTarget = e.target;
const file = inputTarget.files[0];

if (file) {
readAndDisplayImage(file);
}
};

uploadInput.addEventListener('change', handleInputChange);
}

UploadImage.prototype = Object.assign(
UploadImage.prototype,
Component.prototype,
);
118 changes: 118 additions & 0 deletions src/components/UploadImage/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
.container {
position: relative;

&__label {
cursor: pointer;
}

&__input {
display: none;
}

&__image-container {
min-width: 186px;
min-height: 186px;

overflow: hidden;

display: flex;

align-items: center;
justify-content: center;

position: relative;

background-color: rgb(0, 52, 89);
border-radius: 50%;
}

&__placeholder-image {
max-width: 100%;

position: absolute;

border-radius: 50%;
}

&__preview-image {
max-width: 100%;

position: absolute;
inset: 0;

object-fit: cover;

&.hidden {
display: none;
}
}

&__button {
width: 20%;
height: 20%;

display: flex;

align-items: center;
justify-content: center;

border: 1px solid rgb(244, 248, 251);

position: absolute;
top: 85%;
left: 60%;

background: rgb(255, 255, 255);
box-shadow: 0 1px 4px 0 rgba(139, 158, 184, 0.2);
border-radius: 10%;
}

&__animation {
position: absolute;
inset: 0;
}

&__circle,
&__circle-duplicate {
width: 100%;
height: 100%;

border: 2px solid rgb(236, 239, 242);

position: absolute;
top: 50%;
left: 50%;

transform: translate(-50%, -50%);
border-radius: 50%;

animation: radar-pulse 6s infinite;
}

&__circle-duplicate {
animation-delay: 2s;
}
}

@keyframes radar-pulse {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}

25% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 1;
}

50% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0.3;
}

75% {
transform: translate(-50%, -50%);
opacity: 0;
}
}

0 comments on commit 72cb253

Please sign in to comment.