title: Resolve promise into addEventListener
body: <p>I'm actually developping a text editor and just got stuck with an issue regarding the image upload and display method.</p>
  <p><strong>What I'm trying to achieve</strong></p>
  <p>On the click of a button in the toolbar, the app displays a pop-up for uploading a picture. The user can then drag'n drop the file or click and select the file through his file system. After the image is selected, I send it to the server through ajax which uploads it and stores it in a folder. Once this is done, the server sends a response that the file is okay and ready to use. The function then resolves and the editor adds the proper link to the image.</p>
  <p>I tried something that worked while attaching event listeners in the promise.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function uploadImage(editor) {
    /* Displays the pop-up */
    uploadView.style.display = "block";
  
    var promise = new Promise(function(resolve, reject) {
  
      uploadInput.addEventListener('change', function(event) {
        /* ajax call */
        resolve(value);
      });
      dropZone.addEventListener('drop', function(event) {
        /* ajax call */
        resolve(value);
      });
  
    });
  
    promise.then(function(result) {
      /* Adds the link */
    }, function(err) {
      /* handles errors */
    });
  }</code></pre>
  </div>
  </div>
  </p>
  <p>It's all good, but everytime you trigger the function, a new listener is attached and the function inside runs another time per new click...</p>
  <p>I then thought I might remove the listeners after the promise resolves. However, in order to do so, I can't make use of anonymous functions but then I can't use my resolve method inside as it throws an error.</p>
  <p>This is not working:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function uploadImage(editor) {
    /* Displays the pop-up */
    uploadView.style.display = "block";
  
    var promise = new Promise(function(resolve, reject) {
  
      uploadInput.addEventListener('change', handleUpload);
      dropZone.addEventListener('drop', handleUpload);
  
    });
  
    promise.then(function(result) {
      /* Adds the link */
      /* Removes the listeners */
      uploadInput.removeEventListener('change', handleUpload);
      dropZone.removeEventListener('drop', handleUpload);
  
    }, function(err) {
      /* Handles errors */
      /* Removes the listeners */
      uploadInput.removeEventListener('change', handleUpload);
      dropZone.removeEventListener('drop', handleUpload);
    });
  }
  
  function handleUpload(event) {
    if (event.type == "change") {
      /* ajax call */
      resolve(value); // Throws an error
    } else {
      /* ajax call */
      resolve(value); // Throws an error
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I'm running out of idea...</p>