In Coldfusion, using cffile upload, when a file is selected with the browse button the name of the selected file shows next to the button. So far, so good. When I submit the file for upload, the text changes back to "no file selected". This is doubtless because we are submitting a form.
However, I'm submitting the form to the same page, and would like to see the name of the file selected instead of "no file selected" which is likely to confuse the user.
The code:
<form
enctype="multipart/form-data"
method ="post"
name ="attupload"
action ="">
<cfoutput>
<table style = "margin-left: 40%">
<tr><td>
<input name="theupload"
type="file"
style = "font-family: comic sans ms;
color: ##679C9C">
</td></tr>
</table>
<div style = "width:20%; margin:5% auto 5% 45%">
<input name = "submit"
type = "submit"
class = "submitbut"
style = "font-size: 16px"
value = "Upload File">
</div>
</cfoutput>
</form>
The words 'no file selected' seem to be part of the input name = 'upload' field, but ColdFusion evidently takes control of it, and I cannot insert anything else.
Does anyone know how I can control the 'no file selected' note, so that I can put the name of the selected file back in that spot? I have tried with javascript, but it is simply ignored.
Once a file has been selected, you can access its properties via JavaScript with the File API. You can't affect the value displayed next to the default <input type="file"> field with JavaScript.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
You should also avoid submitting forms to the same page. You should follow the process:
Form page
HTTP POST to form processing page.
after form processing, <cflocation> (301 redirect) back to a list page or the form page.
When you post to the same page, the user can hit reload and be prompted to resubmit form data. This can be problematic in many situations. As an alternate, you can post the form data using Ajax or better, via Fetch. This avoids a re-post on page reload and redirecting away from the current screen.
Also, you should avoid naming an <input type="submit"> "submit". It can conflict with the JavaScript function submit() should you need to use it.
<input name = "submit"
type = "submit"
class = "submitbut"
style = "font-size: 16px"
value = "Upload File">
Related
I'm not sure I understand how to phrase my question, but I believe it's specific to ColdFusion's handling of certain AJAX form data, despite my reference to a specific JavaScript plugin.
I'm trying to implement the FilePond uploader on a ColdFusion 2011 server, and I've got it configured well on the frontend (it uploads the files to tmp folder just fine), but my problem is not knowing how to get ColdFusion to process the extra metadata it sends along with it on every upload. This data doesn't look to me like it comes in the same format as plain old hidden input fields.
When I inspect the network request with Dev Tools, it looks different to me than other forms I've processed. There are two "filepond" entries, one a JSON object and the other the binary image. When I < cfdump var="#form.FilePond#">, I only get the tmp uploaded file path, which I can process. But how do I access the JSON in my screenshot containing the "parentid"? Nothing I've tried, like form.FilePond[1], seems to work and throws errors.
Update with output from CF form processing page:
1st line is output of Form.FilePond.
2nd is cfdump of Form.
3rd is cfdump URL.
4th is cfdump of getHttpRequestData()
Update:
Bugs filed for CF2016 (core support ending for CF11 after April 2019)
CF-4204103 -
FORM scope is missing values when same named fields include type=file
CF-4204102 - sameFormFieldAsArray setting doesn't work with enctype="multipart/form-data"
After some testing, I've concluded it's a ColdFusion bug.
Issue:
The issue seems to occur under these conditions
Request is a multipart/form-data POST
Contains multiple fields with the same name
At least 1 of those fields is a file field i.e. type="file"
The first field submitted (within the group) is NOT a file field
Under those conditions, ColdFusion seems to ignore everything before the first file field. (If you check the filepond source ut confirms the metadata field is submitted before any file fields). That's why the metadata value doesn't appear when dumping the FORM scope.
Note, the this.sameFormFieldsAsArray setting has no effect because it doesn't work with multipart/form-data requests.
Test Case
Below is a test case. Notice the results are what you'd expect when the same named field occurs after the first file field?
<cfdump var="#form#" label="Form scope">
<form method="post" enctype="multipart/form-data">
<br>First:
<input type="file" name="fileFirst"><br>
<input type="text" name="fileFirst" value="Lions"><br>
<br>Last:
<input type="text" name="fileLast" value="Tigers"><br>
<input type="file" name="fileLast"><br>
<br>Middle:
<input type="text" name="fileMiddle" value="Bears"><br>
<input type="file" name="fileMiddle"><br>
<input type="text" name="fileMiddle" value="Oh My"><br>
<input type="submit">
</form>
Workaround
This blog provides a workaround using an undocumented feature of the FORM scope. Using form.getPartsArray() provides access to both "filePond" fields allowing you to extract the value of the dropped field. Not ideal, but does work until the issue is fixed.
Keep in mind this is an undocumented feature, so be sure to isolate the code for easier alterations in case Adobe alters or removes that function in the future (which they've done before, so fair warning!).
<cfscript>
// dump raw form fields
for (part in form.getPartsArray()) {
writeDump({ fieldName = part.getName()
, isFile = part.isFile()
, fieldValue = (part.isFile() ? part.getFileName() : part.getStringValue())
}
);
}
</cfscript>
I want to redirect users to a confirmation page that will display both subject and content (if there is any) if they enter a valid subject, but stay on the same page and display an error if the subject is either blank or over three hundred characters.
Here is my backend code:
def post(self):
subject = self.request.get('subject')
content = self.request.get('content')
a, b = self.validSubject(subject)
if a == True and b == True:
self.redirect('/confirm')
else:
if a == False:
error = "Title cannot be blank!"
if b == False:
error = "Title cannot be over 300 characters."
self.render("newpost.html", subject = subject, content = content, error = error)
Here is the code for the newpost.html template:
<h2>New Question</h2>
<hr>
<form method="post">
<label>
<div>Title</div>
<input type="text" id="subject" name="subject">
</label>
<label>
<div>
<textarea name="content" id="postcontent"></textarea>
</div>
</label>
<b><div class="error">{{error}}</div></b>
<input type="submit">
</form>
I've tried adding action="/confirm" to the POST form, but that redirects to /confirm even if there is an error. I've looked at the webapp2 documentation but couldn't find anything on how to pass variables on a redirect. (https://webapp-improved.appspot.com/api/webapp2.html#webapp2.redirect)
I'm using webapp2 and jinja2. Thanks for any help in advance, I've been looking at this piece of code for quite a while :(
The pattern you're trying to write doesn't work within http, irrespective of what backend platform or language you're using. Your HTML is posting to the server and the GAE code is handling the post. At that point in the interaction, the browser has already submitted and is awaiting a response from the server. You can't stop the submission at that point since it's already happened.
You should consider validating the input in Javascript before the form is even submitted to the server. That way you can suppress the submission of the form in the first place if your data isn't valid.
Take a look at the following question to see an example of this:
JavaScript code to stop form submission
I get a 403 under the following repro steps:
While logged out, try to submit a Django form that generates a validation error
Log in or signup for a valid account
Using the browser, go BACK to the page with the validation error
Resubmit the form
Results: 403 error. This is most likely expected behavior, however I'm looking for a more graceful way to handle this. Is there a good way to catch this and resubmit the form as the logged in user?
I have seen this question asked in the context of many frameworks, and the only elegant solution is JavaScript.
With JavaScript, you could store the input values in localStorage. Then on successful form submit event, clear those values. If the form is loaded with those values existing in localStorage (the form submission returned 403, and the user went back to the form page), then automatically populate the form with the values.
Its not really that complex to implement, just more work. I believe there are JS libraries based on this idea...
Give all your form elements a classname. In the example I will use store-data. This can be set in forms.Widget.attrs if you define your form in django, or just with the class attribute on input elements if you write your own html.
On submit, add an item named formData to localStorage. formData is a JS object mapping form field element ids with the classname from above to the element values.
If the form is submitted and processed as valid, on the redirect page remove formData from localStorage with localStorage.removeItem().
When loading the form page (this would be where the user went back to the form after a 403), if formData exists in localStorage then load the values into the form fields.
Here is an example form with this implemented:
<form name="myForm" action="{% url 'myapp:form_submit' %}" onsubmit="return storeData()">
<label>Name: </label>
<input type="text" class="store-data" id="inputName" />
<label>Description: </label>
<textarea class="store-data" id="textareaDescription"></textarea>
<input type="submit" />
</form>
<script>
function storeData() {
var elements = document.getElementsByClassName("store-data");
var formData = {};
// store element ids and values in formData obj
for (var i = 0; i < elements.length; i++) {
formData[elements[i].id] = elements[i].value;
}
// store formData to localStorage as string
localStorage.setItem('formData', JSON.stringify(formData));
}
// if the localStorage item has already been set, then the user tried to submit and failed
if (localStorage.getItem('formData')) {
formData = JSON.parse(localStorage.getItem('formData'))
// set all the form elements to the values that were stored when the user tried to submit
for (var key in formData) {
document.getElementById(key).value = formData[key];
}
}
</script>
And on the redirected success page, be sure to remove the formData item. Otherwise, any time the user goes back to the form the values will be loaded into the fields. (I suppose this may be a desired behavior, but I doubt it.)
<script>
localStorage.removeItem('formData');
</script>
Well, yes, it's expected behaviour. When you login, new csrf_token is generated. And when you navigate back to page with validation error, it still contains old csrf_token in <input type="hidden" name="csrfmiddlewaretoken" value="old_token" />. So you submit form with invalid csrf_token and get 403 error.
I can suggest two options for you (none of them I like)
Disable new csrf_token generation on login. Just place request.META['CSRF_COOKIE_USED'] = False after login(request, user) in your loggin view.
Disable csrf protection via decorator for your single view, or globally by removing csrf middleware from your settings.py.
I have the following HTML page which works perfectly fine as a HTML page; however when I try put it into APEX by entering the code into a Region it just goes all wrong.
When the submit button is pressed, it takes the user to a new page with the IFRAME on rather than just refreshing the page as it does in a HTML page. The other issue is the aesthetics, it looks perfect in Firefox but in IE the IFRAME is half way down the page. When investigating in Firebug I see no attributes which would cause this.
Is there a method of embedding a HTML page into an APEX form page?
<!DOCTYPE html>
<html>
<body>
<head>
</head>
<form action="http://ukserver/orderlist.asp" target="orderResults">
Enter Order Number: <input id="ord" type="text" name="ord" maxlength="50" size="20"/>
<input type="submit" value="Submit"/>
</form>
<iframe id="orderResults" name="orderResults" src="blank.html" width="100%" height="50%">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
This is the page in FireFox which as you can see looks ok.
This is the page in IE which is incorrect
Update:
The HTML page seems to work perfectly in the HTML header of the APEX page but its above my tabs and region which isnt the place where i want it. I tried to find an order (1112) and it returned the following 'File not found' which is correct.
Hi Tony, I created another IFRAME and i guess I'm half way there. I now just have to get the HTML form working, please see below:
It sounds like you have a PDF file in a folder on a server somewhere for each order. If the names of the files are predictable given the order number then you should be able to generate a link something like this:
1) Create an item to accept the order number e.g. P12_ORDER_NUMBER.
2) Create a button to submit the page
3) Create a report that displays when P12_ORDER_NUMBER is not null and selects:
select '//server/path/fileprefix' || :P12_ORDER_NUMBER || '.pdf' as url
from dual;
4) Convert the report column into a link via the column attributes so that clicking on it launches the file.
I'm new to coldfusion.
I have page called test1.cfm
<form action = "test2.cfm" method = "post">
Type your name and hit submit:<br>
<input type = "Text" name = "txt1">
<input type = "Submit" name = "" value = "submit">
</form>
And test2.cfm
<cfoutput>
success
#form.txt1#
back
</cfoutput>
Now I want to know if we can encode the displaying of text value in test2.cfm page.
For eg. if we type <br> in the textbox, test2 page will render it as html, and I want to stop rending and it should display as text.
Thanks
It's HTMLEditFormat(), not code.
Use
#htmlCodeFormat(form.txt1)#