├── favicon.png ├── bg-empleo.jpg ├── README.md ├── main.js ├── index.html └── main.css /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/byRedHunter/form-upload-image/HEAD/favicon.png -------------------------------------------------------------------------------- /bg-empleo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/byRedHunter/form-upload-image/HEAD/bg-empleo.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Upload Image 2 | Form to upload image 3 | 4 | Preview: https://byredhunter.github.io/form-upload-image/ 5 | 6 | ![image](https://repository-images.githubusercontent.com/297102740/35eacd00-fb2a-11ea-9b4b-2ecaad4c02db) 7 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const $fileInput = document.getElementById('image') 2 | const $dropZone = document.getElementById('result-image') 3 | const $img = document.getElementById('img-result') 4 | 5 | $dropZone.addEventListener('click', () => $fileInput.click()) 6 | 7 | $dropZone.addEventListener('dragover', (e) => { 8 | e.preventDefault() 9 | 10 | $dropZone.classList.add('form-file__result--active') 11 | }) 12 | 13 | $dropZone.addEventListener('dragleave', (e) => { 14 | e.preventDefault() 15 | 16 | $dropZone.classList.remove('form-file__result--active') 17 | }) 18 | 19 | const uploadImage = (file) => { 20 | const fileReader = new FileReader() 21 | fileReader.readAsDataURL(file) 22 | 23 | fileReader.addEventListener('load', (e) => { 24 | $img.setAttribute('src', e.target.result) 25 | }) 26 | } 27 | 28 | $dropZone.addEventListener('drop', (e) => { 29 | e.preventDefault() 30 | 31 | /* console.log(e.dataTransfer) */ 32 | 33 | $fileInput.files = e.dataTransfer.files 34 | const file = $fileInput.files[0] 35 | 36 | uploadImage(file) 37 | }) 38 | 39 | $fileInput.addEventListener('change', (e) => { 40 | /* console.log(e.target.files[0]) */ 41 | const file = e.target.files[0] 42 | 43 | uploadImage(file) 44 | }) 45 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TodoTrabajo || byRedHunter 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 |

¿Que esperas?

17 |

18 | Publica tus empleos y elige a la persona que quieras que lo 19 | resuelva. 20 |

21 |

22 |

23 | 24 |

25 |

Publicar Empleo

26 | 27 | 63 |

64 |

65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap'); 2 | * { 3 | box-sizing: border-box; 4 | } 5 | body { 6 | margin: 0; 7 | padding: 0; 8 | color: #52514f; 9 | font-size: 16px; 10 | font-family: 'Lato', sans-serif; 11 | min-width: 320px; 12 | } 13 | h1, 14 | h2, 15 | h3 { 16 | font-weight: 700; 17 | color: #52514f; 18 | } 19 | h1 { 20 | font-size: 32px; 21 | } 22 | h2 { 23 | font-size: 24px; 24 | } 25 | h3 { 26 | font-size: 18px; 27 | } 28 | main { 29 | min-height: 100vh; 30 | width: 100%; 31 | } 32 | 33 | button { 34 | cursor: pointer; 35 | outline: none; 36 | width: 100%; 37 | height: 40px; 38 | border: none; 39 | border-radius: 5px; 40 | background-color: #ffa800; 41 | text-transform: uppercase; 42 | color: #fbfbfb; 43 | } 44 | 45 | main.publicar--empleo { 46 | background-color: #fbfbfb; 47 | min-height: 100vh; 48 | width: 100%; 49 | padding: 20px; 50 | } 51 | main.publicar--empleo form { 52 | width: 100%; 53 | } 54 | main.publicar--empleo input, 55 | main.publicar--empleo textarea { 56 | width: 100%; 57 | border: none; 58 | padding: 0 0 15px 15px; 59 | outline: none; 60 | color: #397dbc; 61 | background-color: transparent; 62 | border-bottom: 2px solid #52514f; 63 | } 64 | main.publicar--empleo input::placeholder, 65 | main.publicar--empleo textarea::placeholder { 66 | color: #609dd6; 67 | } 68 | main.publicar--empleo input[type='file'] { 69 | border-bottom: none; 70 | } 71 | main.publicar--empleo label { 72 | color: #f3b73f; 73 | } 74 | .main__info { 75 | display: none; 76 | } 77 | .main__form { 78 | width: 100%; 79 | } 80 | .main__form--title { 81 | color: #52514f; 82 | } 83 | .form-group { 84 | width: 100%; 85 | display: flex; 86 | flex-direction: column; 87 | margin-bottom: 30px; 88 | } 89 | .form-group label { 90 | margin-bottom: 15px; 91 | } 92 | .form-group textarea { 93 | min-width: 100%; 94 | height: 100px; 95 | max-height: 200px; 96 | } 97 | .form-file { 98 | width: 100%; 99 | display: flex; 100 | flex-direction: column; 101 | align-items: center; 102 | row-gap: 20px; 103 | margin-bottom: 20px; 104 | } 105 | .form-file__action { 106 | width: 100%; 107 | } 108 | .form-file__action label { 109 | display: block; 110 | } 111 | .form-file__action label.title { 112 | width: 100%; 113 | margin-bottom: 15px; 114 | text-align: center; 115 | } 116 | .form-file__action input { 117 | width: 0; 118 | height: 0; 119 | opacity: 0; 120 | display: none; 121 | } 122 | .form-file__result { 123 | cursor: pointer; 124 | overflow: hidden; 125 | position: relative; 126 | width: 100%; 127 | height: 250px; 128 | background-color: #f2f0f0; 129 | border-radius: 8px; 130 | border: 1px dashed #609dd6; 131 | transition: bacgroundColor 0.3s linear; 132 | z-index: 10; 133 | } 134 | .form-file__result::after { 135 | content: 'Clic para elegir imagen.'; 136 | position: absolute; 137 | top: 0; 138 | bottom: 0; 139 | right: 0; 140 | left: 0; 141 | height: 100%; 142 | width: 100%; 143 | color: #609dd6; 144 | display: flex; 145 | justify-content: center; 146 | align-items: center; 147 | } 148 | .form-file__result img { 149 | width: 100%; 150 | height: 100%; 151 | object-fit: cover; 152 | z-index: 50; 153 | } 154 | .form-file__result--active { 155 | background-color: rgba(82, 81, 79, 0.314); 156 | } 157 | @media screen and (min-width: 600px) { 158 | main.publicar--empleo { 159 | padding-left: 40px; 160 | padding-right: 40px; 161 | } 162 | button { 163 | max-width: 350px; 164 | margin: 0 auto; 165 | } 166 | } 167 | @media screen and (min-width: 768px) { 168 | main.publicar--empleo { 169 | padding-left: 0; 170 | padding-right: 0; 171 | } 172 | .main__form { 173 | width: 80%; 174 | margin: 0 auto; 175 | } 176 | } 177 | @media screen and (min-width: 900px) { 178 | main.publicar--empleo { 179 | padding: 0; 180 | display: grid; 181 | grid-template: 1fr / repeat(2, 1fr); 182 | height: 100vh; 183 | overflow: hidden; 184 | } 185 | .main__info { 186 | background: url('./bg-empleo.jpg'); 187 | background-repeat: no-repeat; 188 | background-size: cover; 189 | background-position: center; 190 | position: relative; 191 | display: flex; 192 | justify-content: center; 193 | align-items: center; 194 | } 195 | .main__info--content { 196 | width: 80%; 197 | max-width: 400px; 198 | z-index: 100; 199 | } 200 | .main__info .content-h1 { 201 | text-transform: uppercase; 202 | letter-spacing: 1.2px; 203 | color: #397dbc; 204 | } 205 | .main__info .content-p { 206 | color: #52514f; 207 | font-size: 1.8rem; 208 | } 209 | .main__info::before { 210 | content: ''; 211 | width: 100%; 212 | height: 100%; 213 | position: absolute; 214 | top: 0; 215 | left: 0; 216 | right: 0; 217 | bottom: 0; 218 | background: linear-gradient( 219 | 125deg, 220 | rgba(243, 183, 63, 0.6), 221 | rgba(96, 157, 214, 0.6) 222 | ); 223 | } 224 | .main__form { 225 | overflow-y: auto; 226 | width: 100%; 227 | padding: 40px; 228 | } 229 | .main__form--title { 230 | margin-top: 0; 231 | margin-bottom: 40px; 232 | } 233 | .form-file__result { 234 | height: 250px; 235 | } 236 | .form-file__result::after { 237 | content: 'Arrastra o dale clic para elegir tu imagen.'; 238 | } 239 | } 240 | --------------------------------------------------------------------------------