I am using the FileUpload in advanced mode. I used it before on another page in the same application where it works.
But now I am trying to use it again on another page and I can't get it working.
The 3 buttons (choose, upload and cancel) appear. When I choose a file the buttons "upload" and "cancel" are enabled but the choosen file isn't shown under the buttons.
When pressing the upload button, I get the following message (and my handler is never called):
Uncaught TypeError: Cannot read property 'submit' of undefined
Source: fileupload.js.xhtml?ln=primefaces&v=5.2:1
I have been looking with the debugger in the javascript. The error occurs in the following block of code:
upload: function() {
for (var a = 0; a < this.files.length; a++) {
this.files[a].row.data("filedata").submit()
}
},
I think this error is caused because after choosing a file, it is added to the array named files but data("filedata") should also exist and doesn't exist for the file. So the script tries to call the submit method of something undefined. I guess the undefined thing is an input which should be added to the html after choosing a file and which isn't added.
Does any one have an idea what might be causing this problem?
I have no idea whether it's relevant, but the page where the FileUpload works is for uploading images and allowTypes is specified there, while on this page I am uploading text files and the attribute allowTypes isn't specified. So I tried to choose an image file (gif or png) but that isn't shown either and in that case the buttons Upload and Cancel remain disabled.
When specifying allowTypes and selecting a bad file the error message is shown under the buttons, but when a matching file is selected it's still the same. It doesn't work.
I also posted this question on the Prime Community Forum: http://forum.primefaces.org/viewtopic.php?f=16&t=46724&p=145363&sid=54403839b9ad4535b70087b19048cf04#p145363
I have got it working now. The FileUpload was embedded in 2 panelGrids. After removing both panelGrids the FileUpload works.
It seems that a panelGrid can mess up the HTML element tree structure in such way that the FileUpload doesn't find it's own files list table any more (It uses JQuery to find it).
So, I can go on with my work.
But I still don't know what exactly happened, and I would like to know.
Related
I inherited a vuejs project. People using screen readers as assistive devices complain that their screen readers are unable to read the options in drop down menus that were made from vue-search-select. Here is how you can reproduce the issue:
Install a screen reader such as NVDA.
Turn on NVDA screen reader.
Go to https://vue-search-select.netlify.app/#/model
Tab to a search text field.
Confirm drop down of results appear.
Press the down arrow key to focus on any of the search result items.
Confirm the NVDA says the word "Blank" instead of actually reading out the contents of the selected item.
Here is a 10 second clip to that demonstrates steps 3 of 7.
https://www.youtube.com/watch?v=Nxx1k1oKETI
How do you modify vue-search-select such that in step 7, the screen reader will read out the contents of the selected item instead of reading out the word "Blank"?
Right now, as a temporary solution, I'm trying to write a setTimeout function that will automatically add the appropriate meta data to force screen readers to read out the content. But I'm not sure how successful this approach will be. I prefer an approach that is idiomatic to vue-search-select.
I tried adding a customAttr like so:
<model-select :custom-attr="ariaAttrs" />
function ariaAttrs() {
return function() { return '" aria-label="hello" tabindex="0'; }
}
Although the attributes do appear in my developer console's inspector, my screen reader still does not read out the options.
It seems custom-attr will not help you as it does not allow you to add any attr you want - anything the function returns is just placed as a value of data-vss-custom-attr attribute
Any decent Vue library with similar functionality would offer a slot to customize rendering of menu items, but this does not. Plus it doesn't seem to be maintained for a long time so maybe it is a time to look for an alternative....
I want to use something along the lines of JQuery file upload (i'm open minded) in a form with lots of other fields for the UI (ex. image previews, delete, file sizes .etc), but I want to submit the files along with the form as if i used a normal HTML file field.
Is this at all possible?
If you console.log() the form after submission you will get an object in return that has a bunch of information. Among that information you can find for example file information of the file you just upload.
You can check this http://jsfiddle.net/1r0Lprkj/1/ and open your console after you've submitted the form.
Then if you want to go deeper into this, then you can check out the Javascript FileReader which lets you do a bunch of cool stuff with the uploaded file. https://developer.mozilla.org/en-US/docs/Web/API/FileReader
To answer your question; Yes it is possible to achieve without AJAX.
We would like to add an image to our PDF in Orbeon. We explorered different tags and came up with tag. This worked the way we wanted but this tag keeps the PDF from building. We don't get any (visible) errors but a time-out occurs after couple of seconds.
To cross check: PDF build fine without the xh:img tag.
I was wondering what other options do we have. I thought about a PDF template but we would like to give the form author the option to choose his/hers own jpg from a web resource.
This is on 43PE.
User error yet we didn't change much after all.
I am trying for hours to solve the following caching problem.
My application has the following structure (simplified):
index.php - main page (contains various input fields, submit button and an iframe for dispaying PDF content with the help of TCPDF)
generate.php - generates PDF file based on the supplied POST parameters and stores the file to the filesystem
viewer.php - Displays the PDF document (TCPDF libraries). The iframe loads this script to show the pdf file
The workflow is pretty simple - the user chooses some options and clicks the submit button on the main page. The selected parameters are sent per AJAX by POST to the generate.php script. The script generates the PDF file and stores it to the filesystem. At the end it returns the newly created/edited filename. The filename is fetched in the AJAX callback function, which then refreshes the iframe with the new/edited filename:
viewer.php?filename=NEW_OR_EDITED_FILENAME
Everything is working, but when the file is being replaced, sometimes (NOT ALWAYS), the browser shows the old pdf file, although the new version is on the hard drive. I tried the following solutions:
Add Meta tags to disable cache to the generated HTML by index.php and viewer.php
Disabling cache for jQuery AJAX calls by: jQuery.ajaxSetup({cache: false});
Adding some random string to the the filename parameter:
viewer.php?filename=FILENAME_RANDOMSTRING
The RANDOMSTRING is then removed from the script and the filename is extracted.
None of these solutions worked for me. Tested browsers are: Chrome 25.0.1364.152 and Firefox 19.0. Can someone help me with this?
Thanks in advance
Just had the same problem but after adding a random string it works perfect:
<iframe src="file.pdf?=<?=time();?>"></iframe>
After many hours of trying, the solution I found is to really generate a new file each time (Solution 3 from the question without removing the random string at the end of the file). As a result it was necessary to update the database and to delete the old files on every change. My initial intention was to avoid these actions, but unfortunately no other solution was found
I have a classic asp application that uses an include file. The include file is a footer at the end of the page and works fine until the page is large and then the include file stop displaying.
Has anyone come across this?
If you end the response prior to the include directive, then the included file will not be displayed.
This could be caused by either (a) a Response.End or (b) an exception. Sometimes the exception won't be visible because it is within a non-visible element. View the page source to look for these and scroll to the end.
Check the 'long file' and see if either of these occurs.
Another possibility with very large files is that the file hasn't finished rendering the page. Make sure that the whole page has rendered.