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.
You must declare autoProcessQueue in your options and set on false.
Use it :
Declare options :
In your methods :