Vue.js and File Upload

Development
1

Hi,

in my current project I want to built a Form with serval functions. One of them is a file Upload (and after the Upload the word-count of the file will be calculated)
Is there an modx-extra for file upload without jquery?
because I want use vue.js.

I testet a litte vue-code like this:

  el: "#app",
  methods: {
    uploadProjectFile() {
      const file = this.$refs.fileInput.files[0];
      const formData = new FormData();
      formData.append("file", file);

      axios.post("[[~9]]", formData, {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
    }
  }
});

On the line “axios.post(”[[~9]]“, formData, {” I useed to use an modx-resource, but it seems it do not work.
Is it better to write a extern PHP file?

However. I’m just considering whether it might be better to do the whole thing with jquery and the FileUpload extra. Since there doesn’t seem to be any extras in this regard. I’m still a beginner in vue.js and wanted to take it as a bit of a learning project.

2

What exactly do you do on the resource with ID=9 to process the uploaded file?
As far as I can tell, the JS code you posted should work to upload the file.

I’d probably use a MODX resource (Template = “(empty)”, Content Type = “JSON”) with an uncached snippet in the content. (Then in the snippet use $_FILES to access the uploaded file.)

You could also use an external PHP file. What solution is better depends on the use case.