How can I make the following functions IE 11 compatible, using await/async?

Question

The code works in Google Chrome, Microsoft Edge, but it does not work in IE 11. IE 11 does not understand "async function". I need help translating the async function (basically the code block below) to something IE 11 would understand.

I was able to resolve some of the issues I had with sweetalert2 myself, but these three are a bit difficult for me.

The script written above is what I have to work with. Do you think I need other libraries?

To provide more clarity, I am simply placing this code on a html file and running it directly, not using any additional libraries other than aforementioned.

sweetalert2 -- how can I make the code samples IE11 compatible?

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <!-- Optional: include a polyfill for ES6 Promises for IE11 and Android browser -->
    <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>

------------------------------------------------------------------------

const {value: password} = await Swal.fire({
  title: 'Enter your password',
  input: 'password',
  inputPlaceholder: 'Enter your password',
  inputAttributes: {
    maxlength: 10,
    autocapitalize: 'off',
    autocorrect: 'off'
  }
})

if (password) {
  Swal.fire('Entered password: ' + password)
}

-----------------------------------------------------------------------

const {value: file} = await Swal.fire({
  title: 'Select image',
  input: 'file',
  inputAttributes: {
    'accept': 'image/*',
    'aria-label': 'Upload your profile picture'
  }
})

if (file) {
  const reader = new FileReader
  reader.onload = (e) => {
    Swal.fire({
      title: 'Your uploaded picture',
      imageUrl: e.target.result,
      imageAlt: 'The uploaded picture'
    })
  }
  reader.readAsDataURL(file)
}
----------------------------------------------------------------------------

const {value: file} = await Swal.fire({
  title: 'Select image',
  input: 'file',
  inputAttributes: {
    'accept': 'image/*',
    'aria-label': 'Upload your profile picture'
  }
})

if (file) {
  const reader = new FileReader
  reader.onload = (e) => {
    Swal.fire({
      title: 'Your uploaded picture',
      imageUrl: e.target.result,
      imageAlt: 'The uploaded picture'
    })
  }
  reader.readAsDataURL(file)
}
---------------------------------------------------------------------------

Answer 1

There are two things you need:

• Because Swal.fire returns a Promise, if you just use .then instead of await, you'll be able to consume the Promise with any extra complication
• IE11 does not support arrow functions or destructuring - you can quickly transpile code like this automatically with Babel

For example, for the first block:

Swal.fire({
  title: 'Enter your password',
  input: 'password',
  inputPlaceholder: 'Enter your password',
  inputAttributes: {
    maxlength: 10,
    autocapitalize: 'off',
    autocorrect: 'off'
  }
}).then(function(obj) {
  var password = obj.value;
  if (password) {
    Swal.fire('Entered password: ' + password)
  }
});

You can follow the same pattern for the other code blocks. Just replace the arrow functions with standard functions.