This repository has been archived on 2022-11-26. You can view files and clone it, but cannot push or open issues or pull requests.
IcyNet.eu/views/user/partials/avatar.pug

166 lines
4.1 KiB
Plaintext
Raw Normal View History

2017-08-25 16:42:30 +00:00
.rel.cropbox
2018-01-29 12:00:06 +00:00
.row#fileChoose
.col
h3 Current Avatar
.avatar
include ../../includes/avatar.pug
.col
.alert.alert-danger#avatarAlert(style="display: none")
.form-group
label(for="#fileinput") Choose File
input.form-control-file#fileinput(type="file", aria-labelledby="#maxFileText")
small#maxFileText Max file size: 5 MB, only .png and .jpg allowed
.content#crop(style="display: none;")
h3 Crop the Image
.alert.alert-info#cropAlert(style="display: none;") Uploading..
img.preview#imageCropTag
2017-08-25 16:42:30 +00:00
script.
2018-01-29 12:00:06 +00:00
function failAlert (msg) {
$('#avatarAlert').text(msg)
$('#avatarAlert').show()
2017-08-25 16:42:30 +00:00
}
function dataURItoBlob (dataURI) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var byteString = atob(dataURI.split(',')[1])
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length)
// create a view into the buffer
var ia = new Uint8Array(ab)
// set the bytes of the buffer to the correct values
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
// write the ArrayBuffer to a blob, and you're done
var blob = new Blob([ab], {type: mimeString})
return blob
}
function cropReady() {
2018-01-29 12:00:06 +00:00
let cropargs = $('#imageCropTag').cropper('getData')
let cropimage = $('#imageCropTag').cropper('getCroppedCanvas')
2017-08-25 16:42:30 +00:00
2018-01-29 12:00:06 +00:00
$('#btnUpload').show()
$('#btnDone').hide()
$('#imageCropTag').attr('src', cropimage.toDataURL())
$('#imageCropTag').show()
$('#imageCropTag').cropper('destroy')
2017-08-25 16:42:30 +00:00
let called = false
2018-01-29 12:00:06 +00:00
$('#btnUpload').click(function (e) {
2017-08-25 16:42:30 +00:00
if (called) return
called = true
2018-01-29 12:00:06 +00:00
$('#btnUpload').hide()
$('#cropAlert').show()
2017-08-25 16:42:30 +00:00
let formData = new FormData()
formData.append('image', dataURItoBlob(fr.result))
for (let i in cropargs) {
formData.append(i, cropargs[i])
}
$.ajax({
type: 'POST',
url: '/api/avatar',
data: formData,
processData: false,
contentType: false,
success: function (data) {
2018-01-29 12:00:06 +00:00
$('avatarModal').modal('hide')
2017-08-25 16:42:30 +00:00
window.location.reload()
},
error: function (err) {
if (err.responseJSON && err.responseJSON.error) {
2018-01-29 12:00:06 +00:00
failAlert(err.responseJSON.error)
2017-08-25 16:42:30 +00:00
}
2018-01-29 12:00:06 +00:00
cancel()
2017-08-25 16:42:30 +00:00
}
})
})
}
function ready (blob) {
let match = blob.match(/data:image\/(\w+);/)
let screenlen = $('.mobview').is(':visible')
2017-08-25 16:42:30 +00:00
if (!match) {
2018-01-29 12:00:06 +00:00
return failAlert('Not an image file!')
2017-08-25 16:42:30 +00:00
}
if (match[1] !== 'png' && match[1] !== 'jpg' && match[1] !== 'jpeg') {
2018-01-29 12:00:06 +00:00
return failAlert('Unsupported image file')
2017-08-25 16:42:30 +00:00
}
2018-01-29 12:00:06 +00:00
$('#imageCropTag').attr('src', fr.result).hide()
$('#fileChoose').hide()
$('#btnUpload').hide()
$('#btnDone').show()
$('#crop').show()
$('#imageCropTag').cropper({
2017-08-25 16:42:30 +00:00
aspectRatio: 1 / 1,
minContainerHeight: screenlen ? 128 : 512,
minContainerWidth: screenlen ? 128 : 512,
2017-08-25 16:42:30 +00:00
viewMode: 1
})
}
2018-01-29 12:00:06 +00:00
function cancel() {
$('#fileChoose').show()
$('#cropAlert').hide()
$('#btnDone').hide()
$('#btnUpload').hide()
$('#crop').hide()
$('#imageCropTag').cropper('destroy')
fr = null
}
2017-08-25 16:42:30 +00:00
function handleFileSelect() {
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
2018-01-29 12:00:06 +00:00
return failAlert('The File APIs are not fully supported in this browser.')
2017-08-25 16:42:30 +00:00
}
let input = document.getElementById('fileinput')
if (!input.files) {
2018-01-29 12:00:06 +00:00
return failAlert('This browser doesn\'t seem to support the `files` property of file inputs.')
}
if (!input.files[0]) {
return failAlert('Please select a file.')
}
if (input.files[0].size > 5000000) {
return failAlert('This file is too big. Max: 5 MB')
2017-08-25 16:42:30 +00:00
}
2018-01-29 12:00:06 +00:00
file = input.files[0]
fr = new FileReader()
fr.readAsDataURL(file)
fr.addEventListener('load', function (e) {
ready(fr.result)
})
2017-08-25 16:42:30 +00:00
}
2018-01-29 12:00:06 +00:00
$(window).ready(function () {
$('#avatarModal').on('hidden.bs.modal', function (e) {
cancel()
})
2017-08-25 16:42:30 +00:00
2018-01-29 12:00:06 +00:00
$('#fileinput').on('change', function (e) {
e.preventDefault()
handleFileSelect()
})
2017-08-25 16:42:30 +00:00
2018-01-29 12:00:06 +00:00
$('#btnDone').click(function (e) {
cropReady()
})
2017-08-25 16:42:30 +00:00
})