Для загрузки изображений в профиль используется dropzone.js Но он из коробки поддерживает только загрузку локальных файлов. Как реализовать ему возможность загрузки с удаленного сервера?
Я вывел отдельный инпут для него
<input type="text" id="removeUpload" >
Сам код загрузки
var FormDropzone = function () {
return {
//main function to initiate the module
init: function () {
Dropzone.options.myDropzone = {
thumbnailWidth: $width,
thumbnailHeight: $height,
headers: {
"Accept": "",
"Cache-Control": "",
"X-Requested-With": "XMLHttpRequest"
},
dictDefaultMessage: "",
init: function() {
if ($("#$inputId").val() != '') {
var id = $("#$inputId").val();
id = id.replace('$domain', '');
var dropzone = this;
$.ajax({
url: '$domain/file/info/',
dataType: 'json',
data: {
id: id
},
}).success(function (mockFile) {
dropzone.emit("addedfile", mockFile);
dropzone.emit("thumbnail", mockFile, '$urlResize');
$("#$inputId").val();
$('.dz-progress').hide();
$('#my-dropzone > p').hide();
});
}
this.on("addedfile", function(file) {
// Create the remove button
var removeButton = Dropzone.createElement("<a href='javascript:;'' class='btn red btn-sm btn-block'>Удалить</a>");
// Capture the Dropzone instance as closure.
var _this = this;
// Listen to the click event
removeButton.addEventListener("click", function(e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
_this.removeFile(file);
// If you want to the delete the file on the server as well,
// you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
this.on("success", function(file, responseText) {
var result = jQuery.parseJSON(responseText);
console.log(result.File);
if (result.File != null) {
$('#$inputId').val(result.domain + result.File);
}
// Handle the responseText here. For example, add the text to the preview element:
//file.previewTemplate.appendChild(document.createTextNode(responseText));
});
}
}
}
};
}();
jQuery(document).ready(function() {
FormDropzone.init();
});