I want to create drag & drop placeholder in HTML, that will catch the location of dropped file. I target IE8 and IE9, and thought that some simple JS can handle this, but not.
I tried many variations. First thing I soon noticed from my failures is that IE8/9 doesn't support "file api", so all examples I was able to search for here at SO, can't apply. Then I tried to use iframe trick to catch file location, but it doesn't work on IE8, which supposedly works on IE9, but I didn't check.
Then I thought to stop hunting in the dark and ask more experienced what could be the way for drag & drop feature in HTML page on IE8/9, without using huge JS libraries?
Related
Most tutorials on javascript drag and drop explain how to handle file drops into the browser and how to drag data out of the browser. But I have seen almost nothing about draging a file out of the browser.
For example, you start a drag on a div element, drop it on the desktop and a file appears there.
What I have found is this: (from this example)
e.dataTransfer.setData('DownloadURL', `image/png:Luigi.png:${e.target.href}`);
However, as far as I can see, setting using DownloadURL this causes errors in chrome, a crash report in edge and doesn't do anything in firefox.
Is there a standard way to download a file through drag and drop, preferably from a url?
Ok, the problem in the example seems to be that Chrome now requires same origin on the DownloadURL.
At least that's what the Firefox developers believe that have had an issue to replicate this feature for 11 years now: https://bugzilla.mozilla.org/show_bug.cgi?id=570164
Safari doesn't seem to support it either
I noticed today that the PDF viewer within Microsoft's Edge browser is not allowing iTextSharp's PdfAction(PdfAction.PRINTDIALOG) command to work. I create my PDFs in code and add this action call to the PDF so the print dialog window will appear after opening the PDF. It works fine in Adobe Acrobat, IE & Chrome. Here is an example of the PDF I created which you can open to test the various PDF viewers:
PDF Example
Let me know if anyone else has experienced this issue and if there is any way around it. I'd much prefer not to have to move away from iTextSharp's library just to resolve this.
PdfAction.PRINTDIALOG is a JavaScript action and apparently Edge doesn't support it and/or general JS commands. (I haven't confirmed the lack of JS support yet bu I'm seeing rumblings about it.) If you look at the source you'll see that iText is just injecting the simplest of JS code possible into the document's open action:
this.print(true);
So this isn't a problem with iText in any way, this is just a limitation of Microsoft's Edge PDF renderer. Switching to another PDF library wouldn't solve this problem, either.
(Go Jacks!)
I'm currently building a site where I'm using fonts.com to display a custom font for headers and subheaders. The font gets loaded via fonts.com javascript link and is then referenced in the CSS file as:
font-family: 'MyFontFromFontsDotCom';
It works fine and performs well. In IE8, however, the browser crashes after the font gets loaded (it never loads fully though) and the site. When I hit the "stop" button in the browser, the site gets rendered with the correct font.
I have a modernizr 2.6.2 running aswell which is referenced before the fonts.com javascript. When I remove the fonts.com javascript, the site runs just fine.
The fonts.com javascript reference is at the bottom of the body tag and the modernizr is at the head tag. I tried moving them around without any luck.
Has anyone experienced the same issue?
Thanks in advance.
I came across this issue when I was cross browser testing a site on IE 8. I fixed the issue by using the 'Non-javascript' (CSS) option.
You can get to this by going to the Manage Web Fonts section on fonts.com, selecting your project and then clicking the 'Publish Options' link.
In the window that pops up there is a tab for 'Option 2: Non-Javascript', this will give you a code snippet for CSS instead of Javascript. You should paste this in the head and then remove the Javascript snippet.
I know an answer was already accepted for this, and it is perfectly valid solution (using the CSS option instead of the Javascript option), but there is another possible solution if you do need the Javascript option (I like to have the -active classes added to my document).
It turns out there is a known issue with the fonts.com Javascript on IE8 when there are unclosed tags. So if you have a situation like:
<div><span>March 2014</div>
This will cause the fonts.com Javascript to cause troubles.
So find and fix unclosed tags with the W3C validator!
I'm working on a file upload utility based on Valum's Ajax-Uploader. The idea is similar to the Gmail attachment process. The user should be able to drag a file from the desktop into the browser window and onto the file upload area to get it to upload. This works fine in the browsers that support this functionality (Firefox 3.6+, Chrome 7+).
The problem I'm running into are the styles that should be re-drawn when the user:
Drags the file anywhere in the browser
Drags the file into the upload area
I have tested in the exact same browser versions on WinXP, Vista, and Win7. The appropriate styles are redrawn. However, in Windows Server 2003, they do not.
In Win2003, when I inspect the div that should be redrawn via Firebug, the "drop-area" and "drop-area-active" classes are applied correctly. Firebug even shows the correct style declarations, but the changes are never visible.
The only difference between FF and Chrome that I'm able to spot is that in Chrome, the "drop-area-active" style is displayed for a split second when the user drops the file.
I'm not positive that it is a Windows2003 issue, but that's the only OS in which I'm able to recreate the bug.
Edit:
If you're running Win2k3, try the Gmail drag'n'drop functionality. I can see the alternate styles in other OS's, but not Win2k3.
Edit #2:
Still seeing this issue in many different places. Anyone have any suggestions? I have submitted this as a bug to the Chromium Project. Issue 68632.
http://code.google.com/p/chromium/issues/detail?id=68632
I am sure it's possible to be able to drag files onto a Flash movie inside a browser, but is it possible to achieve the same functionality with Javascript?
I have seen a site (can't remember) that did this, but I never checked if it was a pure Javascript solution compared to a Flash solution.
I am leaning towards the not side, I believe that breaks the limitations of Javascript, although if there is any solution I would love to hear it. My only worry is it won't be supported that well across different browsers.
I don't think it's possible to drag a file into a page as such.
Though some browsers may allow you to drag a file into a file upload input box. If this is the cease, perhaps you could stretch such an input via CSS and make it transparent/overlay on background to provide a "pretty" drop target.
You can do this with ActiveX, though it would only work in IE.. and here is an article describing how to do a drag/drop upload in Firefox http://straxus.javadevelopersjournal.com/creating_a_mozillafirefox_drag_and_drop_file_upload_script_p.htm
There isn't a generic way of doing this that will work for all browsers with javascript - but you could use a java applet like this: http://www.zackgrossbart.com/hackito/2007/11/28/drag-and-drop-file-uploading-made-easy/
The article which shows how to support drag and drop with an applet is at:
http://www.zackgrossbart.com/hackito/dnd-file-uploading
There's another article which shows how to do this with just JavaScript. This requires HTML5, but it works well.
http://www.thecssnin]ja.com/javascript/drag-and-drop-upload