We Keep Coding

How to tell if an image is drag-drop from the same page or drag-drop uploaded?

I have a page where users can drag images from one part and drop them to a certain area. This is supported by the drag-drop API. Meanwhile, I also support users to drag and drop images from their local computer.
The question is how I can tell if the image is drag-n-dropped from the same page or uploaded? Previously with Chrome < 96, I can use event.dataTransfer.files.length to detect. If it is from drag-drop, the length is 0, if uploaded, length is >0.
With the updates on the most recent Chrome versions, this has changed. If the img src is from remote, this works fines as before. However, my images are base64 coded, and it will be treated as a file in Chrome (length > 0). My detection on longer works.
Here is some reproducible code on my codepen: https://codepen.io/lz100/pen/BaJVvWr
On Windows and Ubuntu when you drag the first image (remote src), the file count is 0, but when you drag the second one (base64), file count is 1. When you drag and drop a local file, the file count is also 1. So I have no way to tell where the image is coming from. MacOS does not have this issue.
If you try the code above on Firefox, things work as I wanted. The same page drag-drop file count is 0, local drag-upload file count is 1, but with Safari all three cases are giving me 1, even with the remote URL one.
Maybe I should ask, is there a robust way, across platforms, across browsers to tell whether an image is a drag-drop from the same page or from a drag-drop of local files?

It turns out that if you drag-drop a file from a local origin, there is no description in the transfer event, but if the image is transferred from the same webpage, we can manually add some description.
For example, we can add some data to the dragStart event, and detect in the drop event
function handleDragStart(e) {
e.dataTransfer.setData('text/plain', 'not_uploaded');
// ....
}
img.addEventListener('dragstart', handleDragStart, false);
function handleDrop(e) {
e.preventDefault(); e.stopPropagation();
/*If dragged from current page e.dataTransfer.getData("text/plain") will be "not_uploaded"*/
if(e.dataTransfer.getData("text/plain") === "not_uploaded") {
// do something
} else {
// do other thing
}
}
el.addEventListener('drop', handleDrop, false);

Simulating drop event works in Chrome extension but not Firefox add-on?

I'm trying to simulate a drop event (with the Drag and Drop API) in a browser extension's content script. Essentially, I want to simulate a user dropping an image programmatically. I have this so far:
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file); // File object representing image being dropped
const event = new DragEvent('drop', { dataTransfer });
document.body.dispatchEvent(event);
This works great on both Chrome and Firefox when all the simulation happens natively in the browser. This JSFiddle works great in both browsers–if you upload a file, a drop is simulated and the image shows up in the preview.
The problem is when I try to accomplish the exact same thing with a browser extension, I run into problems in Firefox (but not Chrome). I've put together a demo extension that accomplishes the same thing as the JSFiddle but with a content script. On Chrome, the extension injects a file input and simulates the drop perfectly (the image shows up in #preview):
You can see (in the free-hand circle) that dataTransfer.files has a length of 1–the dropped image file is in the list. But when I use the exact same extension on Firefox:
The image was uploaded (see the input) but it was not dropped and shown in the preview. From the console, you can see that dataTransfer.files is empty in Firefox, even though dataTransfer.items has the file in it!
Why is there a discrepancy here? I checked with Mozilla's compatibility checker which said my extension was cross-platform ready. By then HTML5 spec files should be in sync with items, and no conditions AFAICT warrant an empty list on Firefox. Could this be a bug?

Thanks to wOxxOm, the problem was due to Firefox's Xray vision policy that separates global objects of content scripts and page scripts (including File). By unwrapping the page's DataTransfer object instead of the content script's, I was able to simulate the drop:
const dataTransfer = new window.wrappedJSObject.DataTransfer();

Chrome, Firefox deny image in popup; IE11, Edge fine with it

I have a JavaScript/jQuery application that dynamically creates a catalog of my film collection, based upon a JSON file. For example, if you click the Titles button, the space below the button fills with all titles in the collection. Each title line also includes a link that uses the serial number as link context, providing a small body of film information that appears within a new window (=popup). All browsers (IE11, Edge, Firefox, Chrome) behave similarly to this point.
IE11 and Edge also show a JPEG image at the bottom of that film data, where that image is a link to another JavaScript application on my server that shows the JPEG image (up to) full screen.
Chrome does not acknowledge the JPEG image at all. Firefox shows an outline of the image but does not show the image nor acknowledge the link that it is to the other JS application.
I have gone through Chrome settings enabling my site for any action Chrome specifies. No change.
Similarly for Firefox. No effect.
The attached photo shows how the Microsoft browsers display my intended effect.
Any idea what browser rule I'm violating here?
4 Feb 2016 I'm adding this link to the application discussed as it is running on my server, which therefore allows access to both the JavaScript and JSON code. Although this is a private application of no use to anyone but myself I cannot understand why the techniques used operate only within the two Microsoft browsers. A Mac-using friend confirmed today that Firefox doesn't show the image, and Safari won't even enable the links on the first page! If there is something I'm doing wrong here, I'd love to know what it is!
http://www.michaelbroschat.com/film/discCatalog.html

Javascript : drag and drop image tag

I wanted to know how to do a drag and drop image tag using javascript. I know html5 each element can be dragged but I wanted to make it work on older browser. I have made the drag and drop using javascript and it worked fine except in ie and firefox when mouse down, the mouse move event didn't react unless the user click it, and that is the reaction of ie. On firefox, the image got changed to semi-transparency and draggable but my code that dragging it.
Can anyone know how to solve this problem ? please help.

Have you tried jQuery yet? with the addon jQuery ui you can drag and drop every object on a website..
jQuery UI: draggable

Html file upload file with drag and drop support

I would like to create a file-upload field where users can just drag and drop a file onto a certain area in the browser window.
Does this work with all modern browsers?
thanks!

I found this plugin quite nice:
http://valums.com/ajax-upload/
The page has a live demo where you can drag and drop a file that gets uploaded.
Unfortunately, it only works in Chrome and Firefox, other browsers have to press a button!