Vue-dropzone: Acess to vue component data inside dropzone options

[hubertokf]

I'm want to access a value from component data inside dropzone options but I cannot figure out how to do that.

This is my dropzone options:

dropzoneOptions: {
        url: 'https://www.googleapis.com/upload/storage/v1/b/xxx/o?uploadType=media&name=',
        uploadMultiple: true,
        dictDefaultMessage: 'Solte arquivos aqui para adicionar ao projeto',
        method: 'POST',
        parallelUploads: 3,
        autoProcessQueue: false,
        autoDiscover: false,
        headers: {
          'Access-Control-Allow-Origin': '*'
        },
        maxFiles: 500,
        acceptedFiles: 'image/*',
        thumbnailWidth: 35,
        thumbnailHeight: 35,
        previewTemplate: `
        <div class="dz-preview dz-file-preview" style="
          height: 35px;
          width: 35px;
          min-height: 10px;
          margin: 5px 5px;
        ">
          <div class="dz-details" style="
            padding:0;
            opacity: 1;
          ">
            <div class="dz-filename" style="display:none;"><span data-dz-name></span></div>
            <div class="dz-size" style="display:none;" data-dz-size></div>
            <img data-dz-thumbnail />
          </div>
          <div class="dz-progress" style="
            height:10px;
            width:31px;
            opacity: 1;
            z-index: 1000;
            max-width: 80px;
            pointer-events: none;
            position: relative;
            left: 0;
            top: 0;
            margin: 12px 2px;
            background: rgba(255,255,255,0.9);
            -webkit-transform: scale(1);
            border-radius: 8px;
            overflow: hidden;
          "><span class="dz-upload" data-dz-uploadprogress></span></div>
          <div class="dz-success-mark"><span>✔</span></div>
          <div class="dz-error-mark"><span>✘</span></div>
          <div class="dz-error-message"><span data-dz-errormessage></span></div>
        </div>`,
        sending: function(file, xhr) {
          var _send = xhr.send;
          xhr.withCredentials = true;
          xhr.setRequestHeader("cache-control", "no-cache");
          xhr.send = function() {
            _send.call(xhr, file);
          };
        },
        processing: function(file){
          this.options.headers["Content-Type"] = file.type;
          var folder = 'album'
          var filename = file.name
          console.log(this.options.url)
          this.options.url = 'https://www.googleapis.com/upload/storage/v1/b/xxxxx/o?uploadType=media&name='+folder+'/'+MYTHISCOMPONENT.value+'/'+filename
        },
      }

On processing method I'm changing the url for every file (likely as a signed url). I used that to upload to Google Cloud Storage.

so on MYTHISCOMPONENT.value must be a value from component.

[rowanwins]

Hi @hubertokf

I'd recommend hooking into one of the vue events rather than trying to configure it via the initial dropzone options

<vue-dropzone v-on:vdropzone-sending="sendingEvent"></vue-dropzone> //// methods: { sendingEvent (file, xhr, formData) { formData.append('paramName', 'some value or other'); } }

[hubertokf]

Thank you for the response @rowanwins!

Ok, I could use that, but how can I change the upload url inside this event? I tried what you suggest but i couldnt figure out how to change upload url. XHR object is in Read Mode and formData only contains methods.

I've tried using processing event but then I cannot call vuedropzone object. OK, I can do it using $ref, but it do not change the URL I dont know why.

Example:

<vue-dropzone v-on:vdropzone-processing="processingEvent" ref="myVueDropzone"></vue-dropzone>  
   ////
  methods: {
      processingEvent (file) {
        this.options.headers["Content-Type"] = file.type;
          var folder = 'album'
          var filename = file.name

          this.options.url = 'https://www.googleapis.com/upload/storage/v1/b/xxxxx/o?uploadType=media&name='+folder+'/'+this.album.id+'/'+filename
          // HERE this.album.id works but not this.options.url
          // AND if I use this.$ref.myVueDropzone.options.url doesnt change anything. Not in time at least. Example:
          this.$ref.myVueDropzone.options.url = 'https://www.googleapis.com/upload/storage/v1/b/xxxxx/o?uploadType=media&name='+folder+'/'+this.album.id+'/'+filename
      }
    }

[hubertokf]

Ok, after some atempts I could make it work.

I've used processing event to change the url and I've passed my data through this event.

<vue-dropzone 
      id="dropzone" 
      :options="dropzoneOptions"
      v-on:vdropzone-processing="(file) => processingEvent(file, album)"
      ref="myVueDropzone"
      ></vue-dropzone>  
   ////
processingEvent (file,album) {
      this.$refs.myVueDropzone.setOption('headers', {'Content-Type': file.type })
      var folder = 'album'
      var filename = file.name

      this.$refs.myVueDropzone.setOption('url', 'https://www.googleapis.com/upload/storage/v1/b/xxx/o?uploadType=media&name='+folder+'/'+album.id+'/'+filename)
    },

I dont know what i was missing before. But thank you for your time and patience.

[rowanwins]

Glad you got it sorted @hubertokf