CODEWITHSUNDEEP
javascripthtmlgoogle-chromedrag-and-dropelectron
Vijayant Katyal
Vijayant Katyal

Reputation: 662

how to drag data (in uri format) from browser to other apps

by using

dataTransfer.setData("DownloadURL", "application/octet-stream:fileName.bin:data:application/octet-stream;base64,eNcoDEdFiLEStuFf");

we can download file (written in uri format) to desktop (or any other folder).

but how to use uri format to drag into other apps. e.g. drag pdf content in uri format from html page to adobe reader, so that it can render the content.

data:application/pdf;base64,JVBERi0xLjUKJbXtrvsKMyAwIG9iago8PCAvTGVuZ3RoIDQgMCBSCiAgIC9GaWx0ZXIgL0ZsYXRlRGVjb2RlCj4+CnN0cmVhbQp4nGWSQW4DIQxF95zCJ6BgwDDH6BGqkZIsJou295cKxjaMqkSZ/wX+9vPk2wUYn58nfHwFeP46qj4eB9Tm09HgDZhVX4DoKUf1GD0FhFp9Koc5glO0A8m6IKJvIW4++pzNx8B5 RD6SmcwVp3gHSUvnefQta0zgq9IjSF0hkReUOSFbB6WtANEz+7Qj7EU6G+vmS2FNB1PG5EM6nNnMdaf6voTL9GwuEbK6+5JPBy9XEl8v/PuGWPjGtJdaQnkTctv8y8nCIvHjbSykS2j7XpfnpcuG5lhu7E4m7O+S9okv9TXJZBJo/v8kD5dnTRpgiKqv8T/paxwaAyTeKStd59DFV0K52f8FM1RDSF62NlDYXLlKfG78kKjp3Oqix7O/liKsqc9OtTMYUR/QiLo2oq7HdxlcRJhuRJh3Isx3Isx3IvEyskQpkXXR47gT9dZr6o2IGYwo50XUtRF1PQKKEsl1JtIGQqTdJaTdicQbkXh91BuRddHjshP1mdbUGxEzPNyn+wPIlfKYCmVuZHN0cmVhbQplbmRvYmoKNCAwIG9iagogICAzOTEKZW5kb2JqCjIgMCBvYmoKPDwKICAgL0V4dEdTdGF0ZSA8PAogICAgICAvYTAgPDwgL0NBIDEgL2NhIDEgPj4KICAgPj4KPj4KZW5kb2JqCjUgMCBvYmoKPDwgL1R5cGUgL1BhZ2UKICAgL1BhcmVudCAxIDAgUgogICAvTWVkaWFCb3ggWyAwIDAgODAgODAgXQogICAvQ29udGVudHMgMyAwIFIKICAgL0dyb3VwIDw8CiAgICAgIC9UeXBlIC9Hcm91cAogICAgICAvUyAvVHJhbnNwYXJlbmN5CiAgICAgIC9JIHRydWUKICAgICAgL0NTIC9EZXZpY2VSR0IKICAgPj4KICAgL1Jlc291cmNlcyAyIDAgUgo+PgplbmRvYmoKMSAwIG9iago8PCAvVHlwZSAvUGFnZXMKICAgL0tpZHMgWyA1IDAgUiBdCiAgIC9Db3VudCAxCj4+CmVuZG9iago2IDAgb2JqCjw8IC9DcmVhdG9yIChjYWlybyAxLjE0LjEgKGh0dHA6Ly9jYWlyb2dyYXBoaWNzLm9yZykpCiAgIC9Qcm9kdWNlciAoY2Fpcm8gMS4xNC4xIChodHRwOi8vY2Fpcm9ncmFwaGljcy5vcmcpKQo+PgplbmRvYmoKNyAwIG9iago8PCAvVHlwZSAvQ2F0YWxvZwogICAvUGFnZXMgMSAwIFIKPj4KZW5kb2JqCnhyZWYKMCA4CjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMDc4OSAwMDAwMCBuIAowMDAwMDAwNTA1IDAwMDAwIG4gCjAwMDAwMDAwMTUgMDAwMDAgbiAKMDAwMDAwMDQ4MyAwMDAwMCBuIAowMDAwMDAwNTc3IDAwMDAwIG4gCjAwMDAwMDA4NTQgMDAwMDAgbiAKMDAwMDAwMDk4MSAwMDAwMCBuIAp0cmFpbGVyCjw8IC9TaXplIDgKICAgL1Jvb3QgNyAwIFIKICAgL0luZm8gNiAwIFIKPj4Kc3RhcnR4cmVmCjEwMzMKJSVFT0YK

if it is possible, how to implement ?

dataTransfer.setData("application/pdf","content here ");

Upvotes: 5

Views: 873

Answers (2)

Jens Habegger
Jens Habegger

Reputation: 5446

check out the Electron API documentation for Dragging files out of a windows (replicated here for archiving):

In web page:

<a href="#" id="drag">item</a>
<script type="text/javascript" charset="utf-8">
  document.getElementById('drag').ondragstart = (event) => {
    event.preventDefault()
    ipcRenderer.send('ondragstart', '/path/to/item')
  }
</script>

In the main process:

const {ipcMain} = require('electron')
ipcMain.on('ondragstart', (event, filePath) => {
  event.sender.startDrag({
    file: filePath,
    icon: '/path/to/icon.png'
  })
})

Upvotes: 2

bmavus
bmavus

Reputation: 892

To achive that:

You must be sure that client has the application you want to use. Many user use different application to open a pdf file.

The application that you want to use must registered itself to Operating System for incoming request. (For example on MacOS, App Store application registered itself and you can open an application page by clicking the html link)

if Adobe Reader is the application you want to use, you can search about if it has some future like this.

if you want to hide pdf files from search robots you can create them in your server temp folder and create a random link to them. After client use it, you can simply delete.

Upvotes: 2

Related Questions