File Upload - Customise Browse window - asp.net-mvc-3

I've got a bit tricky problem... I've got this file upload control which is only used for uploading profile images. When it is clicked it opens a Windows explorer Browse window. I would like this window to have the filter preselected on image files (.jpg, .png, etc.) and mine only has "All Files". This is what I'm talkin about:
I would also like to set a default location for the folder. Is there any way to set this Browse window?

You could achieve that if your browser supports HTML5 by adding the accept tag to your file input:
<input type="file" name="file" accept="image/jpg, image/gif" />
If your browser doesn't support HTML5 you are pretty much busted. Prefiltering file input dialogs in legacy browsers to a certain file type simply is not supported. You will have to use Flash or some equivalent client side scripting technology. You might take a look at some file upload controls such as Plupload, BlueImp and Uploadify which are abstracting much of this hassle for you.

Related

Firefox pdf form displays a "4" in checkbox (instead of a checkmark); Works fine in IE & Chrome

I am creating a pdf document (via ColdFusion), but when I preview the rendered pdf in Firefox, I get the number "4" where my checkmarks are supposed to be (see photo below). When I preview the exact same pdf in Chrome or IE, I see the checkmark, and it all works perfectly!
I am pre-populating the pdf form fields (via ColdFusion session variables), and then rendering the pdf using the following markup:
<cfpdfform source="82040.pdf" action="populate">
<cfpdfformparam name="org" value="">
</cfpdfform>
Here is the resulting pdf form in Internet Explorer:
Note how the checkmark is rendered properly:
Here is the same form previewed in FireFox:
Note how the the checkbox has a "4" instead of a checkmark:
Any help would be greatly appreciated!
It is a bug with Firefox's PDF Viewer. Currently, there is no fix. As radiovisual's post points out, the bug in the underlying library (pdf.js) was supposedly fixed. However, there is still the issue of Mozilla updating the older version baked into Firefox (which is what most folks are using). Currently, that bug is still outstanding.
Probably the best you can do is to return the pdf as an "attachment", rather than "inline", so the browser prompts them to "open/save" the file. If the user opts to "open" the pdf, it should open with their default program instead. (Adobe Reader is the default for most users).
<cfheader name="Content-Disposition" value="attachment; filename=fileName.pdf">
<cfcontent type="application/pdf" .../>
Update:
This bug was apparently addressed already, as pointed out via the project's github repo: the bug was supposedly fixed during this commit. So if you are still experiencing problems, it either means:
You are using an outdated version of the pdf.js library,
Or, the problem has been re-introduced into the library.
So to start things off, you will want to make sure that you are using the most up-to-date version of the pdf.js library. If you are still experiencing problems, even with the most up-to-date version, then the problem is still within the embedded pdf document viewer, and there aren't too many things you can do to fix this until the project maintainer's finally fix the problem.
The issue you are experiencing (the reason why you are seeing a "4" where there should be a checkmark, is because the pdf.js library is using a special symbol font to render the checkmarks, but in problematic versions of firefox's embedded pdf-viewer the symbol font isn't rendering the checkmark correctly, so it shows a "4" instead of a checkmark -- because the checkmark symbol they are using in the custom font just so happens to be mapped to the number "4".
Similarly, for the same reasons cited above, if you assign the checkbox to render squares (instead of checks), the letter "N" will appear in the checkbox instead of a square, because the square shape symbol is mapped to the letter "N".
This problem only exists in the embedded pdf document viewer in Firefox but will look perfectly normal when viewed in Adobe Acrobat Reader, or other offline pdf readers (and other browser pdf readers, which is why it looks fine in Chrome and IE), so when users download the form, it will appear like you would expect it to.
Some workarounds / optimizations you could try:
Try one of these, or all of these, they are in no particular order (or guaranteed to work)
Don't rely on the built-in pdf.js browser extension in firefox, instead, make your own updated version based on the latest pdf.js source or target another pdf library and use it's browser-agnostic API to render and display your pdfs.
Create an HTML form for the user to fill and verify all the information, then render the pdf based on the data supplied by the HTML form, for download only (no previewing in the browser). This will force them to open the pdf in their default pdf viewer where the issue is not present, because, again, the problem you describe only happens in Firefox's embedded pdf viewer and not in other pdf viewers like Adobe Acrobat).
Make sure you have the ZapfDingBats Font installed on your server. I haven't confirmed this, but that commit that was supposed to have solved this issue seems to have added support for this font, so it is worth a try to make sure this font is accessible on your ColdFusion server, then try previewing the rendered pdf in Firefox.
Detect that the user is accessing your form via Firefox, and if so, warn the users of the issue, but assure them that downloading the form and viewing in their default pdf viewer will work as expected.
Convert the page to HTML5 (if you aren't already), then add in an HTML5 shiv (so HTML5 features can be used on older browsers), and a CSS normalizer, and test if the problem persists using these optimal settings. It's worth a shot to make sure that the problem is somehow treated differently under the HTML5 standard, since not everyone is having the same issues as you.
Lastly, make sure that your HTML is being rendered as valid markup via your ColdFusion output by using an HTML validator.
Other than that, there isn't a whole lot you can do until the mozilla team updates their embedded pdf viewer. But since the problem is only in the firefox viewer, and not in the pdf itself, it it up to you to decide if this is a deal-breaker or not, and search for alternatives.
Note: PDF.js is built into version 19+ of Firefox.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Update: You can use this pdf (which represents the character mapping of the ZapDingbats symbol font) as a way of testing your browser's interpretation of embedded fonts in the pdf rendered via pdf.js. Note that at the time of this writing, the above pdf does not display the Zapf Dingbats properly in Firefox (via pdf.js), but other browsers render them just fine (notice the "4" next to a20[x2714] in firefox, and the checkmark next to the same entry (a20[x2714]) in Chrome.

Load PDF file in codeigniter

I want to load a pdf file located in upload/grilles/ where upload is located in the root.
My code:
<?php echo $nomFichier; ?>
When I click in the link, codeigniter doesn't want to display the document unlike in a site without framework that display.
Why?
Thanks !
This is not a codeigniter problem, but a browser (Firefox) issue.
I'd recommend the PDF.JS library, which is a general-purpose, web standards-based platform for parsing and rendering PDFs.
note: your above example behave (checked on localhost ) in other browsers than FireFox as follows:
Chrome Version 34.0.1847.137: shows pdf in new window right away
IE 11: asks for permission to show the pdf, if granted shows pdf in new window right away
Safari (for windows) 5.1.7.: shows pdf in new window right away
Opera 12.11: shows pdf in new window right away
So....
It's just my URL.
The file name contains a space, but I injected the name in the url which gave:
localhost/xxxx/yyy/file%20test.pdf
but the url's file is:
localhost/xxxx/yyy/file_test.pdf
Sorry for the inconvenience

Display csv inside firefox browser

I need to open a csv file within firefox. By default, it asks me to choose a download location or to open it with an external program. However, regarding the context, I have to display it straight away inside the browser as plain text, without passing by the popup screen which asks me what to do with the file.
I tried to tweak the Firefox "mimetype.rdf" in order to force the content type "text/csv" to be opened in browser. However, I don't find much information about this file, so I was more or less guessing... This is what I came out with:
<RDF:Description RDF:about="urn:mimetype:text/csv"
NC:value="text/csv"
NC:editable="false"
NC:description="CSV page"
NC:fileExtensions="csv">
<NC:handlerProp RDF:resource="urn:mimetype:handler:text/plain"/>
</RDF:Description>
My idea was to force firefox to treat text/csv as text/plain. This code does not work. But anyway, I managed to force content type using "Mason" firefox extension. However, when the browser sees it as a text/plain, it propose me to open it with notepad or download, does not help me much.
I tried other content types, the text/html, text/xml, it always asks me to choose an external application or download.
I tried to use several extensions, "openInBrowser" and "ViewAsText" make me able to do what I want, but I have to explicitely go in a menu and click the "view as text in the browser", no possibility to set a behavior for the content type "text/csv".
How can I explain that I want all the "text/csv" to be opened inside firefox by default?
Any idea?
Thanks
You could have an upload field where the CSV file gets uploaded to the server. Using server-side code (ASPX for example) you could upload the file, then read the contents of the CSV file and display the results using a Response.Write to the browser.

Image not showing IE(all the versions)

i tried all the versions of ie but it is not showing only 1 image.
<asp:Image ID="img" runat="server" ImageUrl="~/images/FlorDecor.jpg" BorderColor="AliceBlue" BorderStyle="None" Height="126px" Width="90px" />
i tried placing this image outside the folder and giving
url = "FlorDecor.jpg"
url = "../FlorDecor.jpg"
url="~/FlorDecor.jpg"
i tried all this stuff pls help me..
Your URL references were not all valid in Silverlight (should have been "images/FlorDecor.jpg" if the file is in the images folder of your Silverlight App).
Silverlight uses different URL methods depending on whether the image is in the Silverlight project or somewhere on the source website (or an external site).
If the problem persists the cause is more likely that your JPG is not compatible for some reason.
Convert it to a PNG with Paint.Net or similar to test that theory, or just grab another JPG from the Internet instead.
Do not use .jpg file, use .png. It will works.

Visual Studio 2008 Web Project problem with PNG files

I've added a PNG file to a directory in my VS2k8 webforms project, and when I run the app, it refuses to render my image - it even knows the dimensions but renders a box with a red X.
Oddly enough, if I double click the PNG file within VS2k8, it opens up in the IDE and displays fine (but only within the IDE).
Does anyone have any clues?
The path is correct.. I just have a basic default.aspx page with this in the body
<img src="img/logo.png" />
if i navigate to img/logo.png in the browser, it shows a box with the same dimensions as my image, but a red x. Its finding the image, just not rendering it. It's showing up in IE running under the vs2k8 web server (localhost:5512/default.aspx)
I've dropped a JPG in the same directory, and it shows up just fine.
I'm not sure what type of PNG it is, but here is the kicker.... If i make an HTML file that references that image, copy both this HTML file and PNG file to my webserver (or just double click on the HTML page), it comes up JUST FINE.
Its leading me to believe that the Visual Studio web server may not recognize PNG files (at least this one) properly?
Try changing the path to:
<img src="/img/logo.png" />
Try to use Firebug on the running page. It will let you change the path dynamically so that you can see if there is a problem with the path. Alternatively you can also just copy your dev path, say "http://localhost:<someport>/img/logo.png" and see whether it loads there.
As a third alternative you could use the <asp:Image id="imageLoge" runat="server" ImageUrl="..."/>. The advantage is that it will let you browse in the folders and select your image. In this way you're guaranteed that it is not a problem with your path.

Resources