Leonid Nikitin
b7d0a2453e
Otherwise phpstorm doesn't understand the paths correctly. He thinks that this is not a complete application, but a package. And when creating a class, the namespace indicates “app” with a small letter, but should be “App”.
82 lines
3.1 KiB
JavaScript
82 lines
3.1 KiB
JavaScript
import Dropzone from "dropzone";
|
|
|
|
let elementImage = document.querySelectorAll('.upload-image');
|
|
if (elementImage.length > 0) {
|
|
elementImage.forEach(addDropzoneImage);
|
|
}
|
|
function addDropzoneImage(element) {
|
|
let blockError = element.querySelector('.upload-image__error'),
|
|
blockProgressBar = element.querySelector('.progress-wrapper'),
|
|
progressBarText = blockProgressBar.querySelector('.upload-image__progressbar-text'),
|
|
progressBar = blockProgressBar.querySelector('.progress-bar'),
|
|
storageType = element.dataset.storageType,
|
|
morph = element.dataset.morph,
|
|
imageBlock = element.querySelector('.add-image');
|
|
|
|
imageBlock.querySelector('button.add-image__remove').addEventListener('click', (e) => {
|
|
element.querySelector('input.save').value = '';
|
|
element.querySelector('input.delete').value = 1;
|
|
imageBlock.style.display = 'none';
|
|
});
|
|
|
|
let myDropzone = new Dropzone(element.querySelector('button.upload-image__button'), {
|
|
url: "/storage/image/upload-resize",
|
|
uploadMultiple: false,
|
|
parallelUploads: 1,
|
|
maxFiles: 1,
|
|
acceptedFiles: element.dataset.acceptedFiles,
|
|
sending: function (file, response, formData) {
|
|
blockError.textContent = '';
|
|
blockError.style.display = 'none';
|
|
formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
|
|
formData.append('storage_type', storageType);
|
|
formData.append('morph', morph);
|
|
blockProgressBar.style.display = 'block';
|
|
},
|
|
thumbnail: function(file, dataUrl) {
|
|
|
|
},
|
|
addedfile: function(file) {
|
|
|
|
},
|
|
totaluploadprogress: function(progress) {
|
|
progressBarText.textContent = progress + '%';
|
|
progressBar.style.width = progress + '%';
|
|
progressBar.setAttribute('aria-valuenow', progress);
|
|
},
|
|
complete: function(file) {
|
|
this.removeFile(file);
|
|
|
|
progressBarText.textContent = '0%';
|
|
progressBar.style.width = '0%';
|
|
progressBar.setAttribute('aria-valuenow', 0);
|
|
blockProgressBar.style.display = 'none';
|
|
},
|
|
success: function (file, image) {
|
|
imageBlock.querySelector('img').setAttribute('src', image.url);
|
|
element.querySelector('input.save').value = image.id;
|
|
element.querySelector('input.delete').value = 0;
|
|
imageBlock.style.display = 'block';
|
|
},
|
|
error: function (file, response) {
|
|
let message = '';
|
|
|
|
if (response.errors) {
|
|
for (let errorKey in response.errors) {
|
|
message += response.errors[errorKey] + '<br>'
|
|
}
|
|
if(response.message) {
|
|
message += response.message + '<br>'
|
|
}
|
|
} else if(response.message) {
|
|
message += response.message + '<br>'
|
|
} else {
|
|
message += response + '<br>'
|
|
}
|
|
|
|
blockError.innerHTML = message;
|
|
blockError.style.display = 'block';
|
|
},
|
|
});
|
|
}
|