feat: Set boundary in formdata

refactor: Use xhr instead of axios axios will remove content-type when post formdata. Use xhr to fix this issue chore: Add package form-data polyfill
cylab-tw · Mar 30, 2021 · c0ea534 · c0ea534
1 parent 7fa5868
commit c0ea534
Show file tree

Hide file tree

Showing 16 changed files with 6,287 additions and 54 deletions.
diff --git a/public/html/UploadDicom.html b/public/html/UploadDicom.html
@@ -71,4 +71,5 @@ <h6>檔案列表：{{fileList.length}} Files</h6>
 <script src="../scripts/external/angularjs/angular.min.js"></script>
 <script src="../scripts/ngCommon.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+<script src="../scripts/external/FormData-master/FormData.js"></script>
 <script src="../scripts/dicom/UploadDicom.js"></script>
diff --git a/public/scripts/dicom/UploadDicom.js b/public/scripts/dicom/UploadDicom.js
@@ -1,8 +1,5 @@
-
-
-
 var UploadApp = angular.module("UploadApp", ["commonApp"]);
-UploadApp.controller("UploadCtrl", function ($scope, $location, $window, UploadService, commonService) {
+UploadApp.controller("UploadCtrl", function ($scope, $location, $window, UploadService  , commonService) {
     $scope.fileList = [];
     $scope.selectFileName = '';
     $scope.selectQueryKey = [];
@@ -76,58 +73,67 @@ UploadApp.controller("UploadCtrl", function ($scope, $location, $window, UploadS
     }
 
     $scope.resetUpload = function () {
-        FD = new FormData;
+        FD = new FormData();
         $scope.uploadProgres = 0;
         $scope.uploadCompleted = false;
         $scope.systemStatus = "準備上傳";
         $scope.showFiles();
     }
 
-    $scope.uploadFiles = async function () {
-        const BOUNDORY = `------------------------${makeid(16)}`;
-
-        if (FD.getAll('Files[]').length > 0) {
-            if (confirm("確認要上傳嗎？")) {
-                axios.post(uploadApiUrl, FD, {
-                    headers: {
-                        "Content-Type": `multipart/related; boundary=${BOUNDORY}`
-                    },
-                    onUploadProgress: (evt) => {
-                        if (evt.lengthComputable) {
-                            $scope.uploadProgres = (evt.loaded / evt.total * 100 | 0);
-                            $scope.systemStatus = $scope.uploadProgres + "%";
-                            ($scope.uploadProgres == 100) && ($scope.systemStatus = "正在儲存至資料庫...");
-                            $scope.$applyAsync();
-                        }
+    $scope.uploadFiles = function () {
+        let xhr = new XMLHttpRequest();
+        FD.setBoundary('----formdata-polyfill-' + Math.random());
+        let boundary = FD.getBoundary();
+        xhr.open('POST', uploadApiUrl , true);
+        xhr.setRequestHeader("Accept" , "*/*");
+        xhr.setRequestHeader("Content-Type", `multipart/related; boundary=${boundary}`);
+        xhr.setRequestHeader("temp-type" , `multipart/related; boundary=${boundary}`);
+        //xhr.setRequestHeader("Content-Type" , `multipart/form-data`);
+        xhr.onload = function () {
+            $scope.uploadCompleted = true;
+            $scope.uploadProgres = 0;
+            if (xhr.status === 200) {
+                alert("上傳成功");
+                $scope.systemStatus = "已完成上傳";
+                UploadResult = JSON.parse(xhr.responseText).result;
+                $scope.fileList.forEach(item => {
+                    if (UploadResult.indexOf(item.fileName) != -1) {
+                        item.Status = "success";
+                        item.Result = "上傳完成";
+                    } else {
+                        item.Status = "fail";
+                        item.Result = "上傳失敗";
                     }
                 })
-                .then(function (res) {
-                    if (res.status == 200) {
-                        alert("上傳成功");
-                        $scope.systemStatus = "已完成上傳";
-                        UploadResult = res.data.result;
-                        $scope.fileList.forEach(item => {
-                            if (UploadResult.indexOf(item.fileName) != -1) {
-                                item.Status = "success";
-                                item.Result = "上傳完成";
-                            } else {
-                                item.Status = "fail";
-                                item.Result = "上傳失敗";
-                            }
-                        })
-                        $scope.$applyAsync();
-                    }
-                    $scope.$applyAsync();
+                $scope.$applyAsync();
+            } else {
+                // upload error
+                alert("伺服器發生錯誤");
+                $scope.systemStatus = "伺服器發生錯誤";
+                $scope.fileList.forEach(item => {
+                    item.Status = "fail";
+                    item.Result = "上傳失敗";
                 })
-                .catch(function (error) {
-                    console.log(error)
-                    alert("伺服器發生錯誤");
-                    $scope.systemStatus = "伺服器發生錯誤";
-                    $scope.fileList.forEach(item => {
-                        item.Status = "fail";
-                        item.Result = "上傳失敗";
-                    })
-                });
+            }
+            $scope.$applyAsync();
+        };
+        xhr.upload.onprogress = function (evt) {
+            if (evt.lengthComputable) {
+                $scope.uploadProgres = (evt.loaded / evt.total * 100 | 0);
+                $scope.systemStatus = $scope.uploadProgres + "%";
+                ($scope.uploadProgres == 100) && ($scope.systemStatus = "正在儲存至資料庫...");
+                $scope.$applyAsync();
+            }
+        }
+        if (FD.getAll('Files[]').length > 0) {
+            if (confirm("確認要上傳嗎？")) {
+                console.log(FD.getAll("Files[]"));
+                /*fermata.json(uploadApiUrl).post({'Content-Type':`multipart/form-data`}, {fileField: FD.getAll("Files[]")}, function () {
+                    console.log("test");
+                })*/
+                console.log(FD.getBoundary());
+
+                xhr.send(FD._blob ? FD._blob() : FD);
             } else {
                 alert("已取消上傳作業。");
             }
@@ -136,17 +142,16 @@ UploadApp.controller("UploadCtrl", function ($scope, $location, $window, UploadS
         }
     }
     function makeid(length) {
-        var result = '';
-        var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        var result           = '';
+        var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
         var charactersLength = characters.length;
-        for (var i = 0; i < length; i++) {
-            result += characters.charAt(Math.floor(Math.random() * charactersLength));
+        for ( var i = 0; i < length; i++ ) {
+           result += characters.charAt(Math.floor(Math.random() * charactersLength));
         }
         return result;
-    }
+     }
 });
 
 UploadApp.service('UploadService', function ($http, $q, $location) {
 
-});
-
+});
diff --git a/public/scripts/external/FormData-master/.github/FUNDING.yml b/public/scripts/external/FormData-master/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: [jimmywarting]
diff --git a/public/scripts/external/FormData-master/.github/stale.yml b/public/scripts/external/FormData-master/.github/stale.yml
@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 30
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false
diff --git a/public/scripts/external/FormData-master/.gitignore b/public/scripts/external/FormData-master/.gitignore
@@ -0,0 +1,39 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Compiled output
diff --git a/public/scripts/external/FormData-master/.npmignore b/public/scripts/external/FormData-master/.npmignore
diff --git a/public/scripts/external/FormData-master/.travis.yml b/public/scripts/external/FormData-master/.travis.yml
@@ -0,0 +1,20 @@
+language: node_js
+node_js:
+  - "10"
+dist: trusty # needs Ubuntu Trusty
+sudo: false  # no need for virtualization.
+addons:
+  chrome: stable # have Travis install chrome stable.
+cache:
+  yarn: true
+  directories:
+    - node_modules
+install:
+  - yarn
+  - npm run build
+script:
+  - yarn test
+sudo: required
+before_script:
+    - "sudo chown root /opt/google/chrome/chrome-sandbox"
+    - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"