Drag and Drop from ReactJS with external URL

Viewed 35

I have an React/Electron app that shows remote files that are stored on the cloud. I would like to allow users to drag and drop these files from my app into other applications, such as Dropping into the Windows Desktop, or into Outlook Draft Email or paste into Slack. I have been following the Electron tutorial for native file drag and drop, which works if the file is stored on disk. Now, a really quick workaround exists in the tutorial, I can create a temporary file on disk and have a WriteStream write to the disk using an http request, something like:

const file = path.join(__dirname, 'picture.jpg');
const fileStream = fs.createWriteStream(file);
https.get('https://website.com/picture.jpg', (response) => {
  response.pipe(fileStream);
});

...

document.getElementById('remote_file').ondragstart = (event) => {
  event.preventDefault()
  window.electron.startDrag('picture.jpg')
}

which is all fine and dandy, except that there might be hundreds of files being rendered on screen, I don't want to write all of these to disk. In addition, what do I do if the file is pretty large and can't be downloaded in that time? I would like the functionality to basically begin downloading the file from disk when the dragStart event handler is called and make sure that the drop operation happens once the file is downloaded from the cloud.

I also tried using JS's drag and drop on the React component:

onDragStart={(e) => {
        e.dataTransfer.setData("DownloadURL", [
          "application/octet-stream:picture.jpg:https:website.com/image.jpg",
        ]);
}

which at least allows me to drag and drop the file into the windows desktop and file explorer. However, this doesn't work when trying to drag it into something like google drive, slack, or an outlook draft email.

Link to Electron Native Drag and Drop tutorial: https://www.electronjs.org/docs/latest/tutorial/native-file-drag-drop#native-file-drag--drop

0 Answers
Related