Category: JavaScript Answers

Sometimes, we want to add a multiple files input and use file reader to preview the selected files with JavaScript.

In this article, we’ll look at how to add a multiple files input and use file reader to preview the selected files with JavaScript.

How to add a multiple files input and use file reader to preview the selected files with JavaScript?

To add a multiple files input and use file reader to preview the selected files with JavaScript, we can loop through each selected file, read them into a data URL, create an image and set the src attribute to the URL, and then append the img element to the DOM.

For instance, we write:

<input type='file' multiple>
<div>

</div>

to add an file input and a div.

Then we write:

const input = document.querySelector('input[type="file"]')
const div = document.querySelector('div')
const picReader = new FileReader();

input.onchange = async (e) => {
  for (const file of e.target.files) {
    await new Promise(resolve => {
      picReader.onload = (e) => {
        const img = new Image()
        img.src = e.target.result
        img.width = 100
        div.appendChild(img)
        resolve()
      }
      picReader.readAsDataURL(file);
    })
  }
}

to select both elements with querySelector.

Then we set the input.onchange property to a function that loops through each selected file with the for-of loop.

In the loop, we create a promise with a callback that sets the picReader.onload property to a funxction that creates a new img element with new Image().

Then we set the src to the data URL that we get from reading the file with:

img.src = e.target.result

And then we call div.appendChild with img to add the img element as the child of the div.

Next, we call resolve to resolve the promise.

Then we call readAsDataURL with file to read the file.

As a result, when we select one or more image files, we can see the selected images on the page.

Conclusion

To add a multiple files input and use file reader to preview the selected files with JavaScript, we can loop through each selected file, read them into a data URL, create an image and set the src attribute to the URL, and then append the img element to the DOM.

Sometimes, we want to validate a file upload field using JavaScript.

In this article, we’ll look at how to validate a file upload field using JavaScript.

How to validate a file upload field using JavaScript?

To validate a file upload field using JavaScript, we can check the value property.

For instance, we write:

<form>
  <input type='file'>
  <input type='submit'>
</form>

to add a form.

Then we write:

const form = document.querySelector('form')
const input = document.querySelector('input[type="file"]')

form.onsubmit = (e) => {
  e.preventDefault()
  if (input.value) {
    console.log('file selected')
  }
}

to select the form and the file input with querySelector.

Then we set the form.onsubmit property to a function that checks if input.value is truthy.

If it is, then we know the file input has a selected file.

Conclusion

To validate a file upload field using JavaScript, we can check the value property.

Sometimes, we want to remove double spaces inside a string with JavaScript.

In this article, we’ll look at how to remove double spaces inside a string with JavaScript.

How to remove double spaces inside a string with JavaScript?

To remove double spaces inside a string with JavaScript, we can call the string’s replace method with a regex.

For instance, we write:

const s = "hello         world"
const newS = s.replace(/\s{2,}/g, ' ');
console.log(newS)

We call replace with a regex that matches 2 or more spaces in s and replace them with single spaces.

Therefore, newS is 'hello world'.

Conclusion

To remove double spaces inside a string with JavaScript, we can call the string’s replace method with a regex.

Sometimes, we want to check for real touch support on a browser with JavaScript.

In this article, we’ll look at how to check for real touch support on a browser with JavaScript.

How to check for real touch support on a browser with JavaScript?

To check for real touch support on a browser with JavaScript, we can use the matchMedia global function.

For instance, we write:

const isTouch = window.matchMedia("(any-hover: none)").matches
console.log(isTouch)

to call window.matchMedia with "(any-hover: none)" to check if the device the code is running on is a touch device.

If matches is true, then the code is running on a touch device.

Conclusion

To check for real touch support on a browser with JavaScript, we can use the matchMedia global function.

Sometimes, we want to pass parameter or argument to Axios interceptor with JavaScript.

In this article, we’ll look at how to pass parameter or argument to Axios interceptor with JavaScript.

How to pass parameter or argument to Axios interceptor with JavaScript?

To pass parameter or argument to Axios interceptor with JavaScript, we can add it to the config.params object.

For instance, we write:

axios.interceptors.request.use((config) => {
  config.params = {
    ...config.params,
    myVar: 'value'
  }
  return config
})

We add the myVar property to config.params by spreading its existing properties into a new object and then add myVar after it.

Conclusion

To pass parameter or argument to Axios interceptor with JavaScript, we can add it to the config.params object.