How to detect when cancel is clicked on file input

Question

How can I detect when the user cancels a file input using an html file input   onChange lets me detect when they choose a file  but I would also like to know when they cancel  close the file choose dialog without selecting anything

User · Answer

You can detect this only in limited circumstances. Specifically, in chrome if a file was selected earlier and then the file dialog is clicked and cancel clicked, Chrome clears the file and fires the onChange event.

https://code.google.com/p/chromium/issues/detail?id=2508

In this scenario, you can detect this by handling the onChange event and checking the files property.

User · Answer

Combining Shiboe s and alx s solutions  i ve got the most reliable code   var selector       lt input  gt        attr      just for example  use your own attributes           id    FilesSelector          name    File          type    file          contentEditable    false     if you  click  on input via label  this prevents IE7-8 from just setting caret into file input s text filed             on  click filesSelector   function               do some magic here  e g  invoke callback for selection begin          var cancelled   false     need this because  one calls handler once for each event type          setTimeout function                 document  one  mousemove filesSelector focusin filesSelector   function                     namespace is optional                if  selector val   length     0  amp  amp   cancelled                   cancelled   true     prevent double cancel                      that s the point of cancel                                                               1      1 is enough as we just need to delay until first available tick              on  change filesSelector   function               do some magic here  e g  invoke callback for successful selection              appendTo yourHolder  end       just for example      Generally  mousemove event does the trick  but in case user made a click and than    cancelled file open dialog by escape key  without moving a mouse   made another accurate click to open file dialog again    switched focus to any other application  than came back to browser s file open dialog and closed it  than opened again via enter or space key          we won t get mousemove event hence no cancel callback  Moreover  if user cancels second dialog and makes a mouse move  we ll get 2 cancel callbacks  Fortunately  special jQuery focusIn event bubbles up to the document in both cases  helping us to avoid such situations  The only limitation is if one blocks focusIn event either

User · Answer

When you select a file and click open cancel  the input element should lose focus aka blur  Assuming the initial value of the input is empty  any non empty value in your blur handler would indicate an OK  and an empty value would mean a Cancel    UPDATE  The blur is not triggered when the input is hidden  So can t use this trick with IFRAME-based uploads  unless you want to temporarily display the input

User · Answer

Just add  change  listener on your input whose type is file  i e   lt input type  file  id  file to upload  name  file to upload    gt    I have done using jQuery and obviously anyone can use valina JS  as per the requirement        file to upload   change function                  if  this files length                 alert  file choosen                   else                alert  file NOT choosen

User · Answer

function file click         document body onfocus        gt            setTimeout    gt               let file input   document getElementById  file input                if   file input value  alert  please choose file                else alert file input value              document body onfocus   null           100            Using setTimeout to get the certain value of the input

User · Answer

If you already require JQuery  this solution might do the work  this is the exact same code I actually needed in my case  although using a Promise is just to force the code to wait until file selection has been resolved    await new Promise resolve   gt        const input       lt input type  file   gt         input on  change   function             resolve   this  val                    body   one  focus        e   gt            resolve null           e stopPropagation                input click

User · Answer

Here is my solution  using the file input focus  not using any timers    x000D   x000D  var fileInputSelectionInitiated   false  x000D   x000D  function fileInputAnimationStart     x000D      fileInputSelectionInitiated   true  x000D      if       image-selector-area-icon   hasClass  fa-spin    x000D              image-selector-area-icon   addClass  fa-spin    x000D      if       image-selector-button-icon   hasClass  fa-spin    x000D              image-selector-button-icon   addClass  fa-spin    x000D    x000D   x000D  function fileInputAnimationStop     x000D      fileInputSelectionInitiated   false  x000D      if      image-selector-area-icon   hasClass  fa-spin    x000D              image-selector-area-icon   removeClass  fa-spin    x000D      if      image-selector-button-icon   hasClass  fa-spin    x000D              image-selector-button-icon   removeClass  fa-spin    x000D    x000D   x000D      image-selector-area-wrapper   click function  e    x000D          fileinput   focus    x000D          fileinput   click    x000D      x000D   x000D      preview-image-wrapper   click function  e    x000D          fileinput   focus    x000D          fileinput   click    x000D      x000D   x000D      fileinput   click function  e    x000D      fileInputAnimationStart    x000D      x000D   x000D      fileinput   focus function  e    x000D      fileInputAnimationStop    x000D      x000D   x000D      fileinput   change function e    x000D             x000D    x000D   x000D   x000D

User · Answer

Shiboe s solution would be a good one if it worked on mobile webkit  but it doesn t  What I can come up with is to add a mousemove event listener to some dom object at the time that the file input window is opened  like so        upload-progress   mousemove function             checkForFiles this                   checkForFiles   function me            var filefield       myfileinput            var files   filefield get 0  files          if  files    undefined    files 0     undefined    me  remove       user cancelled the upload            The mousemove event is blocked from the page while the file dialog is open  and when its closed one checks to see if there are any files in the file input  In my case I want an activity indicator blocking things till the file is uploaded  so I only want to remove my indicator on cancel    However this doesn t solve for mobile  since there is no mouse to move  My solution there is less than perfect  but I think its good enough               upload-progress   bind  touchstart   function             checkForFiles this               Now we re listening for a touch on the screen to do the same files check  I m pretty confident that the user s finger will be put on the screen pretty quickly after cancel and dismiss this activity indicator   One could also just add the activity indicator on the file input change event  but on mobile there is often a few seconds lag between selecting the image and the change event firing  so its just much better UX for the activity indicator to be displayed at the start of the process

User · Answer

Just listen to the click event as well   Following from Shiboe s example  here s a jQuery example    var godzilla       godzilla    var godzillaBtn       godzilla-btn     godzillaBtn on  click   function        godzilla trigger  click         godzilla on  change click   function         if  godzilla val                        state   html  You have chosen a Mech               else               state   html  Choose your Mech                  You can see it in action here  http   jsfiddle net T3Vwz

User · Answer

Well  this doesn t exactly answers your question  My assumption is that  you have a scenario  when you add a file input  and invoke file selection  and if user hits cancel  you just remove the input   If this is the case  then  Why adding empty file input   Create the one on the fly  but add it to DOM only when it is filled in  Like so       var fileInput       lt input type  file  name  files  style  display  none    gt         fileInput bind  change   function             if  fileInput val       null                   if has value add it to DOM                 files   append fileInput                    click      So here I create  lt input type  file    gt  on the fly  bind to it s change event and then immediately invoke click  On change will fire only when user selects a file and hits Ok  otherwise input will not be added to DOM  therefore will not be submitted   Working example here  https   jsfiddle net 69g0Lxno 3

User · Answer

You can t   The result of the file dialog is not exposed to the browser

User · Answer

There are several proposed solutions in this thread and this difficulty to detecting when the user clicks the  Cancel  button on the file selection box is a problem that affects many people   The fact is that there is no 100  reliable way to detect if the user has clicked the  Cancel  button on the file selection box  But there are ways to reliably detect if the user has added a file to the input file  So this is the basic strategy of this answer   I decided to add this answer because apparently the other answers don t work on most browsers or guaranteed on mobile devices   Briefly the code is based on 3 points    The input file is initially created dynamically in  memory  in js  we don t add it to the  HTML  at this moment   After adding the file then the input file is added to the HTML  otherwise nothing occurs  The removal of the file is done by removing the input file from the HTML by a specific event  which means that the  editing   modification  of the file is done by removing the old input file and creating a new one    For a better understanding look at the code below and the notes as well          lt button type  button  onclick  addIptFl     gt ADD INPUT FILE  lt  button gt   lt span id  ipt fl parent  gt  lt  span gt          function dynIptFl jqElInst  funcsObj        if  typeof funcsObj      undefined     funcsObj                   funcsObj                 if  funcsObj hasOwnProperty  before              if   funcsObj  before   hasOwnProperty  args                  funcsObj  before    args                           funcsObj  before    func   apply this  funcsObj  before    args               var jqElInstFl   jqElInst find  input type file             NOTE  Open the file selection box via js  By Questor     jqElInstFl trigger  click            NOTE  This event is triggered if the user selects a file  By Questor     jqElInstFl on  change    funcsObj  funcsObj   function e                NOTE  With the strategy below we avoid problems with other unwanted events            that may be associated with the DOM element  By Questor         e preventDefault             var funcsObj   e data funcsObj          if  funcsObj hasOwnProperty  after                  if   funcsObj  after   hasOwnProperty  args                      funcsObj  after    args                                   funcsObj  after    func   apply this  funcsObj  after    args                           function remIptFl             NOTE  Remove the input file  By Questor         ipt fl parent   empty        function addIptFl          function addBefore someArgs0  someArgs1           NOTE  All the logic here happens just before the file selection box opens         By Questor             SOME CODE HERE              function addAfter someArgs0  someArgs1           NOTE  All the logic here happens only if the user adds a file  By Questor             SOME CODE HERE               ipt fl parent   prepend jqElInst                  NOTE  The input file is hidden as all manipulation must be done via js         By Questor     var jqElInst         lt span gt        lt button type  button  onclick  remIptFl     gt REMOVE INPUT FILE  lt  button gt        lt input type  file  name  input fl nm  style  display  block   gt    lt  span gt            var funcsObj             before                func  addBefore              args   someArgs0  someArgs1                     after                func  addAfter                  NOTE  The instance with the input file   jqElInst   could be passed                here instead of using the context of the  addIptFl    function  That                way  addBefore    and  addAfter    will not need to be inside  addIptFl                    for example  By Questor             args   someArgs0  someArgs1                        dynIptFl jqElInst  funcsObj        Thanks   D

User · Answer

The easiest way is to check if there are any files in temporary memory  If you want to get the change event every time user clicks the file input you can trigger it   var yourFileInput       yourFileInput     yourFileInput on  mouseup   function           this  trigger  change       on  change   function         if  this files length              User chose a picture       else             User clicked cancel

User · Answer

While not a direct solution  and also bad in that it only  as far as I ve tested  works with onfocus  requiring a pretty limiting event blocking  you can achieve it with the following   document body onfocus   function      rock it       What s nice about this  is that you can attach detach it in time with the file event  and it also seems to work fine with hidden inputs  a definite perk if you re using a visual workaround for the crappy default input type  file    After that  you just need to figure out if the input value changed   An example   var godzilla   document getElementById  godzilla    godzilla onclick   charge  function charge         document body onfocus   roar     console log  chargin      function roar         if godzilla value length  alert  ROAR  FILES        else alert   empty wheeze        document body onfocus   null     console log  depleted       See it in action  http   jsfiddle net Shiboe yuK3r 6   Sadly  it only seems to work on webkit browsers  Maybe someone else can figure out the firefox IE solution

User · Answer

I see that my response would be quite outdated  but never the less  I faced with the same problem  So here s my solution  The most useful code snipped was KGA s one  But it isn t totally working and is a bit complicated  But I simplified it   Also  the main trouble maker was that fact  that  change  event doesn t come instantly after focus  so we have to wait for some time     appendfile  -  which user clicks on to append a new file  Hrefs get focus events        appendfile   one  focusin   function             no matter - user uploaded file or canceled         appendfile gets focus        change doesn t come instantly after focus  so we have to wait for some time        wrapper represents an element where a new file input is placed into     setTimeout function            if  wrapper find  input fileinput   val                           user has uploaded some file                add your logic for new file here                   else                  user canceled file upload                you have to remove a fileinput element from DOM                  900

User · Answer

I needed to do it and I ended up creating a very simple solution  Can be seen here  http   jsfiddle net elizeubh2006 1w711q0y 5    But will only work after a first file selection has occurred  For me it was useful because the onchange event was being called even when the user clicked cancel  The user chose a file  then clicked to select another file  but canceled and the onchange was called           inputFileId   on  change   function      var x   document getElementById  inputFileId        if x files length    0            alert  cancel was pressed              else               alert x files 0  name

User · Answer

This is hacky at best  but here is a working example of my solution to detect whether or not a user has uploaded a file  and only allowing them to proceed if they have uploaded a file   Basically hide the Continue  Save  Proceed or whatever your button is  Then in the JavaScript you grab the file name  If the file name does not have a value  then do not show the Continue button  If it does have a value  then show the button  This also works if they at first upload a file and then they try to upload a different file and click cancel   Here is the code   HTML    lt div class  container  gt   lt div class  row  gt       lt input class  file-input  type  file  accept  image    name  fileUpload  id  fileUpload  capture  camera  gt       lt label for  fileUpload  id  file-upload-btn  gt Capture or Upload Photo lt  label gt   lt  div gt   lt div class  row padding-top-two-em  gt       lt input class  btn btn-success hidden  id  accept-btn  type  submit  value  Accept  amp  Continue   gt       lt button class  btn btn-danger  gt Back lt  button gt   lt  div gt  lt  div gt    JavaScript        fileUpload   change function          var fileName       fileUpload   val        if  fileName                      file-upload-btn   html fileName               accept-btn   removeClass  hidden   addClass  show          else               file-upload-btn   html  Upload File                accept-btn   addClass  hidden                CSS    file-input       width  0 1px      height  0 1px      opacity  0      overflow  hidden      position  absolute      z-index  -1       file-input   label       font-size  1 25em      font-weight  normal      color  white      background-color  blue      display  inline-block      padding  5px      file-input focus   label   file-input   label hover       background-color  red      file-input   label       cursor  pointer      file-input   label         pointer-events  none      For the CSS a lot of this is to make the website and button accessible for everyone  Style your button to whatever you like

User · Answer

Most of these solutions don t work for me   The problem is that you never know which event will be triggered fist  is it click or is it change  You can t assume any order  because it probably depends on the browser s implementation   At least in Opera and Chrome  late 2015  click is triggered just before  filling  input with files  so you will never know the length of files length    0 until you delay click to be triggered after change   Here is code   var inputfile       yourid     inputfile on  change click   function ev       if  ev originalEvent    null           console log  OK clicked              document body onfocus   function            document body onfocus   null          setTimeout function                if  inputfile val   length     0  console log  Cancel clicked               1000

User · Answer

Solution for file selection with hidden input  Note  this code doesn t detect cancellation  it offers a way to circumvent the need to detect it in a common case in which people try to detect it   I got here while looking for a solution for file uploads using a hidden input  I believe that this is the most common reason to look for a way to detect cancellation of file input  open file dialog -  if a file was selected then run some code  otherwise do nothing   here s my solution   var fileSelectorResolve  var fileSelector   document createElement  input    fileSelector setAttribute  type    file     fileSelector addEventListener  input   function       fileSelectorResolve this files 0       fileSelectorResolve   null     fileSelector value            function selectFile       if fileSelectorResolve         fileSelectorResolve          fileSelectorResolve   null          return new Promise function resolve         fileSelectorResolve   resolve        fileSelector dispatchEvent new MouseEvent  click                Usage example   Note that if no file was selected then the first line will return only once selectFile   is called again  or if you called fileSelectorResolve   from elsewhere    async function logFileName       const file   await selectFile       if  file  return     console log file name       Another example   async function uploadFile       const file   await selectFile       if  file  return             make an ajax call here to upload the file

User · Answer

You can make a jquery change listener on the input field and detect that user cancel or closed upload window by the value of the field   here is an example     when upload button change     upload btn   change function          get uploaded file     var file   this files 0          if user choosed a file     if file             upload file or perform your desired functiuonality      else            user click cancel or close the upload window

User · Answer

So I ll throw my hat into this question since I came up with a novel solution  I have a Progressive Web App which allows users to capture photos and videos and upload them  We use WebRTC when possible  but fall back to HTML5 file pickers for devices with less support  cough Safari cough   If you re working specifically on an Android iOS mobile web application which uses the native camera to capture photos videos directly  then this is the best solution I have come across   The crux of this problem is that when the page loads  the file is null  but then when the user opens the dialog and presses  Cancel   the file is still null  hence it did not  change   so no  change  event is triggered  For desktops  this isn t too bad because most desktop UI s aren t dependent on knowing when a cancel is invoked  but mobile UI s which bring up the camera to capture a photo video are very dependent on knowing when a cancel is pressed   I originally used the document body onfocus event to detect when the user returned from the file picker  and this worked for most devices  but iOS 11 3 broke it as that event is not triggered   Concept  My solution to this is  shudder  to measure CPU timing to determine if the page is currently in the foreground or the background  On mobile devices  processing time is given to the app currently in the foreground  When a camera is visible it will steal CPU time and deprioritize the browser  All we need to do is measure how much processing time our page is given  when camera launches our available time will drop drastically  When the camera is dismissed  either cancelled or otherwise   our available time spike back up   Implementation  We can measure CPU timing by using setTimeout   to invoke a callback in X milliseconds  and then measure how long it took to actually invoke it  The browser will never invoke it exactly after X milliseconds  but if it is reasonable close then we must be in the foreground  If the browser is very far away  over 10x slower than requested  then we must be in the background  A basic implementation of this is like so   function waitForCameraDismiss       const REQUESTED DELAY MS   25    const ALLOWED MARGIN OF ERROR MS   25    const MAX REASONABLE DELAY MS         REQUESTED DELAY MS   ALLOWED MARGIN OF ERROR MS    const MAX TRIALS TO RECORD   10     const triggerDelays         let lastTriggerTime   Date now       return new Promise  resolve    gt        const evtTimer        gt             Add the time since the last run       const now   Date now          triggerDelays push now - lastTriggerTime         lastTriggerTime   now            Wait until we have enough trials before interpreting them        if  triggerDelays length  lt  MAX TRIALS TO RECORD            window setTimeout evtTimer  REQUESTED DELAY MS           return                    Only maintain the last few event delays as trials so as not          to penalize a long time in the camera and to avoid exploding          memory        if  triggerDelays length  gt  MAX TRIALS TO RECORD            triggerDelays shift                      Compute the average of all trials  If it is outside the          acceptable margin of error  then the user must have the          camera open  If it is within the margin of error  then the          user must have dismissed the camera and returned to the page        const averageDelay             triggerDelays reduce  l  r    gt  l   r    triggerDelays length       if  averageDelay  lt  MAX REASONABLE DELAY MS               Beyond any reasonable doubt  the user has returned from the            camera         resolve            else              Probably not returned from camera  run another trial          window setTimeout evtTimer  REQUESTED DELAY MS                      window setTimeout evtTimer  REQUESTED DELAY MS             I tested this on recent version of iOS and Android  bringing up the native camera by setting the attributes on the  lt input   gt  element    lt input type  file  accept  image    capture  camera    gt   lt input type  file  accept  video    capture  camcorder    gt    This works out actually a lot better than I expected  It runs 10 trials by requesting a timer to be invoked in 25 milliseconds  It then measures how long it actually took to invoke  and if the average of 10 trials is less than 50 milliseconds  we assume that we must be in the foreground and the camera is gone  If it is greater than 50 milliseconds  then we must still be in the background and should continue to wait   Some additional details  I used setTimeout   rather than setInterval   because the latter can queue multiple invocations which execute immediately after each other  This could drastically increase the noise in our data  so I stuck with setTimeout   even though it is a little more complicated to do so   These particular numbers worked well for me  though I have see at least once instance where the camera dismiss was detected prematurely  I believe this is because the camera may be slow to open  and the device may run 10 trials before it actually becomes backgrounded  Adding more trials or waiting some 25-50 milliseconds before starting this function may be a workaround for that   Desktop  Unfortuantely  this doesn t really work for desktop browsers  In theory the same trick is possible as they do prioritize the current page over backgrounded pages  However many desktops have enough resources to keep the page running at full speed even when backgrounded  so this strategy doesn t really work in practice   Alternative solutions  One alternative solution not many people mention that I did explore was mocking a FileList  We start with null in the  lt input   gt  and then if the user opens the camera and cancels they come back to null  which is not a change and no event will trigger  One solution would be to assign a dummy file to the  lt input   gt  at page start  therefore setting to null would be a change which would trigger the appropriate event   Unfortunately  there s no way official way to create a FileList  and the  lt input   gt  element requires a FileList in particular and will not accept any other value besides null  Naturally  FileList objects cannot be directly constructed  do to some old security issue which isn t even relevant anymore apparently  The only way to get ahold of one outside of an  lt input   gt  element is to utilize a hack which copy-pastes data to fake a clipboard event which can contain a FileList object  you re basically faking a drag-and-drop-a-file-on-your-website event   This is possible in Firefox  but not for iOS Safari  so it was not viable for my particular use case   Browsers  please     Needless to say this is patently ridiculous  The fact that web pages are given zero notification that a critical UI element has changed is simply laughable  This is really a bug in the spec  as it was never intended for a full-screen media capture UI  and not triggering the  change  event is technically to spec   However  can browser vendors please recognize the reality of this  This could be solved with either a new  done  event which is triggered even when no change occurs  or you could just trigger  change  anyways  Yeah  that would be against spec  but it is trivial for me to dedup a change event on the JavaScript side  yet fundamentally impossible to invent my own  done  event  Even my solution is really just heuristics  if offer no guarantees on the state of the browser   As it stands  this API is fundamentally unusable for mobile devices  and I think a relatively simple browser change could make this infinitely easier for web developers  steps off soap box

User · Answer

Use hover instead of blur  var fileInput       fileInput     if  fileInput is   hover             open   else

User · Answer

I found this atribute  its most simple yet   if      selectedFile   0  files length  gt  1          Clicked on  open  with file   else         Clicked on  cancel      Here  selectedFile is an input type file

User · Answer

A lot of people keep suggesting the change event    even though OP specified that this doesn t work in the question  CLICKING CANCEL DOES NOT SELECT A FILE AND THUS WILL NOT TRIGGER A CHANGE TO FILE INPUT    all the code most people are suggesting will NOT run when cancel is clicked  After a lot of experimentation based on suggestions from people who actually read OP s question  I ve come up with this class to wrap the functionality of the file input and added two custom events   choose  The user has chosen a file  still triggers if they select the same file again   cancel  The user has clicked cancel or otherwise closed the file dialog with no selection   I ve also added redundancy  listen to multiple events to try and determine if cancel was pressed   Might not always respond right away but should at least guarantee that a cancel event is registered when the user re-engages the page  Finally I noticed that events are not always guaranteed to happen in the same order  especially when the dialog closing triggers them all at nearly the same instant   This class waits for 100ms to make sure that the change event has fired before it checks for a success flag  Uses ES6 class so probably won t work for anything before that FYI  though you could probably edit it if you wanna waste your time making it work on IE   The Class  class FileManager          Keep important properties from being overwritten     constructor             Object defineProperties this                   The file input element  hidden               fileInput                    value  document createElement  input                    writeable  false                  enumerable  false                  configurable  false                               Flag to denote if a file was chosen              chooseSuccess                    value  false                  writable  true                                Keeps events from mult-firing                Don t want to consume just incase               eventFiredOnce                    value  false                  writable  true                                Called BEFORE dialog is shown              chooseStart handler                    value   event    gt                           Choose might happen  assume it won t                     this  chooseSuccess   false                          Allow a single fire                     this  eventFiredOnce   false                          Reset value so repeat files also trigger a change choose                     this  fileInput value                                 File chooser is semi-modal and will stall events while it s opened                           Beware  some code can still run while the dialog is opened                             Window will usually focus on dialog close                        If it works this is best becuase the event will trigger as soon as the dialog is closed                        Even the user has moved the dialog off of the browser window is should still refocus                     window addEventListener  focus   this  chooseEnd handler                           This will always fire when the mouse first enters the body                        A good redundancy but will not fire immeditely if the cance button is not                           in window when clicked                     document body addEventListener  mouseenter   this  chooseEnd handler                           Again almost a guarantee that this will fire but it will not do so                           imediately if the dialog is out of window                      window addEventListener  mousemove   this  chooseEnd handler                                      writeable  false                  enumerable  false                  configurable  false                             chooseEnd handler                       Focus event may beat change event                    Wait 1 10th of a second to make sure change registers                  value   event    gt                           queue one event to fire                     if  this  eventFiredOnce                          return                          Mark event as fired once                     this  eventFiredOnce   true                         double call prevents  this  context swap  IHT                      setTimeout  event    gt                            this  timeout handler event                          100                                      writeable  false                  enumerable  false                  configurable  false                             choose handler                    value   event    gt                           A file was chosen by the user                        Set flag                     this  chooseSuccess   true                         End the choose                     this  chooseEnd handler event                                      writeable  false                  enumerable  false                  configurable  false                             timeout handler                    value   event    gt                        if   this  chooseSuccess                               Choose process done  no file selected                            Fire cancel event on input                         this  fileInput dispatchEvent new Event  cancel                           else                              Choose process done  file was selected                            Fire chosen event on input                         this  fileInput dispatchEvent new Event  choose                                                   remove listeners or cancel will keep firing                     window removeEventListener  focus   this  chooseEnd handler                       document body removeEventListener  mouseenter   this  chooseEnd handler                       window removeEventListener  mousemove   this  chooseEnd handler                                      writeable  false                  enumerable  false                  configurable  false                            addEventListener                    value   type  handle    gt                        this  fileInput addEventListener type  handle                                      writeable  false                  enumerable  false                  configurable  false                            removeEventListener                    value   type  handle    gt                        this  fileInput removeEventListener type  handle                                      writeable  false                  enumerable  false                  configurable  false                               Note  Shadow clicks must be called from a user input event stack              openFile                    value       gt                           Trigger custom pre-click event                     this  chooseStart handler                            Show file dialog                     this  fileInput click                               Code will still run after this part  non halting                         Events will not trigger though until the dialog is closed                                                     this  fileInput type    file           this  fileInput addEventListener  change   this  choose handler                 Get all files     get files             return this  input files                Get input element  reccomended to keep hidden       get domElement            return this  fileInput                Get specific file     getFile index            return index     undefined   this  fileInput files 0    this  fileInput files index                 Set multi-select     set multiSelect value            let val   value    multiple                this  fileInput setAttribute  multiple   val                 Get multi-select     get multiSelect             return this  fileInput multiple      multiple    true   false           Usage Example     Instantiate let fm   new FileManager        Bind to something that triggers a user input event  buttons are good  let btn   document getElementById  btn        Call openFile on intance to show the dialog to the user btn addEventListener  click    event    gt      fm openFile            Fires if the user selects a file and clicks the  okay  button fm addEventListener  choose    event    gt      console log  file chosen      fm getFile 0  name           Fires if the user clicks  cancel  or closes the file dialog fm addEventListener  cancel    event    gt      console log  File choose has been canceled          Might be very late but I think this is a decent solution that covers most of the crippling edge cases  I ll be using this solution myself so I might come back with a git repo eventually after I play with it and refine it more

User · Answer

You can catch the cancel if you choose the same file as previously and you click cancel  in this case   You can do it like this    lt input type  file  id  myinputfile   gt   lt script gt  document getElementById  myinputfile   addEventListener  change   myMethod  false   function myMethod evt      var files   evt target files     f  files 0     if  f  undefined            the user has clicked on cancel       else if  f name match      jpg     f name match      png                  the user has choosen an image file      var reader   new FileReader         reader onload   function evt             try           myimage src evt target result                             catch  err                                                  reader readAsDataURL f              lt  script gt

User · Answer

Tested on Google Chrome       input type file    bind  change   function         var selected file name     this  val        if   selected file name length  gt  0                Some file selected              else              No file selected or cancel close            dialog button clicked               If user has select a file before             when they submit  it will treated as            no file selected

User · Answer

We achieved in angular like below      bind click event on input type file    Attach focus event with window and add condition if uploadPanel is true then show console  when click on input type file the boolean uploadPanel value is true  and dialogue box appear  when cancel OR Esc button click then dialogue box dispensary and console appear      HTML    lt input type  file  formControlName  FileUpload  click   handleFileInput  event target files     gt              gt    TS  this uploadPanel   false  handleFileInput files  FileList        this fileToUpload   files item 0       console log  ggg    files       this uploadPanel   true          HostListener  window focus      event      onFocus event  FocusEvent   void       if  this uploadPanel    true            console log  cancel clicked           this addSlot          get  FileUpload            setValidators             Validators required            FileValidator validate            requiredFileType  png                     this addSlot get  FileUpload   updateValueAndValidity

User · Answer

enter code here  lt  DOCTYPE html gt   lt html lang  en  gt     lt head gt       lt meta charset  UTF-8    gt       lt meta name  viewport  content  width device-width  initial-scale 1 0    gt       lt meta http-equiv  X-UA-Compatible  content  ie edge    gt       lt title gt Document lt  title gt     lt  head gt     lt body gt       lt h1 gt Hello lt  h1 gt       lt div id  cancel01  gt         lt button gt Cancel lt  button gt       lt  div gt        lt div id  cancel02  gt         lt button gt Cancel lt  button gt       lt  div gt        lt div id  cancel03  gt         lt button gt Cancel lt  button gt       lt  div gt        lt form gt         lt input type  file  name  name  placeholder  Name    gt       lt  form gt        lt script gt        const nameInput   document querySelector  input type  file                             The below code if for How to detect when cancel is clicked on file input                      nameInput addEventListener  keydown   e   gt                              If the cancel button is clicked then you should change the input file value to empty                           if  e key     Backspace     e code     Backspace     e keyCode    8              console log e                                  The below code will delete the file path                              nameInput value                                lt  script gt     lt  body gt   lt  html gt

User · Answer

The following seems to work for me  on desktop  windows    var openFile   function  mimeType  fileExtension        var defer    q defer        var uploadInput   document createElement  input        uploadInput type    file       uploadInput accept         fileExtension         mimeType       var hasActivated   false       var hasChangedBeenCalled   false      var hasFocusBeenCalled   false      var focusCallback   function              if  hasActivated                hasFocusBeenCalled   true              document removeEventListener  focus   focusCallback  true               setTimeout function                      if   hasChangedBeenCalled                        uploadInput removeEventListener  change   changedCallback  true                       defer resolve null                                    300                         var changedCallback   function              uploadInput removeEventListener  change   changedCallback  true           if   hasFocusBeenCalled                document removeEventListener  focus   focusCallback  true                     hasChangedBeenCalled   true          if  uploadInput files length     1                  File picked             var reader   new FileReader                reader onload   function  e                    defer resolve e target result                              reader readAsText uploadInput files 0                      else               defer resolve null                        document addEventListener  focus   focusCallback  true     Detect cancel     uploadInput addEventListener  change   changedCallback  true     Detect when a file is picked     uploadInput click        hasActivated   true      return defer promise      This does use angularjs  q but you should be able to replace it with any other promise framework if needed   Tested on IE11  Edge  Chrome  Firefox  but it does not seem to work on Chrome on a Android Tablet as it does not fire the Focus event

User · Answer

The new File System Access API will make our life easy again    try       const  fileHandle    await window showOpenFilePicker        const file   await fileHandle getFile                 catch  e        console log  Cancelled  no file selected       Browser support is very limited  Jan  2021   The example code works well in Chrome Desktop 86

User · Answer

I know this is a very old question but just in case it helps someone  I found when using the onmousemove event to detect the cancel  that it was necessary to test for two or more such events in a short space of time  This was because single onmousemove events are generated by the browser  Chrome 65  each time the cursor is moved out of the select file dialog window and each time it is moved out of the main window and back in  A simple counter of mouse movement events coupled with a short duration timeout to reset the counter back to zero worked a treat

User · Answer

There is a hackish way to do this  add callbacks or resolve some deferred promise implementation instead of alert   calls      var result   null       lt input type  file    gt         on  change   function              result   this files 0           alert  selected                 click     setTimeout function            document  one  mousemove   function              if   result                alert  cancelled                         1000     How it works  while file selection dialog is open  document does not receive mouse pointer events  There is 1000ms delay to allow the dialog to actually appear and block browser window  Checked in Chrome and Firefox  Windows only    But this is not a reliable way to detect cancelled dialog  of course  Though  might improve some UI behavior for you

User · Answer

In my case i had to hide submit button while users were selecting images   This is what i come up     document  on  click     image-field   function e          submit-button   prop  disabled   true       document  on  focus     image-field    function e          submit-button   prop  disabled   false        image-field is my file selector  When somenone clicks on it  i disable the form submit button  The point is  when the file dialog closed - doesn t matter they select a file or cancel -  image-field got the focus back  so i listen on that event   UPDATE  I found that  this does not work in safari and poltergeist phantomjs  Take this info into account if you would like to implement it

User · Answer

The file-type field  frustratingly  doesn t respond to a lot of events  blur would be lovely   I see a lot of people suggesting change-oriented solutions and them getting downvoted   change does work  but it has a major flaw  vs what we want to happen    When you freshly load a page containing a file field  open the box and press cancel  Nothing  frustratingly  changes   What I chose to do is load in a gated-state     The next part of the form a section after-image in my case is hidden from view  When my file field changes  an upload button is shown  Upon successful upload  section after-image is shown  If the user loads  opens the file-dialog  then cancels out  they never see the upload button  If the user chooses a file  the upload button is shown  If they then open the dialog and cancel  the change event is triggered by this cancel  and there I can  and do  re-hide my upload button until a proper file is selected    I was fortunate that this gated-state was already the design of my form  You do not need to use the same style  merely having the upload button initially hidden and upon change  setting a hidden field or javascript variable to something you can monitor on submit   I tried changing the value of files 0  before the field was interacted with  This didn t do anything regarding onchange    So yes  change works  at least as good as we re going to get  The filefield is secured  for obvious reasons  but to the frustration of well-intentioned developers   It s not fitting to my purpose  but you might be able to  onclick  load a warning prompt  not an alert    because that stalls page-processing   and hide it if change is triggered and files 0  is null  If change is not triggered  the div remains in its state

[html] How to detect when cancel is clicked on file input?

Examples related to html

Examples related to file

Examples related to input