Cant access response after upload

[m4aax16]

Hi,

this is undefined, because saveFiles() is an arrow function.
How can I access the response after upload ?

Thanks in advance !

[Yaxian]

Hi,

Did you mean this demo ?

    const saveFiles = (files) => {
      const formData = new FormData(); // pass data as a form
      for (var x = 0; x < files.length; x++) {
        // append files as array to the form, feel free to change the array name
        formData.append("images[]", files[x]);
      }

      // post the formData to your backend where storage is processed. In the backend, you will need to loop through the array and save each file through the loop.

      axios
        .post(url, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((response) => {
          console.info(response.data);
        })
        .catch((err) => {
          console.error(err);
        });
    };

    function onDrop(acceptFiles, rejectReasons) {
      saveFiles(acceptFiles); // saveFiles as callback
      console.log(rejectReasons);
    }

If you want to access the response, you can assign result to ref or reactive object. like

let result = ref();

const saveFiles = (file) => {
    axios.then(res => {
       result.value = res
    })
}

[m4aax16]

Hi @Yaxian,

Thank you for your quick reply !
I get the error message :

Uncaught ReferenceError: ref is not defined.

But yeah, basically you got what I mean.
I usually did it like this so I can access the data attribute files :
But it doesn't work, too. Any solution ?

`import { useDropzone } from "vue3-dropzone";
import axios from "axios";

export default {
name: "UseDropzoneDemo",
data: function () {
return {
files: {},
}
},
setup() {
const url = "/onboarding/documents/upload"; // Your url on the server side

var that = this;

const saveFiles = (files) => {
  const formData = new FormData(); // pass data as a form
  for (var x = 0; x < files.length; x++) {
    // append files as array to the form, feel free to change the array name
    formData.append("documents[]", files[x]);
  }

  // post the formData to your backend where storage is processed. In the backend, you will need to loop through the array and save each file through the loop.

  axios
    .post(url, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then((response) => {
       //console.log(response.data);
       that.files = response.data;
    })
    .catch((err) => {
      console.error(err);
    });
};


function onDrop(acceptFiles, rejectReasons) {
  saveFiles(acceptFiles); // saveFiles as callback
  console.log(rejectReasons);
}

const { getRootProps, getInputProps } = useDropzone({ onDrop });

return {
  getRootProps,
  getInputProps,
};

},
};`

[Yaxian]

Hi @Yaxian,

Thank you for your quick reply ! I get the error message :

Uncaught ReferenceError: ref is not defined.

But yeah, basically you got what I mean. I usually did it like this so I can access the data attribute files : But it doesn't work, too. Any solution ?

`import { useDropzone } from "vue3-dropzone"; import axios from "axios";

export default { name: "UseDropzoneDemo", data: function () { return { files: {}, } }, setup() { const url = "/onboarding/documents/upload"; // Your url on the server side

var that = this;

const saveFiles = (files) => {
  const formData = new FormData(); // pass data as a form
  for (var x = 0; x < files.length; x++) {
    // append files as array to the form, feel free to change the array name
    formData.append("documents[]", files[x]);
  }

  // post the formData to your backend where storage is processed. In the backend, you will need to loop through the array and save each file through the loop.

  axios
    .post(url, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then((response) => {
       //console.log(response.data);
       that.files = response.data;
    })
    .catch((err) => {
      console.error(err);
    });
};


function onDrop(acceptFiles, rejectReasons) {
  saveFiles(acceptFiles); // saveFiles as callback
  console.log(rejectReasons);
}

const { getRootProps, getInputProps } = useDropzone({ onDrop });

return {
  getRootProps,
  getInputProps,
};

}, };`

Ah, I missed following:

import { ref } from 'vue'

so , it may like this

<template>
  <div>
    <div v-bind="getRootProps()">
      <input v-bind="getInputProps()" />
      <p v-if="isDragActive">Drop the files here ...</p>
      <p v-else>Drag 'n' drop some files here, or click to select files</p>
    </div>
    <button @click="open">open</button>
  </div>
  <div>{{ myResult }}</div>
</template>

<script>
import { useDropzone } from "vue3-dropzone";
import axios from "axios";
import { ref }  from "vue";

export default {
  name: "UseDropzoneDemo",
  setup() {
    const url = "{your_url}"; // Your url on the server side
    const myResult = ref()
    const saveFiles = (files) => {
      const formData = new FormData(); // pass data as a form
      for (var x = 0; x < files.length; x++) {
        // append files as array to the form, feel free to change the array name
        formData.append("images[]", files[x]);
      }

      // post the formData to your backend where storage is processed. In the backend, you will need to loop through the array and save each file through the loop.

      axios
        .post(url, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((response) => {
          console.info(response.data);
          myResult.value = response.data
        })
        .catch((err) => {
          console.error(err);
        });
    };

    function onDrop(acceptFiles, rejectReasons) {
      saveFiles(acceptFiles); // saveFiles as callback
      console.log(rejectReasons);
    }

    const { getRootProps, getInputProps, ...rest } = useDropzone({ onDrop });

    return {
      getRootProps,
      getInputProps,
      ...rest,
     myResult,
    };
  },
};
</script>