turbo #4
|
@ -9,21 +9,6 @@ export default class extends Controller {
|
||||||
}
|
}
|
||||||
|
|
||||||
connect() {
|
connect() {
|
||||||
console.log('image', this.avatarImageValue)
|
|
||||||
console.log('id', this.userIdValue)
|
|
||||||
|
|
||||||
/*
|
|
||||||
const formElement = document.getElementById('avatarDropzone')
|
|
||||||
const dzMessage = document.getElementsByClassName('dz-message')
|
|
||||||
formElement.style.backgroundImage = `url('${this.avatarImageValue}')`
|
|
||||||
formElement.style.backgroundRepeat = 'no-repeat'
|
|
||||||
formElement.style.backgroundPosition = 'center center'
|
|
||||||
formElement.style.backgroundSize = 'auto'
|
|
||||||
formElement.style.borderRadius = '25px'
|
|
||||||
console.log('formelement', formElement)
|
|
||||||
*/
|
|
||||||
|
|
||||||
console.log('init Dropzone')
|
|
||||||
let avatarDropzone = new Dropzone('#avatarDropzone', {
|
let avatarDropzone = new Dropzone('#avatarDropzone', {
|
||||||
url: `/user/upload/avatar/${this.userIdValue}`,
|
url: `/user/upload/avatar/${this.userIdValue}`,
|
||||||
avatarUrl: this.avatarImageValue,
|
avatarUrl: this.avatarImageValue,
|
||||||
|
@ -37,32 +22,14 @@ export default class extends Controller {
|
||||||
const callback = null // Optional callback when it's done
|
const callback = null // Optional callback when it's done
|
||||||
const crossOrigin = null // Added to the `img` tag for crossOrigin handling
|
const crossOrigin = null // Added to the `img` tag for crossOrigin handling
|
||||||
const resizeThumbnail = false // Tells Dropzone whether it should resize the image first
|
const resizeThumbnail = false // Tells Dropzone whether it should resize the image first
|
||||||
avatarDropzone.displayExistingFile(mockFile, avatarDropzone.options.avatarUrl, callback, crossOrigin, resizeThumbnail);
|
avatarDropzone.displayExistingFile(
|
||||||
avatarDropzone.files.push(mockFile); // line missing in official docs
|
mockFile,
|
||||||
|
avatarDropzone.options.avatarUrl,
|
||||||
/*
|
callback,
|
||||||
console.log('url', avatarDropzone.options.foo)
|
crossOrigin,
|
||||||
this.hiddenFileInput.removeAttribute('multiple')
|
resizeThumbnail
|
||||||
this.on('maxfilesexceeded', (file) => {
|
)
|
||||||
this.removeAllFiles()
|
avatarDropzone.files.push(mockFile) // line missing in official docs
|
||||||
this.addFile(file)
|
|
||||||
})
|
|
||||||
this.on('error', (file, data) => {
|
|
||||||
console.log('error')
|
|
||||||
if (data.detail) {
|
|
||||||
this.emit('error', file, data.detail)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
console.log('beforemock')
|
|
||||||
const mockFile = { name: 'Name Image', size: 12345, type: 'image/jpeg' }
|
|
||||||
this.emit('addedfile', mockFile)
|
|
||||||
this.emit('success', mockFile)
|
|
||||||
console.log('avi', this.avatarImageValue)
|
|
||||||
this.emit('thumbnail', mockFile, avatarDropzone.options.avatarUrl)
|
|
||||||
console.log('aftermock')
|
|
||||||
this.emit('complete', mockFile);
|
|
||||||
this.files.push(mockFile);
|
|
||||||
*/
|
|
||||||
},
|
},
|
||||||
transformFile(file, done) {
|
transformFile(file, done) {
|
||||||
// Create the image editor overlay
|
// Create the image editor overlay
|
||||||
|
@ -84,7 +51,7 @@ export default class extends Controller {
|
||||||
editor.appendChild(image)
|
editor.appendChild(image)
|
||||||
|
|
||||||
// Create Cropper.js
|
// Create Cropper.js
|
||||||
const cropper = new Cropper(image, {aspectRatio: 1})
|
const cropper = new Cropper(image, { aspectRatio: 1 })
|
||||||
|
|
||||||
// Create confirm button at the top left of the viewport
|
// Create confirm button at the top left of the viewport
|
||||||
const buttonCrop = document.createElement('button')
|
const buttonCrop = document.createElement('button')
|
||||||
|
|
Loading…
Reference in New Issue