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.
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".
My issue is that I have to deploy a local server (without internet), so I cannot use Google Doc Viewer in this case. All I want is to restrict the user from download or printing the document. I have tried hiding or removing the toolbar in JS but it is not working out.
You may be able to disable the toolbar somehow, but that isn't good enough to keep users from downloading or printing it anyway, and nothing you can do will be. If a person can see something, they can copy it, no matter what you try to do to stop them (and all trying will do is inconvenience legitimate users). Previous similar questions:
How to prevent downloading images and video files from my website?
disable downloading of image from a html page
https://graphicdesign.stackexchange.com/questions/39462/is-it-possible-to-prevent-download-of-images-when-designing-a-website
Although those talk about images, the exact same reasoning applies to PDFs.
how to restrict user to save images from site not by disabling right click.
I tried disabling right click but it is causing problem for image with link, as we unable to right click on that image to open a lick in a new tab.
Any other good solution or advise??
If the end user can see the image, it's already on his system. Saving it to a system or copying it to the clipboard is trivial and cannot be disabled in any reliable way.
If you want to keep control over the image, don't put it on the internet.
Watermarking is the best solutionyou can do.
Whatever your solution, in the end user can take a screen shot anyway.
Make use of images with water mark of your site.
If a user can see the image on screen you can not restrict the user form saving the image.
1) user can use print screen option.
2)user can save the page with complete html option.this way she/he will get image.
3)user can take the snapshot of image if it is visible in forntend to the user.
You can try to serve images with your logo or string identifying your property so that it renders the image useless unless they are OK using it as is. However you can't prevent the saving of what is served. Another option is to serve only thumbnails or lower quality version of it.
Stay away from disabling normal user actions, like right-click disabling.
I have an iFrame with custom website page loaded into it. I am trying to find a way to get the word or text the mouse was hold down over it on that page using JS. To make it more clear, when the mouse was hold down on a specific word on the web page I want to do some actions in JS.
How can I do this check? I dont' have control over the web page content, I may load this StackOverFlow Question in the iFrame and if the user clicked on this bold word I want to do some actions in JS.
Any idea?
You won't be able to access the contents of external iframes for security reasons (this includes setting event handlers). This response explains it further.
I want to give the user possibility to paste an image into a webform. I don't need to display the image, all I need is the image's location.
I know it's possible because the guys at CKEditor(and other editors) are doing it.
If you go here, http://ckeditor.com/demo and paste an image you copied and then right click on it and go to image properties you'll see they have the image's address.
How can this be done?
Thanks
It is not possible because giving a browser the possibility to access local files, which have not been added to be uploaded explicitly by the user, opens a variety of very dangerous security holes that would certainly be super-exploited by hackers.
A good solution would be to give the posibility to upload using Ajax and link the images in the document once they are available in the server.
Take a look at “Sending files using a FormData object” part of the Using XMLHttpRequest document at Mozilla Developer Network.