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 (ie 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.

Answer 2

Try adding the form as a modal pop-up instead:

  $(function() { $("#dialog").dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); $("#file").change(function() { $("#dialog").dialog("open"); }); }); 

 <meta charset="utf-8"> <title>jQuery UI Dialog - Animation</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <div id="dialog" title="Basic dialog"> <p>Put your form here, for example.</p> </div> <input type="file" id="file" />