|
1 | 1 | @using WebUI.Areas.Admin.Models |
2 | 2 | @using Application.Constants |
| 3 | +@using AspNetCoreHero.ToastNotification.Abstractions |
| 4 | +@using AspNetCoreHero.ToastNotification.Notyf |
3 | 5 |
|
4 | 6 | @model UserViewModel |
5 | 7 |
|
|
60 | 62 | <label class="col-md-3 col-form-label">Фото</label> |
61 | 63 | <div class="col-md-9"> |
62 | 64 | <div class="custom-file form-image"> |
63 | | - <input accept=".png,.jpg,.jpeg,.gif,.tif" |
| 65 | + <input accept=".png,.jpg,.jpeg,.gif" |
64 | 66 | type="file" class="custom-file-input" |
65 | 67 | id="customFile"> |
| 68 | + |
66 | 69 | <label class="custom-file-label" for="customFile">Виберіть картинку</label> |
67 | 70 | </div> |
68 | 71 | </div> |
|
133 | 136 |
|
134 | 137 | var $uploadCrop; |
135 | 138 | var $blob; |
136 | | -
|
137 | | - $uploadCrop = $('#cropper').croppie({ |
138 | | - viewport: { |
139 | | - width: 300, |
140 | | - height: 300, |
141 | | - type: 'square' |
142 | | - }, |
143 | | - boundary: { |
144 | | - width: 400, |
145 | | - height: 400 |
146 | | - }, |
147 | | - showZoomer: false, |
148 | | - enforceBoundary: true, |
149 | | - enableExif: true |
150 | | - }); |
| 139 | + var fileName = null; |
| 140 | +
|
| 141 | + function InitCropper() { |
| 142 | + $uploadCrop = $('#cropper').croppie({ |
| 143 | + viewport: { |
| 144 | + width: 300, |
| 145 | + height: 300, |
| 146 | + type: 'square' |
| 147 | + }, |
| 148 | + boundary: { |
| 149 | + width: 400, |
| 150 | + height: 400 |
| 151 | + }, |
| 152 | + showZoomer: false, |
| 153 | + enforceBoundary: true, |
| 154 | + enableExif: true |
| 155 | + }); |
| 156 | + } |
| 157 | + InitCropper(); |
151 | 158 |
|
152 | 159 | function readFile(e) { |
153 | 160 | var reader = new FileReader(); |
|
166 | 173 | $("#profilePicture").addClass("d-none"); |
167 | 174 | } |
168 | 175 |
|
169 | | - document.getElementById("customFile").addEventListener("change", readFile); |
| 176 | + $("#customFile").on("change", function (e) { |
| 177 | + var noInvalidFiles = true; |
| 178 | + if (this.files.length == 1) { |
| 179 | +
|
| 180 | + var file = this.files[0]; |
| 181 | + var array = this.getAttribute("accept").split(","); |
| 182 | + var extension = file.name.substring(file.name.lastIndexOf('.')); |
| 183 | + noInvalidFiles = array.includes(extension); |
| 184 | +
|
| 185 | + if (!noInvalidFiles) { |
| 186 | + fileName = null; |
| 187 | + $blob = null; |
| 188 | + $('#cropper').croppie('destroy'); |
| 189 | + $("#imageBox").addClass("d-none"); |
| 190 | + InitCropper(); |
| 191 | + $("#mainForm").toggleClass("col-xl-7 col-lg-5"); |
| 192 | + alert("Вибрано не підримуваний файл."); |
| 193 | + } |
| 194 | + else |
| 195 | + readFile(e); |
| 196 | + } |
| 197 | + }); |
170 | 198 |
|
171 | 199 | $("#croppImage").on('click', function () { |
172 | 200 | $uploadCrop.croppie('result', { |
|
179 | 207 | $blob = blob; |
180 | 208 | var urlCreator = window.URL || window.webkitURL; |
181 | 209 | var imageUrl = urlCreator.createObjectURL(blob); |
| 210 | + fileName = $('#customFile').val(); |
182 | 211 | $("#profilePicture").attr('src', imageUrl); |
183 | 212 | $("#cropperBox").addClass("d-none"); |
184 | 213 | $("#profilePicture").removeClass("d-none"); |
185 | 214 | }); |
186 | 215 | }); |
187 | 216 |
|
188 | 217 | $("#create-form").submit(function (f) { |
189 | | - //$("#create-form").css('visibility', 'hidden'); |
190 | 218 |
|
191 | 219 | var formData = new FormData(this); |
192 | | - formData.append('fileName', $('#customFile').val()); |
| 220 | + formData.append('fileName', fileName); |
193 | 221 | formData.append('blob', $blob); |
194 | 222 |
|
195 | 223 | try { |
|
0 commit comments