Handling Paste And Drag’n’drop Events With JavaScript – psst.js

psst.js is a pure JavaScript library that helps you handle file paste and drop’n’drop events on your webpage. Ideal for drag’n’drop image uploader.

How to use it:

Insert the minified version of the psst.js library into the html document.

<script src="psst.min.js"></script>

Add the ‘drop’ and ‘paste’ event handlers to the document.

document.addEventListener('drop', function(e){
  psst(e)
  .then(function(result){
      console.log(result);
  })
  .catch(function(error){
      console.error(error);
  });
}, false);
document.addEventListener('paste', function(e){
  psst(e)
  .then(function(result){
      console.log(result);
  })
  .catch(function(error){
      console.error(error);
  });
}, false);

This will result in a JSON object that contains all data about the file/data you just dropped or pasted into the page.

result.time = 1520153089036
result.type = image
result.data = data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD... (truncated)