How to send parameter to fileUploadListener in PrimeFaces fileUpload - file-upload

When I create a model I would like to save images for a model. I am using PrimeFaces fileUpload component. When I save pictures I want to know to which model particular image refers to. That's why I need to send id of a model to backing bean.
Is there any possibility to send id of model to fileUploadListener?
<h:form enctype="multipart/form-data">
<p:panelGrid columns="2">
<h:outputLabel for="hotelName" value="#{msg.hotelName}"/>
<p:inputText value="#{apartmentNew.name}" id="hotelName"/>
<h:outputLabel for="hotelDescription" value="#{msg.hotelDescription}"/>
<p:inputText value="#{apartmentNew.description}" id="hotelDescription"/>
<h:outputLabel for="hotelImages" value="#{msg.hotelImages}"/>
<h:form enctype="multipart/form-data">
<p:fileUpload id="hotelImages"
fileUploadListener="#{apartments.handleImageUpload}"
mode="advanced"
sizeLimit="10000000"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/">
</p:fileUpload>
</h:form>
</p:panelGrid>
<p:commandButton id="saveApartmentButton" value="#{msg.save}" action="save"/>
<p:commandButton id="cancelCreationApartmentButton" value="#{msg.cancel}"
action="cancel"/>
</h:form>

Not via request parameters. You can do so via component attributes.
E.g.
<p:fileUpload ...>
<f:attribute name="foo" value="bar" />
</p:fileUpload>
with
String foo = (String) event.getComponent().getAttributes().get("foo"); // bar

I needed to pass a key parameter along with the uploaded file. I found that fileUploadListener executes during the APPLY_REQUEST_VALUES phase, so I could not use an EL expression in the f:attribute tag. I also tried to find the value using event.getComponent().findComponent("id"), but although the component was present, the value was null. I think a #ViewScoped bean would fix the missing value, but I am stubbornly attempting to keep my beans at #RequestScoped until I have absolutely no other option. Ultimately, I had to use FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("id") which I got from http://forum.primefaces.org/viewtopic.php?f=3&t=6432

Error in types:
String foo = event.getComponent().getAttributes().get("foo");
Instead, do it this way:
Object foo = event.getComponent().getAttributes().get("foo");
Integer foo = (Integer) event.getComponent().getAttributes().get("foo");

You can use:
<div onclick="#{myBean.myMethod(myParam)}" >
<p:fileUpload id="fileUpload" fileUploadListener="#{myBean.onFileUplod}" mode="advanced" dragDropSupport="true"
update=":messages" process="#this" >
</p:fileUpload>
</div>
Method in myBean:
public void myMethod(String myParam) {
selectedMyParam = myParam;
}
Then you can use selectedMyParam in onFileUpload method.

Related

How can I post the same data to two different handlers depending on the button clicked?

[See updates at bottom]
I have a Razor page with a form on it. I want to have two buttons on that form, that perform a slightly different action - both using the same posted form data.
I tried using the asp-page-handler helper on the second button, but it doesn't seem to add anything to the HTML (I would expect it to add a formaction attribute to the <button> element, but it doesn't add anything at all).
Here's an example page:
#page "{id?}"
#model IndexModel
#tagHelperPrefix x:
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<p>Current value is #Model.Foo</p>
<x:form method="post">
<input type="text" name="foo" />
<button type="submit">Default</button>
<button type="submit" x:asp-page-handler="Alternative">Alternative</button>
</x:form>
... and here's the corresponding page model:
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MyWebApplication.Pages
{
public class IndexModel : PageModel
{
[BindProperty]
public string Foo { get; set; }
public void OnGet(int? id)
{
}
public void OnPostAsync(string foo)
{
Foo = foo;
}
public void OnPostAlternativeAsync(string foo)
{
Foo = foo.ToUpper();
}
}
}
This is rendered as:
...where the generated HTML for the form is:
<form method="post">
<input type="text" name="foo" />
<button type="submit">Default</button>
<button type="submit" x:asp-page-handler="Alternative">Alternative</button>
</form>
The fact that the x:asp-page-handler attribute is still in the generated HTML makes me think that the Razor engine hasn't recognized it. I've tried taking off the x: prefix, but that didn't help.
What am I doing wrong?
UPDATE
OK, I tried removing the tag prefix and removing the #tagHelperPrefix line, and that made a difference. A formaction is added to the second <button> element as expected.
However:
that's really annoying - the #tagHelperPrefix is not something I want to lose, and
now both buttons are triggering the "Alternative" action, even though only one of them has the formaction!
Here's the new generated HTML:
<form method="post">
<input type="text" name="foo" />
<button type="submit">Default</button>
<button type="submit" formaction="/?handler=Alternative">Alternative</button>
</form>
SECOND UPDATE
OK, so If I put asp-page-handler="" on the "default" button, then each button goes to the correct handler, which is fine.
The last question that remains, then, is: how can I make this work with the tag helper prefix?
[Answering my own question in case this helps others.]
It turns out that:
The tag-helper-prefix only applies to elements, not attributes, so it should be asp-page-handler="..." rather than x:asp-page-handler="..." even if the tag-helper-prefix is x:.
Those asp- attributes are only recognized within a tag that is tag-helper-enabled - which is all elements when no tag-helper-prefix is specified, or only elements with the tag-helper-prefix where one is specified. In my case, I had to change <button ...> to <x:button ...>.
If you specify asp-page-handler for one button, you need to specify it on all the buttons, even if you specify it as "" to get the default action.

How can I render the input with type='text' in blazor server-side?

Here are the codes:
<EditForm OnValidSubmit="#SubmitText" id="inputText">
<InputText #bind-Value="_InputMsgModel.Msg" />
</EditForm>
After the program ran, it turned out to be this:
<form id="inputText">
<input class="valid">
</form>
Now I wanna add an attribute type="text" to the input element, how can I achieve this?
I tried to modify the code like this:
<EditForm OnValidSubmit="#SubmitText" id="inputText">
<input type="text" #bind-Value="_InputMsgModel.Msg" />
</EditForm>
Meanwhile, now visual studio reports an error:
I can not bind the model anymore.
I need to set the type to text for needing to set the keyboard in mobile correctly.
How can I solve this? Thank you.
What is wrong with this code:
<EditForm Model="#_InputMsgModel" OnValidSubmit="#SubmitText" id="inputText" >
<InputText #bind-Value="#_InputMsgModel.Msg" />
</EditForm>
Run this code with the above:
#code {
InputMsgModel _InputMsgModel = new InputMsgModel();
private void SubmitText()
{
Console.WriteLine(_InputMsgModel.Msg);
}
public class InputMsgModel
{
public string Msg { get; set; } = "My new message";
}
}
Do you see the text "My new message" in the text box ? I believe you do... All is well, and the two-way binding mechanism works well. Go and see now the Html...it's still <input class="valid"> which does not reflect the real state of the text box. Think about it...
Update: Of course you can use the following:
<EditForm Model="#_InputMsgModel" OnValidSubmit="#SubmitText" id="inputText" >
<input type="text" #bind-value="#_InputMsgModel.Msg" />
</EditForm>
Important: The error "The attribute names could not..." is triggered because you use capital "V" in #bind-Value. You should use lower case: #bind-value. This is because your using input 'Html element' here, and it has a value attribute, not a Value attribute. But when you use the InputText Component, the capital Value in #bind-Value refers to a Value property defined in the component.

How to pass selected value from selectOneRadio tag to fileUpload tag in PrimeFaces

I'm using PrimeFaces 6.0. I used selectOneRadio tag and populates the list from database, and then I would like to use the selected value to identify the type of document selected and pass this to fileUploadListener so that the right document type is attached to file being uploaded. How do I pass that selected value?
<p:selectOneRadio id="docType" value="#{fileUploadBean.docType}" layout="grid" columns="1">
<f:selectItems var="document" value="#{fileUploadBean.docDescriptionList}" itemLabel="#{docType}" itemValue="#{docType}" />
</p:selectOneRadio>
<p:fileUpload id="docFile" value="#{fileUploadBean.file}" mode="advanced" allowTypes="/(\.|\/)(pdf)$/"
fileUploadListener="#{fileUploadBean.uploadFile}" multiple="true" update="messages">
</p:fileUpload>
<p:growl id="messages" showDetail="true" />
You'll need to add variable for allowed types and then update it when radio button is changed:
<p:selectOneRadio id="docType"
value="#{fileUploadBean.docType}"
layout="grid"
columns="1">
<p:ajax listener="#{fileUploadBean.updateAllowTypes}" update="#form" />
<f:selectItems var="document"
value="#{fileUpoadBean.docDescriptionList}"
itemLabel="#{docType}"
itemValue="#{docType}" />
</p:selectOneRadio>
<p:fileUpload id="docFile"
value="#{fileUploadBean.file}"
mode="advanced"
allowTypes="#{fileUploadBean.allowTypes}"
fileUploadListener="#{fileUploadBean.uploadFile}"
multiple="true"
update="messages">
</p:fileUpload>
And in Java bean:
private String allowTypes; //getters and setters
...
public void updateAllowTypes(){
allowTypes = ... //Specify allowed types
}

Input hidden is built without value

Weird this one.
On my .NET MVC 4 project I've added a file on App_Code who contains this method:
#helper CheckBox(string name, bool isChecked = false, string className = "") {
<div class="checkboxHolder">
<input id="#name" name="#name" type="hidden" value="#isChecked") />
<i class="#className checkboxBts fa #((isChecked) ? "fa-check-square-o" : "fa-square-o")" data-checkbox-associated="#name"></i>
</div>
}
I'm using it to style checkboxes using font-awesome, so my app checkboxes are made of an input type hidden who stores a boolean value and an icon to give feedback to users.
Weird thing is, on executing when isChecked == false, the hidden returned by this method is like:
<input id="myCheckboxId" name="myCheckboxId" type="hidden" />
There is no value at all, when I try to save it to the model an exception is thrown saying that model cannot be saved.
I've fixed it changing the method to use:
<input id="#name" name="#name" type="hidden" #((isChecked) ? "value=true" : "value=false") />
Which is working fine. However, I wonder if anyone know what could be happening on the original output.
Thank you all.
It's not entirely a duplicate, but this is answered in Why is my hidden input writing: value=“value” instead of true/false?:
if you have:
<input name="somefield" type="hidden" someprop="#(SomeBooleanExpression)"/>
[and #SomeBooleanExpression] is false it is omitted completely:
<input name="somefield" type="hidden"/>
To get around this, consider .ToString()
So, use:
<input id="#name" name="#name" type="hidden" value="value="#(isChecked.ToString())" />

Storing file name when uploading using Coldfusion

I am trying to store the filename of the selected file to be uploaded into a hidden input field on the form. my form looks like this
<form id="uploadattachment" enctype="multipart/form-data"
method="post" action="/governance/attachmentfilestore">
<cfif isDefined("fileUpload")>
<cffile action="upload"
fileField="fileUpload"
accept="application/pdf"
nameconflict="makeunique"
destination="#ExpandPath( '/files/governance/upr/' )#">
<input type="hidden" name="filename" id="filename" value="">
<input type="hidden" readonly id="uprUUID" name="uprUUID"
style="width: 400px" value="<cfoutput>#params.key#</cfoutput>"/>
<input type="hidden" readonly id="status" name="status"
style="width: 400px" value="1"/>
<input name="fileUpload" type="file" style="width: 200px;" />
<button type="submit" name="action"
class="submitBtn primary rightSubmitBtnSpace">Upload</button>
</form>
This is then sent to the controller which writes it to the database how ever I cannot work out a way to get the name of the file to store in the "filename" field.
Does anyone have a solution on how you can populate a field with the name of the file that is selected to be uploaded?
I have added the CFFILE.serverFile in and it worked once, but I'm guessing thats because it grabbed the previously uploaded files name.
Now when loading the page I get Serverfile is undefined in CFFILE and so it does not let me populate the form with the files name.
My code looks like this now to try and work around it how ever this doesn't seem to work either.
<cfif isDefined("CFFILE.serverFile")>
<cfset form.filename = CFFILE.serverFile>
<cfelse>
<cfset form.filename = "null">
</cfif>
<input type="hidden" name="filename" id="filename"
value="<cfoutput>#CFFILE.serverFile#</cfoutput>"/>
The filename does not become available until the file is uploaded. This happens after the form is posted. The only way around this is to try posting the fileupload via AJAX and then returning the filename.
Otherwise, you can assign the value to the field after the file is upload and the form is posted.
<cfset form.filename = CFFILE.serverfile>
You can find the file name before saving.
Railo:
GetPageContext().formScope().getUploadResource("myFormField").getName()
Adobe:
function getClientFileName(fieldName) {
var tmpPartsArray = Form.getPartsArray();
var clientFileName = "";
if (IsDefined("tmpPartsArray")) {
for (local.tmpPart in tmpPartsArray) {
if (local.tmpPart.isFile() AND local.tmpPart.getName() EQ arguments.fieldName) {
return local.tmpPart.getFileName();
}
}
}
return "";
}
Source: http://www.stillnetstudios.com/get-filename-before-calling-cffile/
As lvmisooners said,
GetPageContext().formScope().getUploadResource("myFormField").getName()
works for Railo (and Lucee) but I noticed an interesting wrinkle: if the browser is IE than this returns the full source path including the filename. Firefox and Chrome on the other hand, return only the filename.
For my application I need the full path, but haven't been able to find that if the browser is FireFox or Chrome. If anyone has any ideas I would be most grateful!
(Sorry for not replying to lvmisooners but I don't have the reputation points to reply.)