Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
Vue Answers

How to Force Download with GET Request using Axios?

black short coated dog on persons hand

Sometimes, we want to download files from responses made with GET requests.

In this article, we’ll look at how to download files from responses made with GET requests.

Force Download with GET Request using Axios

We can make the response always download by passing our response data into the Blob constructor.

For instance, we can write:

axios
  .get(`download-pdf`, {
    responseType: 'arraybuffer'
  })
  .then(response => {
    const blob = new Blob(
      [response.data],
      { type: 'application/pdf' }
    ),
    const url = window.URL.createObjectURL(blob);
    window.open(url) ;
  })

We make a GET request to the download-pdf endpoint to download our PDF.

We make sure that we specify that the responseType is 'arraybuffer' to indicate that it’s a binary file.

Then in the then callback, we get the response parameter, which has the data we want in the data property.

We pass that into the Blob constructor in an array.

And we specify the MIME type of the response data.

Then we create the URL that lets us download the file with createObjectURL .

Finally, we call window.open with the url to download the file.

We can also specify the file name of the downloaded file by making a small change in the then callback.

To do that, we write:

axios
  .get(`download-pdf`, {
    responseType: 'arraybuffer'
  })
  .then(response => {
    const blob = new Blob(
      [response.data],
      { type: 'application/pdf' }
    ),
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = "file.pdf";
    link.click();
  })

Instead of creating an object URL directly, we create an invisible link first and set the file name as the download property of it.

Then we call click to download it.

Conclusion

We can make the response always download by passing our response data into the Blob constructor.

Categories
JavaScript Answers

How to Add or Update an Attribute to an HTML Element Using JavaScript?

short-coated white and beige puppy on the floor

One way to add or update an attribute is to use the setAttribute method.

For instance, we can write:

<div>  
  hello world  
</div>

And:

const d = document.querySelector('div');  
d.setAttribute('style', 'color: red')

to set the text color of the div to red.

We call setAttribute with 'style' and 'color: red' to add the style attribute with the value in the 2nd argument.

Use Set the Property of the Element

We can also set the property with the attribute name to add an attribute.

For instance, we can write:

<div>  
  hello world  
</div>

And:

const d = document.querySelector('div');  
d.style = 'color: red'

Then we set the style attribute with the ‘color: red’ string.

Categories
JavaScript Answers

How to Position a Div in a Specific Coordinate with JavaScript?

yellow Labrador retriever lying on sofa

We can set the style.top and style.left properties to position a div in a specific coordinate with JavaScript.

For instance, we can write:

<div>  
  hello world  
</div>

Then we can set the position of the div by writing:

const d = document.querySelector('div');  
d.style.position = "absolute";  
d.style.left = '10px';  
d.style.top = '20px';

We get the div with document.querySelector .

Then we set its position CSS property to 'absolute' with:

d.style.position = "absolute";

Then we set the left and top CSS properties with:

d.style.left = '10px';  
d.style.top = '20px';

The unit must be specified for left and top.

Categories
JavaScript Answers

How to Access JPEG EXIF Rotation Data in JavaScript on the Client-Side?

red and white happy birthday card

We can use the JavaScript-Load-Image library to load EXIF metadata from an image.

To use it, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.18.0/load-image.all.min.js"></script>

<input type='file'>

We add the load-image.all.min.js script to add the metadata parser with the core library.

Then to parse the EXIF metadata, we write:

const input = document.querySelector('input')
input.addEventListener('change', (e) => {
  const [file] = [...e.target.files]
  loadImage.parseMetaData(
    file,
    (data) => {
      console.log(data.exif)
    }, {
      includeExifTags: {
        0x0112: true,
        ifd1: {
          0x0201: true,
          0x0202: true
        },
        0x8769: {
          0x9000: true
        }
      }
    }
  )
})

We get the file from the input and assign it to the file object.

Then we call the loadImage.parseMetaData to parse the EXIF metadata from the image.

Next, we pass in the file object and the callback with the data which has the data.exif property which has the EXIF metadata in an object.

The 3rd argument is an object with the EXIF tags we want to get.

They include 0x0112 for orientation, 0x0201 for thumbnail data offset, 0x0202 for data length, 0x8769 for EXIF pointer, and 0x9000 for EXIF version.

Now when we select an image file, we should see the EXIF data loaded.

Categories
JavaScript Answers

How to Hide a Div After a Few Seconds with JavaScript and jQuery?

dog holding mushroom

We can use the jQuery fadeOut method to hide a div.

And we can combine that with setTimeout to delay the execution of fadeOut .

If we have the following HTML:

<div id='mydiv'>  
  hello world  
</div>

Then we can call fadeOut by writing:

setTimeout(() => {  
  $('#mydiv').fadeOut('fast');  
}, 1000);

We call fadeOut in the setTimeout callback with a delay of 1000 milliseconds.

And now we should see the div fade away after 1 second.