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
Related
So we use the requestPointerLock() function to lock the mouse pointer of users while gaming on our website. Following the web.dev disable-mouse-acceleration article, I tested their pointer lock API sample and discovered that requesting pointer lock with "unadjustedMovement" works on my Chrome browser (v88.0.4324.104).
However, now something strange is happening. I basically just copied the above project by going to the source code link and click on "remix to edit". Then, I opened the sample and did the same test, resulting in the following message:
disabling mouse acceleration not supported
So basically, two identitcal project code where the original works flawlessly, but the copied project says disabling mouse accelaration is not supported.
Also, I've tested the exact same code in a local project, but same error message is returned.
Anyone an idea what's going wrong here?
The original source code
The original live test
The source code copy
The live test copy
UPDATE: It is supported by default in chromium browsers from v92
Old answer:
It is supported but only with flag
Just go to chrome://flags/#enable-pointer-lock-options and select enabled.
After relaunch go to https://unadjusted-movement.glitch.me/ and test it
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 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?
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
Is it possible for javascript or html to create a drop zone for images to be dragged into by a user? I suppose it is an image placeholder that will accept images dragged into it while the page is live?
Images from where? If you want to be able to drag images from the webpage itself, that is possible, but if you want images from outside to be dropped, that is simply not possible using JavaScript. difficult at the moment.
Edit: As #John Boker mentioned, it is possible, but at the moment, the APIs are highly non-standard and vary wildly between browsers. HTML 5 will support a standard and simpler API for this but HTML 5 itself is not a standard yet.
Some resources:
HTML5 Drag and Drop File API - currently works only in Firefox, will hopefully become standard soon
VBDataObject Interface - works only in IE
Recently http://www.dropzonejs.com/ has become quite popular.
Short Answer: Yes you can, but your browser needs to support for the Drag and Drop and File APIs that are part of HTML5. Currently, that is only Chrome 8+ and Firefox 3.6+.
July, 2011 Update: Current browsers that support this are Chrome, Firefox, Safari 6 (and Safari 5 if you use FormData objects) and IE 10 Preview 2. More information here.
IE 8 and 9 don't work, not sure if IE9 final will change this.
Safari 5 (as much as Apple touts HTML5) has no support for the File API necessary and DnD of native resources is not recognized (DnD within the page can be made to work, but that is only half the problem). You can hack around this lack in Safari 5 by using a trick of styling out an INPUT field of type "FILE" to actually not show the file path bar and utilize the fact that that Drag and Drop onto a file upload box in Safari actually inserts the full file name -- you use some JavaScript to trigger the upload as soon as they drop and viola. Here is a tutorial specifically for that hack.
Opera doesn't seem to support either API -- I've read that they are waiting out the battle of the HTML5 spec until the dust settles THEN adding support for those APIs necessary to do this.
I am actually the author of the HTML5 Drag and Drop/File API Upload tutorial linked above and used that method to implement exactly what you want at imgscalr.com -- the JavaScript is heavily commented if you want to pull it down and look at how I'm doing it.
Hope that helps.