DataTransfer an image from same page gives URL but image from different page gives file

user_17205107 0
Viewed 120

EDIT

The source of this problem is the behavior of the Edge browser, as identified by Sami. Firefox does the same thing, but Chrome works fine.

Original Question

I have a drop container for users to drag and drop an image to set an <input type="file"> with the image.

If the image is being dragged and dropped from a different page, the image is recognized as a file. However, if the image is dragged and dropped from the same page with the drop container, it is recognized as a URL.

Why isn't the image being recognized as a file when it is dragged and dropped from the same page as the drop container?

Here is the fiddle with the drop container and image file. When you drag the image file on this page into the drop container, it is recognized as a URL although I want it to be recognized as a file.

https://jsfiddle.net/nadf9c82/1/

Next, try dragging the image on this fiddle https://jsfiddle.net/7sqb5r0f/1/ into the drop container on the other fiddle and you will see it is recognized as a file, which is what I want.

Why do images on the same page as the drop container evaluate as URLs and not files? Is there a fix to make them recognized as files and not URLs?

Here is the code for reference

<div class="dropContainer" id="dropContainer">Drop Here</div>

<div id="imagetwo">
   <img src="http://a.mktgcdn.com/p/khxNbcdQcr1HQKNgk9cPNUyWUprmZ5Dryx9P5MAV0SE/2669x3840.jpg" />
</div>
<script>
dropContainer.ondrop = function(evt) {
  //evt.preventDefault();
  if(evt.dataTransfer.files[0]){
    console.log("is a file");
    const dT = new DataTransfer();
    dT.items.add(evt.dataTransfer.files[0]);
    fileInput.files = dT.files;
  }else{
    // Try dataTransfer url second
    var dataTransferUrl = evt.dataTransfer.getData('url');
    if(dataTransferUrl){
      console.log('is a url, not a file');
      console.log(dataTransferUrl);
    }
  }
};
</script>
jquery javascript
1 Answers

I think you can do it, but it won't work in Fiddle due to The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure resource ... the content must be served over HTTPS due to your HTTP request

Here's what I think, whenever you drop the image, it'll receive an URL instead of the file like you want. Then just make it into a file.

It's called convert your URL image to File object, if my way is not working, it's the keyword for you to have a look more, I hope it'll give you some ways to work around since I'm not good at this, too.

Replace this code of mine into your Try dataTransfer URL second part, but be warned that it'll fire an error on Fiddle due to HTTP request. So I've to replace the HTTP with HTTPS, but it'll get you the CORS Block, so if you have the extension to unblock CORS, it'll work, for development or testing purposes, of course.

    let url = evt.dataTransfer.getData('url');

    const urlArray = Array.from(url)
    urlArray.splice(4, 0, 's')
    const urlFinal = urlArray.join('')

    fetch(urlFinal)
        .then(async (res) => {
            const contentType = await res.headers.get('Content-Type')
            const blob = await response.blob()
            const file = new File([blob], "image.jpeg", { contentType })
        })
  }

When I drop an image to Drop Here box, it'll create an Object File, so it'll count as a file instead of an URL, I think that's what you want, hope I can help you somehow.

Take an URL as an Object File after Dragging Image and Drop it into Drop Here Box Take as an Object File

user_162403950
Related