I'm working on an HTML5 image drag-and-drop project and encounter a problem:
If a user drag an image that is already on the page, the onDragEnter/onDragOver events are still triggered.
Is there a way to trigger the event only if the file comes from the local computer (drag from desktop, folders, etc.), not from the page itself?
Could you set the draggable attribute on all page images to false?
Related
I want to handle a custom Image from my react-code when a user drags files over my App.
I know there is setDragImage, but I think this is for elements inside the App, because it only can be called with onDragStart, which won't get triggered when I move a file from a file-explorer over the app.
So in other words: how to get rid of this picture when moving files over the browser:
I dont want this
If this only can be achieved within the browser, how to do this with WebView2 / WebKit?
Thanks a lot! :)
I tried DataTransfer.setDragImage() with an empty image, but the problem is onDragStart did not get triggered because the drag operation is coming from "outside".
I'm working on a webpage for managing files. For a feature I need to know the file name when hovering a file over a element. It's important to get this information while HOVERING not when "dropping" the file.
I created a JSFiddle with the setup. When you hover a file over the marked div you constantly get some information about the filetype.
You can get the dataTransfer from the hovering event
let transfer = event.dataTransfer;
The item property contains the file's MIME type.
transfer.items
However, you don't get full information about the file (name, size, ...).
transfer.files
When dropping the file i get full informaton about the file
transfer.files.lenght //Equal to amount of files dropped
I read in a few old posts (< 2008) that this might be a security reason, which I don't understand. There is basically no difference between hovering a file or dropping a file (apart from releasing your LMB).
Thanks your help :)
Without the protection system, it would mean a website could track everything you drag over it. Let's say you want to move a file from your finder to someplace else and your browser is in the path. Or you drag some text from word to some other app, and you happen to go even for just a short while over your browser window. Your website could access all these contents, without the user wanting to interact with it.
The mouse release is a voluntary action from the user, making it clear that he wants to transfer whichever data he is dragging to the specific web page.
Note that if you control the dragstart, you can get the info. But if your page is not the actual agent beginning the drag, then you can not assume until the item is dropped, that the user wants the content visible to your page.
I am building file uploading/drag and drop.
I used this jquery plugin: https://github.com/jaysalvat/ezdz
Dnd is working well, but I just wanted to upload huge size of the file, over 1GB.
When I drag and drop the file into dropzone, it always takes too long time to load the file in the browser(not upload - didn't click "upload" button. Just loading to the browser to load that file.)
So, I just wanted to check this progress(loading file to the browser). This is not checking uploading progress, I think this is something different with checking file uploading progress.
Is there any solution to check this?
I'm writing a Chrome extension where a canvas is modified, and I want to have the option to save the canvas data as an image. Is there any way for me (using JavaScript) to save directly to the file system (ideal) or at least prompt the user with a download menu so they can save it themselves?
There seems to be no way to do this except for these ideas:
Online backend written in PHP or something
An iframe to show the online website which would have the canvas on it
Tell the user to right click and save the canvas image
I am developing a browser extension which aims to help a user eliminate the hidden information embedded in the image he/she is uploading to the current web page. To this end, I need to detect the timing of the user's upload action. And currently I use the following code to detect the upload action:
$(document).ready(function(){
$("input[type='file']").change(function() {
...//Perform actions when all HTML elements like '<input type="file">' change values.
});
});
Using <input type="file"> element is the most straightforward way to load a file from the local file systems. In the above code, I add the "change" event listener on all <input type="file"> elements to detect if the user is uploading a file.
However, many websites use an indirect way for users to upload files. Specifically, they don't use <input type="file"> element for users to select files for upload, but provide a small icon/image. And when clicked, the icon/image will trigger a pop-up window where the user can select a local file for upload. In this case, the above code does not work because the source code of the web page doesn't contain <input type="file"> elements but the user does upload a file in the indirect way.
Take the current webpage for example. When you scroll down this page to "Your Answer" section, clicking on the small image icon next to "{ }" will allow you to select an image from computer for upload. However, the <input type="file"> element in the pop-up window cannot be detected because a browser extension basically executes on every page (tab) load (i.e DOM ready) and when the page loads, the pop-up window even doesn't exist.
Forgive my wordiness. My question is how to detect the behavior that a user is uploading an image file either in the current tab/window or in the pop-up window. Though a browser extension solution is the best, any answers will be greatly appreciated!