Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
109 lines (86 sloc) 3.51 KB
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Dump drag&amp;drop / copy&amp;paste data</title>
<link rel="stylesheet" href=""
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/>
<body class="container">
<h1>Dump drag&amp;drop / copy&amp;paste data</h1>
Source code for this page on Github: <a href="">dump-data.html</a>
You can test it with <a href="example.html">example.html</a>.
<div id="dropTarget" class="alert alert-secondary">
Drop link here
<form onsubmit="return false;">
<div class="form-group">
<label>Paste link here:</label>
<input type="text" class="form-control" id="pasteInput"/>
<div class="form-group">
<button type="button" class="btn btn-secondary" onclick="resetAll()">Reset</button>
<h3>Found data:</h3>
<div id="dataOutput"></div>
<template id="itemOutputTemplate">
<div class="card" style="margin-bottom: 10px;">
<div class="card-header">Type</div>
<div class="card-body">
<pre class="card-text">Value</pre>
<script type="text/javascript">
function onDragOver(event) {
// Prevent default to allow drop
function onDrop(event) {
function onPaste(event) {
function resetAll() {
document.querySelector('#dataOutput').innerHTML = '';
document.getElementById('pasteInput').value = '';
function outputData(data) {
document.querySelector('#dataOutput').innerHTML = '';
if (data.items != null) {
for (let i = 0; i < data.items.length; i++) {
// In Google Chrome, the DataTransferItem is gone after the getAsString() callback
// executes, so we need to copy its information beforehand
const itemKind = data.items[i].kind;
const itemType = data.items[i].type;
data.items[i].getAsString(function (itemValue) {
console.log(itemValue, itemKind, itemType);
outputItem({kind: itemKind, type: itemType, value: itemValue});
function outputItem(item) {
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if (!('content' in document.createElement('template'))) {
alert('Please use a browser that supports templates.');
const template = document.querySelector('#itemOutputTemplate');
const dataOutput = document.querySelector('#dataOutput');
const clone = document.importNode(template.content, true);
clone.querySelector('div.card-header').textContent = item.type;
clone.querySelector('pre.card-text').textContent = item.value;
document.getElementById('dropTarget').addEventListener('dragover', onDragOver, false);
document.getElementById('dropTarget').addEventListener('drop', onDrop, false);
document.getElementById('pasteInput').addEventListener('paste', onPaste, false);