How can I show you the files already stored on server using Dropzone.js

Question

I Don\'t understand that... call its always undefined

Create the mock file:

var mockFile = { name: \"Filename\", size: 12345 };
         


        

Answer 1

my solution for >= 4.0, basing on "How to show files already stored on server": https://github.com/enyo/dropzone/wiki/FAQ

maxFiles: 1,

init: function () {
    this.on('maxfilesexceeded', function (file) {
        this.removeAllFiles();
        this.addFile(file);
    });

    var mocks = $dropzone.data('dropzone');
    for (var i = 0; i < mocks.length; i++) {
        var mock = mocks[i];
        mock.accepted = true;

        this.files.push(mock);
        this.emit('addedfile', mock);
        this.createThumbnailFromUrl(mock, mock.url);
        this.emit('complete', mock);
    }
}

Answer 2

Finally !!

$(function() {
    var mockFile = { name: "banner2.jpg", size: 12345 };
    var myDropzone = new Dropzone("#my-awesome-dropzone");
    myDropzone.options.addedfile.call(myDropzone, mockFile);
    myDropzone.options.thumbnail.call(myDropzone, mockFile, "http://localhost/test/drop/uploads/banner2.jpg");
})

Answer 3

You can try with this

var file_image = "http://someserver.com/myimage.jpg";

var mockFile = { name: "myimage.jpg", size: 12345 };

$("#dropzone").dropzone({

    url: 'false',
    maxFiles: 1,
    maxFilesize:10,//mb
    acceptedFiles:'image/*',
    init: function() {
        this.on("addedfile", function(file){
            this.options.thumbnail.call(this,file,file_image);
         });
         this.addFile.call(this,mockFile);
    }
});

Answer 4

I was having hard time with this also. This one as a starting point would have helped even more:

Dropzone.autoDiscover = false; // otherwise will be initialized twice
var myDropzoneOptions = {
    maxFilesize: 5,
    addRemoveLinks: true,
    clickable: true
};
var myDropzone = new Dropzone('#myDropzoneElement', myDropzoneOptions);
var mockFile = { name: "Existing file!", size: 12345 };
myDropzone.options.addedfile.call(myDropzone, mockFile);
myDropzone.options.thumbnail.call(myDropzone, mockFile, "http://url-to-thumb-goes-here");

Answer 5

 import vue2Dropzone from 'vue2-dropzone'
    import 'vue2-dropzone/dist/vue2Dropzone.min.css'
    export default {
        created(){
            let app = this;
            app.getAdvertById()
        },
         data: function () {
            return {
                advertId: null,
                advert: {
                    title: '',
                    description: '',
                    confirm: '',
                    files: {},
                    category:'',
                    city:''
                },
               
                adverts: [],
                   dropzoneOptions: {
                    url: 'https://httpbin.org/post',
                    thumbnailWidth: 150,
                    addRemoveLinks: true,
                    maxFilesize: 0.5,
                    dictDefaultMessage: 'Plz add your image here...',
                    headers: { "My-Awesome-Header": "header value" }
                },
            }
        },
          methods: {
            getAdvertById(){
                let app = this;
                let id = app.$route.params.id;
                app.advertId = id;
                axios.get('/api/v1/advert/show/' + app.advertId)
                    .then(function (resp) {
                        app.advert = resp.data
                        app.advert.files = resp.data.files
                         for (var i = 0; i < app.advert.files.length; i++) {
                            var mockFile = {id: app.advert.files[i].id, name: app.advert.files[i].file_name, size: app.advert.files[i].size};
                            app.$refs.myVueDropzone.manuallyAddFile(mockFile, '/advert/' + app.advert.files[i].file_name )
                            app.$refs.myVueDropzone.dropzone.options.thumbnail.call(app.$refs.myVueDropzone, mockFile, '/advert/' + app.advert.files[i].file_name)
                            if (app.$refs.myVueDropzone.dropzone.options.maxFiles > 0) {
                                app.$refs.myVueDropzone.dropzone.options.maxFiles--
                            }
                            }
                    })
                    .catch(function () {
                        alert("Could not load your advert")
                    });
                    //console.log(app.advert.files)
            },
          }
        }

 <vue-dropzone  ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>

Answer 6

Based on punky's excellent answer above, you should not forget to add this._updateMaxFilesReachedClass(); at the end, like so:

init: function () {
    var mockFile = { name: <filename>, size: <filesize>, type: <filetype>, url: <file_url> };
    this.files.push(mockFile);
    this.emit('addedfile', mockFile);
    this.createThumbnailFromUrl(mockFile, mockFile.url);
    this.emit('complete', mockFile);
    this._updateMaxFilesReachedClass();
}