[Vuejs]-Error in render: TypeError: file is undefined

Try adding file to your data export

data() {
return {
   actions: [],
   file: '',
   files: [],
   viewing: '',

I think is because you trying to access the file while files are null so technically you never actually loop through the files so you are not creating the file object.
The other thing is you can use in the div I would check to if files !== null that way it avoids giving you any errors. meaning if the files are null it does’t try to render the rest of what’s inside the div, avoiding the errors.

Here is a good read on this
https://medium.com/devmarketer/how-to-add-conditional-statements-to-v-for-loops-in-vue-js-c0b4d17e7dfd

I hope this helps

I spent most of the day banging my head against the wall with this problem and since I was following a tutorial to help me build this I decided to go through the code again, line by line. It turns out in the submitFiles method there’s this line:

this.files.splice(i, 1, this.files['id']);

which actually removes one element from the files array. I’m not certain if the author of the tutorial had a specific intention for this line of code or not, but they didn’t explain what it was for. What I realized was happening though is it removes one element of the array each iteration of the for loop, which at some point empties the entire array. When I commented this line out, I no longer get the error. I don’t know that this is actually the correct answer to my problem, but for now I’ll just run with it since Vue no longer complains.