Getting actual files to send to backend from dropzone

Question

I am having difficulties grabbing files from Dropzone object (using Vue-Dropzone) and appending them to a custom formData object I am building with other params too.

What I am trying to achive is a form with a Dropzone in it which submits via ajax and I am trying to grab all files the user selected and create an object to pass to backend in the form of

files[file_1] = file_1
files[file_2] = file_2 

and so on. I have used the below code but no success

let files = {};
  _.each(this.$refs.dropzoneID.getQueuedFiles(), (file, index) => {
    files[index] = file;
});

// console.log(files);

this.formData.append('files', files);

process_form_via_axios_call

What i get in the backend is:

params={"files"=>"[object Object]"}

While I expect something like this:

{"files" => {"file_1"=>#<ActionDispatch::Http::UploadedFile:0x007fd14c9ec940 @tempfile=#<Tempfile:/var/folders/lk/bhps4r5d3s1fzmywxlp59f480000gn/T/RackMultipart20171002-87936-1tnd839.jpg>, @original_filename="restaurant-person-woman-coffee-medium.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"file\"; filename=\"restaurant-person-woman-coffee-medium.jpg\"\r\nContent-Type: image/jpeg\r\n">......}

How can i achieve this?

Answer 1

Actually was able to resolve this by doing this:

_.each(this.$refs.dropzoneID.getQueuedFiles(), (file, index) => {
   this.formData.append('files[file_' + index +']', file);
});

Worked like a charm.