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/partials/avatar.pug

157 lines
3.8 KiB
Plaintext
Raw Normal View History

2017-08-25 16:42:30 +00:00
.rel.cropbox
link(rel="stylesheet", type="text/css", href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css")
script(src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.js")
.otherdata
h3 Current Avatar
.avatar
include ../includes/avatar.pug
.inputting
h3 Upload new
.message.error
input(type="file", id="fileinput")
.editor(style="display: none")
h3 Crop the image
img.preview(id="image")
.buttons
.button#done Done
.button#cancel Cancel
.button#upload Upload Now
script.
window.jQuery = $
function message (msg) {
$('.message').text(msg)
$('.message').show()
}
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() {
let cropargs = $('#image').cropper('getData')
let cropimage = $('#image').cropper('getCroppedCanvas')
$('#upload').show()
$('#done').hide()
$('.preview').attr('src', cropimage.toDataURL())
$('.preview').show()
$('#image').cropper('destroy')
let called = false
$('#upload').click(function (e) {
if (called) return
called = true
$('#upload').hide()
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) {
window.Dialog.close()
window.location.reload()
},
error: function (err) {
if (err.responseJSON && err.responseJSON.error) {
message(err.responseJSON.error)
}
$('#cancel').click()
}
})
})
}
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) {
return message('Not an image file!')
}
if (match[1] !== 'png' && match[1] !== 'jpg' && match[1] !== 'jpeg') {
return message('Unsupported image file')
}
$('#image').attr('src', fr.result).hide()
$('.inputting').hide()
$('.otherdata').hide()
$('#upload').hide()
$('#done').show()
$('.editor').show()
$('#image').cropper({
aspectRatio: 1 / 1,
minContainerHeight: screenlen ? 128 : 512,
minContainerWidth: screenlen ? 128 : 512,
2017-08-25 16:42:30 +00:00
viewMode: 1
})
}
function handleFileSelect() {
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
return message('The File APIs are not fully supported in this browser.')
}
let input = document.getElementById('fileinput')
if (!input.files) {
message('This browser doesn\'t seem to support the `files` property of file inputs.')
} else if (!input.files[0]) {
message('Please select a file.')
} else {
file = input.files[0]
fr = new FileReader()
fr.readAsDataURL(file)
fr.addEventListener('load', function (e) {
ready(fr.result)
})
return
}
}
$('#fileinput').on('change', function (e) {
e.preventDefault()
handleFileSelect()
})
$('#cancel').click(function (e) {
$('.inputting').show()
$('.otherdata').show()
$('.editor').hide()
$('#image').cropper('destroy')
})
$('#done').click(function (e) {
cropReady()
})
$('.message').hide()