Axios File Upload

1const config = {
2    headers: { "X-Requested-With": "XMLHttpRequest" },
3    onUploadProgress: function(progressEvent) {
4      // Do whatever you want with the native progress event
5      // console.log('progressEvent', progressEvent);
6      var progress = Math.round((progressEvent.loaded * 100.0) / progressEvent.total);
7      document.getElementById('progress').style.width = progress + "%";
8
9      console.log(`onUploadProgress progressEvent.loaded: ${progressEvent.loaded},
10    progressEvent.total: ${progressEvent.total}`);
11    }
12  };
13  axios.post(url, fd, config)
14            .then(function (res) {
15              // console.log('res', res)
16              // File uploaded successfully
17              var response = res.data;
18              // https://res.cloudinary.com/cloudName/image/upload/v1483481128/public_id.jpg
19              var url = response.secure_url;
20              // Create a thumbnail of the uploaded image, with 150px width
21              var tokens = url.split('/');
22              tokens.splice(-2, 0, 'w_150,c_scale');
23              var img = new Image(); // HTML5 Constructor
24              img.src = tokens.join('/');
25              img.alt = response.public_id;
26              document.getElementById('gallery').appendChild(img);
27            })
28            .catch(function (err) {
29              console.error('err', err);
30            });