How do I pass input="file" data between pages

Question

I'm trying to implement a file upload button, where once a file is selected, the user is directed to another page with a form to fill in extra data before submitting.

Is this possible? To pass the input value over to another page? I noticed that the "value" of the form item is not the true value (i.e. prefixed with "C:\fakepath\"), so a simple setValue() on the form will probably not work.

If it makes any difference, I am using angular and ui-router. And when I say change page, I really mean change state.

Answer 1

You can pass the File object from the HTMLInputElement.files as a parameter to the state: $state.go('form', {'file': file}).

I've created a fiddle to demonstrate this solution. The first state prompts the user to select a file, then redirects them to a second state passing the file as a parameter. In this example the file name is just printed out but you could easily read the file as well.