Javascript: Long Press for File Dialog

Question

Is it possible to use long press for file dialog? For example Long Press in JavaScript? has an answer to trigger an event in long press. However, this can't be used for triggering file input click in most browsers since it is not considered as a user activation.

var pressTimer;

$("a").mouseup(function(){
  clearTimeout(pressTimer);
  // Clear timeout
  return false;
}).mousedown(function(){
  // Set timeout
  pressTimer = window.setTimeout(function() 
  {    fileChooser.click() // assume fileChoose is a file input element
       // This is suppressed by most browsers.
  },1000);
  return false; 
});

Worked for me on the latest firefox. I will say that I wasn't using jQuery for this. Sometimes you just need the raw, not the wrapped, element. https://jsfiddle.net/psc4yk76/2/ — PaulProgrammer, Jun 12 '19 at 03:28

PaulProgrammer · Accepted Answer · 2019-06-12T03:30:51.160

Sure it's possible. You'd probably have to develop your own detection for it using the mousedown and mouseup events. Calculate the time between the mousedown and mouseup and decide if the delay was long enough to cause some other action.

https://jsfiddle.net/psc4yk76/2/

(function() {
  const longtime = 500;
  const target = document.getElementById('target');
  const input = document.getElementById('input');
  const button = document.getElementById('button');

  var timedown = 0;

  button.onmousedown = () => {
    timedown = new Date().getTime();
  };

  button.onmouseup = () => {
    let timeup = new Date().getTime();
    let insert = document.createElement('div');

    if( (timeup - timedown) < longtime ) {
      insert.appendChild(document.createTextNode('Short!'));
    } else {
      insert.appendChild(document.createTextNode('Long!'));
      input.click();
    }

    target.appendChild(insert);
  }
})()

Javascript: Long Press for File Dialog

1 Answers1