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.

3

Hi,

You are definitely on the right path, and using Vue.js for this project is a great way to learn and build something modern. To answer your question, there isn’t a well-known MODX extra for file uploads that works without jQuery, since most existing solutions like FileUpload rely on it. If you want to stay with Vue.js, creating an external PHP file to handle the upload and calculate the word count would be a good option. This method lets you keep the frontend focused on Vue.js while the backend takes care of file processing. A software development company would often approach this by separating concerns, using Vue.js for the user interface and custom backend endpoints for handling data securely and efficiently. Sticking with Vue.js and a custom PHP upload handler will give you more flexibility and a great learning experience.