V
V
Vitaly2017-03-29 10:20:14
This
Vitaly, 2017-03-29 10:20:14

Downloading files from a remote server?

Dropzone.js is used to upload images to a profile. But out of the box, it only supports uploading local files. How to realize to it possibility of loading from a remote server?
I deduced a separate input for it . The loading code itself
<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();

       });

Answer the question

In order to leave comments, you need to log in

1 answer(s)
Максим Тимофеев, 2017-03-29
@ kat-vetal

А этим пользоваться пробовали?

// callback and crossOrigin are optional
myDropzone.createThumbnailFromUrl(file, imageUrl, callback, crossOrigin);

www.dropzonejs.com/#dropzone-methods
Но думаю стоит взять следующий алгоритм:
ввели в инпут url, отправили его на сервер ajax-ом, на сервере кинули во временную папку, вернули локальный путь, а далее как обычно

Similar questions

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question