Attach FilesJS

Installation

• add attach-files.js to your project files and import it in your HTML code:

  <script type="text/javascript" src="attach-files.js"></script>

• define a callback function that will handle the attached (pasted, dropped or picked) files:

  const myAttachFileCallback=function(attachedFiles, method){
  	/* example */
  	const firstFile=attachedFiles[0];
  	document.getElementById('attached-file-name').innerHTML='File: '+firstFile.name;
  	document.getElementById('attached-file-size').innerHTML='Size: '+firstFile.size+' bytes';
  	document.getElementById('attached-file-method').innerHTML='Method: '+method;
  
  	if(firstFile.isImage()){
  		firstFile.readAsImage(function(image){
  			document.getElementById('attached-image').src=image.src;
  		});
  	}else{
  		document.getElementById('attached-image').src='';
  	}
  };

• enable on paste events:

  onPaste.files(myAttachFileCallback); //enable paste events

• enable on drag-and-drop events:

  onDrop.files(myAttachFileCallback); //enable drag-and-drop events

• create a file picker on paste events:

  const myFilePicker=filePicker.files(myAttachFileCallback);

  open your file picker when needed:

  myFilePicker.pick();

---

Documentation

Attach Files JS provides three different objects to handle the three different methods of file attachment:

• onPaste.files(callback)
onDrop.files(callback)
filePicker.files(callback, [accept, multiple])

  Parameter callback

  function to be called when a file is attached, can be the same for all three methods and must follow this signature:

  function callback(attachedFiles, method)

  Parameter attachedFiles

  an array of objects containing the attached files information and methods to read them:

  name

  the name of the attached file

  size

  the size of the attached file in bytes

  type

  the MIME type of the attached file

  isText()

  returns true if the attached file is a text file, false otherwise

  isImage()

  returns true if the attached file is an image, false otherwise

  readAsArrayBuffer(callback)

  reads the attached file as an ArrayBuffer and calls the provided callback function with the result as parameter

  readAsText(callback)

  reads the attached file as plain text and calls the provided callback function with the result as parameter

  readAsImage(callback)

  reads the attached file as an image, and calls the provided callback function with the result as parameter (as a <img> element)

  Parameter method

  can be 'paste', 'drop' or 'picker' depending on how the file was attached

  Parameter accept File picker only Optional

  a string specifying the accepted file types, e.g., 'image/*' or '.pdf'

  Parameter multiple File picker only Optional

  a boolean indicating whether multiple files can be selected (default: false)

  Return value File picker only

  an object with several methods:

  pick()

  opens the file picker dialog

  setMultiple(boolean)

  resets whether multiple files can be selected

  setAccept(string)

  resets the accepted file types

  
  

• additionally, pasted and dropped (non-file) text can also be handled:

  onPaste.text(callback)
onDrop.text(callback)

  Parameter callback

  function to be called when text is attached, it must follow this signature:

  function callback(attachedText, method)

  Parameter attachedText

  a string containing the attached text

  Parameter method

  can be 'paste' or 'drop' depending on how the text was attached

---

Shorthand methods

For better readibility, some additional methods for the file picker are available:

• filePicker.images(callback [, multiple]); → filePicker.files(callback, 'image/*', multiple);
• filePicker.texts(callback [, multiple]); → filePicker.files(callback, 'text/*', multiple);

---

License

This project is released under MIT license.