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".
Related
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'm trying to upload multiple large files at once with Dropzone. I want to do so in asynchronous way.
It means, when I drop the files into Dropzone I want all of them to start uploading right away and at the same time I want to be able to leave the page (while uploading still continues).
When I drop multiple files now, they start to upload, but I cannot change the page immediately - the browser is waiting for the first file to be uploaded, then it finally goes to another page.
Is it possible to do the above with Dropzone? Is there some other way how to do this in PHP? Thank you.
I want all of them to start uploading right away and at the same time
I want to be able to leave the page (while uploading still continues).
Leave the page while uploading isn't possible.
A solution would be to use a singe page application, so you have never to reload the hole page. If you only change the content, it is possible to sill upload the content.
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.
I would like to add an animated loader image, which would appear after the user triggers downloading of an attachment, and disappear after the download actually starts - when the browser starts downloading the file (or displays the download confirmation dialog). The reason for it is that the attachments are quite complex documents generated on the server side, which takes some time and an animated loader would reassure the user that the page is working (and disable the download button until the download starts).
The attachment has properly set Http headers.
Here is what it looks like now:
var link = $("#download-link");
link.click(function () {
link.displayLoader();
$(document).load(link.attr("href"), function () {
link.hideLoader();
});
return false;
});
The main problem is that the load method obviously doesn't do what I would like to achieve. Is there a way to capture the actual start of downloading, triggered by window.location change?
You can do is.
Disable the whole screen until the Download is ready ( the server side processing).
And the user clicks a button download and the user directly downloads the file.
Approaches followed by most of the downloading website.
eg. Mediafire.com
PS: Disable the whole screen mean a System type dialog. disabling other options.
Why don't you show the loader image first?
If I understand correctly now, the problem is that you want the loader image to disappear once the file begins to download, and at present it disappears once the file has finished downloading?
I don't think there's an easy way to do it with jQuery, but if you drop down to using the normal JavaScript XMLHttpRequest object directly, you will get several callbacks at various stages of downloading that you can access through the readyState property.
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?