CODEWITHSUNDEEP
vue.jsfile-uploadaxiosgraphqlvue-dropzone
Ionut Birlad
Ionut Birlad

Reputation: 59

Vue-Dropzone not working without "url" option

I'm using Vue-Dropzone to upload files with graphql. Everything works fine, but since I'm using graphql I don't need to put an URL in "dropzoneOptions", because I put the query in an Axios API inside a Vuex module like this:

async vFileAdded(bomFile){
  const formData = new FormData()
  const data = {
    query: `
        mutation (
          $file: Upload,
          $projectId: ID!,
          $region: String!,
          $isTest: Boolean,
        ) {
        uploadBom(
          input: {
            bom: $file,
            projectId: $projectId,
            region: $region,
            isTest: $isTest,
          }) {
              project {
                  id
                  name
                }
            }
        }
      `,
    variables: {
      file: null,
      projectId: "UHJvamVjdE5vZGU6MTU=",
      region: "Lombardia",
      isTest: true
    }
  }
  formData.append('operations', JSON.stringify(data))
  const map = {
    '0': ['variables.file'],
  }
  formData.append('map', JSON.stringify(map));
  formData.append('0', bomFile)
  
  try {
    axios.defaults.headers.common["Authorization"] =
      "JWT " + localStorage.getItem("edilgo-token")
    const result = await axios({
      method: 'POST',
      url: process.env.VUE_APP_API_URL,
      data: formData,
    })
    console.log(result)
  } catch (error) {
    console.error(error)
  }
},

Now as I said it works, but only if I use a fake url in "dropzoneOptions". If I don't write nothing there I cant't even select a file to upload (right now I just use "http://localhost" to make it work).

I've also tried to drag and drop the file when "url" is not set and it just downloads the file in the browser.

My question is:

Is there a better way to use Dropzone with graphql? Maybe I am doing it wrong

I would really apreciate if someone could help me.

Upvotes: 4

Views: 3270

Answers (1)

Jérémie Chazelle
Jérémie Chazelle

Reputation: 1818

You must declare autoProcessQueue in your options and set on false.

Use it :

<dropzone id="foo" ref="el" :options="options" @vdropzone-file-added="sendingFile"></dropzone>

Declare options :

data() {
  return {
    // See https://rowanwins.github.io/vue-dropzone/docs/dist/index.html#/props
    options: {
      // important : set autoProcessQueue on false
      autoProcessQueue: false,
      // url
      url: 'http://localhost',
      previewsContainer: false,
    },
  }
},

In your methods :

methods: {
  sendingFile(file) {
    // Dispatch your file
    ...
  },
},

Upvotes: 3

Related Questions