Assign value to an hidden text input with JS

Question

i'm a newbie of JavaScript.

I have that :

HTML:

<form>
<t:inputFileUpload required="true" id="upload" onchange="uploadOnChange()" />
<input id="filename" type="hidden" />
<h:commandButton class="btn btn-primary" value="Upload"
            action="#{controller.upload}" />
</form>

javascript:

<script>
function uploadOnChange() {

document.getElementById('upload').onchange = name;

var filename = name;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);

document.getElementById('filename').value = filename;
}
</script>

All I want to do is get through a inputFileUpload, to browse my directory, the filename that i've selected, and pass this name as a string to jsf controller.

Does anyone can help me?

EDIT :

If I add to my form enctype="multipart/form-data seems that the controller method "upload" does nothing.

This doesn't seem right: `document.getElementById('upload').onchange = name;` — Arg0n, Jun 02 '17 at 09:09
[about uploading with javascript](https://stackoverflow.com/questions/5587973/javascript-upload-file) maybe this helps you to close the question. — Foo Bar, Jun 02 '17 at 09:09
Are you new to JSF too? JSF needs an `` instead of a `
` to work properly. And the `t:inputFileUpload` will pass on the filename... no need to do that in a separate field... I think you are trying to solve another problem in the wrong way — Kukeltje, Jun 02 '17 at 09:42
yes i'm new to jsf too, i'm in high school :)... if I use doesn't work anyway. — alex, Jun 02 '17 at 09:44
I've tried to do that: I've put in form `multipart/form-data` and than in my controller i've tried to do `file.getfileName()` but it doesn't work... so i was searchng for another way... — alex, Jun 02 '17 at 09:47
`t:inputFileUpload` is from tomahawk, an old and not really supported library. If you are actually using jsf-2.2, use the `h:inputFile`, https://stackoverflow.com/questions/27677397/how-to-upload-file-using-jsf-2-2-hinputfile-where-is-the-saved-file. What tutorial are you using? — Kukeltje, Jun 02 '17 at 09:48
But take a good look at the dates of the questions!!! And look at 'versions' specified in them. — Kukeltje, Jun 02 '17 at 09:53

Arg0n · Answer 1 · 2017-06-02T09:23:02.017

0

Assuming <t:inputFileUpload> has a value attribute, I'd change the code to something like this:

function uploadOnChange() {
  var filename = document.getElementById('upload').value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
    document.getElementById('filename').value = filename;
  }
  console.log('Value hidden input: ' + document.getElementById('filename').value);
}

<input type="file" required="true" id="upload" onchange="uploadOnChange()" />
<input id="filename" type="hidden" />

edited Jun 02 '17 at 09:23

answered Jun 02 '17 at 09:13

Arg0n

8,283
2
21
38

what value i've to add to inputFileUpload ? i need that only to select the file that i want the name .... i'm very sorry, i'm very inexpert. – alex Jun 02 '17 at 09:17
You shouldn't need to add it, it should be there, or maybe with another name. You should be able to get the filename from `inputFileUpload` in some way. – Arg0n Jun 02 '17 at 09:18
@alex Added a runnable snippet with a standard HTML file upload control as an example. – Arg0n Jun 02 '17 at 09:23
thank you very much, but can i return filename value to my jsf controller class to use that string? I've assigned to hidden input value as `value="#{controller.file}"` – alex Jun 02 '17 at 09:28
I'm a .NET developer, this is a JS question. You have to figure that out yourself or ask another question with the correct tags. – Arg0n Jun 02 '17 at 09:29
JSF is JavaServer Faces, right? Java is not JavaScript (ECMAScript). Part of the question is for JS, but how to read it on server-side is not. – Arg0n Jun 02 '17 at 09:32
@Arg0n: thanks for trying to help, but OP most likely has a different problem (http://xyproblem.info/) and is trying to solve a new/resulting problem in a wrong/complex. Nothing JS related to the real problem. – Kukeltje Jun 02 '17 at 09:52

Assign value to an hidden text input with JS

1 Answers1