vueJs & dropzoneJs

hy help me please.. I'm Using DropzoneJs & vueJs, I want upload file in vueJs using dropzone.js but doesnt work, I have try like this & msg error

"uploadImageGallery.options.autoProcessQueue = true is not a function
uploadImageGallery.processQueue is not a function"

how I can resolved this..?

function uploadImageGallery()
{
    Dropzone.autoDiscover = false;
    var uploadImageGallery = $(".upload__button__gallery__photo__image").dropzone({ 
         url: "/file/post",
         addRemoveLinks: true,
         dictDefaultMessage: "Please upload high resolution photo only with format of *jpeg. (With maximum width of 750px on landscape)",
         dictCancelUpload: "",
         dictRemoveFile: "x",
         autoProcessQueue: false,
         uploadMultiple: false,
         parallelUploads: 10,
         maxFiles: 1,
         maxfilesexceeded: function(file) {
             this.removeAllFiles();
             this.addFile(file);
         },
         acceptedFiles: ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF",
         headers: {
            'X-CSRF-Token': token
        },

     });
}

var vmGallery = new Vue({
    el: '#GalleryController',
    data: {
        gallery: {
            id: '',
            category: '',
            title: '',
            notif: '',
        },
        identifier: identifierUrl,
        success: false,
        edit: false,
    },

    methods: {

        AddGallery: function () {
           uploadImageGallery.options.autoProcessQueue = true;
           uploadImageGallery.processQueue();
           //error in uploadImageGallery.options.autoProcessQueue = true & uploadImageGallery.processQueue is not a function     
        },
      ready: function () {
          uploadImageGallery();     
      }
  });

Thanks

Sithu

10 years ago

Level 14

@badQuetions

Hi try like this.

import Dropzone from 'dropzone';

export defalut {
    Dropzone.autoDiscover = false;
    methods: {
        initDropzone: function() {
            new Dropzone("#id", {
                paramName: "profile_picture", // The name that will be used to transfer the file
                maxFilesize: 1,
                uploadMultiple: false,
                acceptedFiles: 'image/*',
                maxFiles: 1,
                headers: {'X-CSRF-TOKEN' : $('meta[name="token"]').attr('value')},
                init: function() { 
                    // initial hook
                },
                success: function(file, response){
                    // success hook
                }
            });
        }
    }
}

1 like

Please or to participate in this conversation.