@kat-vetal

Загрузка файлов с удаленного сервера?

Для загрузки изображений в профиль используется 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();

       });
  • Вопрос задан
  • 385 просмотров
Решения вопроса 1
webinar
@webinar Куратор тега Yii
Учим yii: https://youtu.be/-WRMlGHLgRg
А этим пользоваться пробовали?
// callback and crossOrigin are optional
myDropzone.createThumbnailFromUrl(file, imageUrl, callback, crossOrigin);

www.dropzonejs.com/#dropzone-methods

Но думаю стоит взять следующий алгоритм:
ввели в инпут url, отправили его на сервер ajax-ом, на сервере кинули во временную папку, вернули локальный путь, а далее как обычно
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы