feat: update example html

Author: Donaldcwl

example/basic.html

@@ -85,22 +85,25 @@
         const downloadLink = URL.createObjectURL(output)
         logDom.innerHTML += '&nbsp;<a href="' + downloadLink + '" download="' + file.name + '">download compressed image</a>'
         document.getElementById('preview-after-compress').src = downloadLink
+        return uploadToServer(output)
     })
 
-    // await uploadToServer(output)
 
     function onProgress (p) {
       progressDom.innerHTML = '(' + p + '%' + ')'
     }
   }
 
   function uploadToServer (file) {
-    var formData = new FormData()
-    formData.append('image', file)
-    return fetch('http://localhost/image-upload-api', {
+    const formData = new FormData()
+    formData.append('image', file, file.name)
+    const url = 'http://localhost:3000/image-upload-api'
+    console.log('calling api', url, 'with data', Array.from(formData.entries())[0])
+    return fetch(url, {
       method: 'POST',
       body: formData
-    })
+    }).then(res => res.json())
+      .then(body => console.log('got server response', body))
   }
 </script>
 </body>

example/development.html

@@ -79,30 +79,32 @@
       useWebWorker: useWebWorker,
       onProgress: onProgress
     }
-    imageCompression(file, options).then(function (output) {
-      logDom.innerHTML += ', output size:' + (output.size / 1024 / 1024).toFixed(2) + 'mb'
-      console.log('output', output)
-      const downloadLink = URL.createObjectURL(output)
-      logDom.innerHTML += '&nbsp;<a href="' + downloadLink + '" download="' + file.name + '">download compressed image</a>'
-      document.getElementById('preview-after-compress').src = downloadLink
-      // uploadToServer(output)
-    })
-
-
-
+    imageCompression(file, options)
+      .then(function (output) {
+        logDom.innerHTML += ', output size:' + (output.size / 1024 / 1024).toFixed(2) + 'mb'
+        console.log('output', output)
+        const downloadLink = URL.createObjectURL(output)
+        logDom.innerHTML += '&nbsp;<a href="' + downloadLink + '" download="' + file.name + '">download compressed image</a>'
+        document.getElementById('preview-after-compress').src = downloadLink
+        return uploadToServer(output)
+      })
+      
     function onProgress (p) {
       console.log('onProgress', p)
       progressDom.innerHTML = '(' + p + '%' + ')'
     }
   }
 
   function uploadToServer (file) {
-    var formData = new FormData()
+    const formData = new FormData()
     formData.append('image', file, file.name)
-    return fetch('http://localhost/image-upload-api', {
+    const url = 'http://localhost:3000/image-upload-api'
+    console.log('calling api', url, 'with data', Array.from(formData.entries())[0])
+    return fetch(url, {
       method: 'POST',
       body: formData
-    })
+    }).then(res => res.json())
+      .then(body => console.log('got server response', body))
   }
 </script>
 </body>