CODEWITHSUNDEEP
javascriptdropzone.js
Andre M
Andre M

Reputation: 7534

Uploading to dynamic end-point with dropzone.js?

I am looking to use dropzone.js, by means of vue2-dropzone, and have a need to be able to upload to a dynamic endpoint, though I am not sure how to go about this.

The intended flow is:

I did see in the options there was a url option that can take a function that can return a URL, but this does not seem well adapted to my needs. The limitation is that it is a synchronous operation, while any query to a server would be an asynchronous operations, unable to return the response on return.

Can anyone indicate whether this is doable with dropzone.js?

BTW the server is essentially creating a signed AWS S3 URL via s3.getSignedUrl() of the AWS SDK and also adding extra metadata.

Upvotes: 1

Views: 3314

Answers (2)

Stefan Tanevski
Stefan Tanevski

Reputation: 320

You can do this with the dropzone events

<vue-dropzone ref="vueDropzone" id="dropzone" :options="dropzoneOptions" @vdropzone-processing="dropzoneChangeUrl"></vue-dropzone>

And in your vue

data() {
        return {
            dynamicId: 123,
            dropzoneOptions: {
                url: 'url',
                thumbnailWidth: 150,
                maxFilesize: 0.5,
                uploadMultiple: true
            }
        }
    },
methods: {
    dropzoneChangeUrl() {
            this.$refs.vueDropzone.setOption('url', `http://your-url.com/${this.dynamicId}`);
        },
}

If you want to add some headers to the request or add parameters in the formData you can do that with the vdropzone-sending(file, xhr, formData) event. Here is an example

<vue-dropzone ref="vueDropzone" id="dropzone" :options="dropzoneOptions" @vdropzone-sending="sendImages"></vue-dropzone>

In your vue

sendImages(file, xhr, formData) {
    xhr.setRequestHeader('Header', 'Your Header');
    formData.append('photos', file);
}

Where file is the file your are sending (if you have multiple files, it will do the function for each one of them), xhr is the XMLHttpRequest, and the formData is the FormData.

Upvotes: 2

Tuan Pham
Tuan Pham

Reputation: 1110

This should be doable.

One option I see is to use the sending event and modify the url on the xhr object.

http://www.dropzonejs.com/#event-sending

Upvotes: 1

Related Questions