Merge pull request #7 from yupmin-ct/for-ie8

Iframe 업로드 처리 추가
yupmin-ct · Aug 4, 2016 · 070950b · 070950b
2 parents adf8e30 + 2a1c1f7
commit 070950b
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kollus-cors-upload",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Kollus CORS Upload",
   "main": "gulpfile.js",
   "dependencies": {},

diff --git a/public/assets/css/default.css b/public/assets/css/default.css
@@ -1,4 +1,3 @@
-@import "//fonts.googleapis.com/css?family=Roboto:400,300";
 body {
   font-weight: 300;
 }
@@ -7,15 +6,11 @@ body {
   bottom: 1em;
   left: 0;
   right: 0;
-  margin-left: auto;
-  margin-right: auto;
 }
 #alert_message .alert {
   position: relative;
-  z-index: 9999;
+  z-index: 999;
   width: 400px;
-  left: 0;
-  right: 0;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 5px;

diff --git a/public/assets/js/cors-upload.js b/public/assets/js/cors-upload.js
@@ -1,9 +1,9 @@
 /**
  * Copyright (c) 2016
  * kollus-cors-upload - Kollus CORS Upload
- * Built on 2016-07-27
+ * Built on 2016-08-04
  * 
- * @version 0.1.1
+ * @version 0.1.2
  * @link https://github.com/yupmin-ct/kollus-cors-upload.git
  * @license MIT
  */
@@ -55,14 +55,24 @@ $(document).on('click', 'button[data-action=upload-file]', function (e) {
   var self = this,
     closestForm = $(self).closest('form'),
     uploadFileInput = closestForm.find('input[type=file][name=upload-file]'),
-    uploadFileCount = uploadFileInput.prop('files').length,
+    uploadFileCount,
     categoryKey = closestForm.find('select[name=category_key]').first().val(),
     useEncryption = closestForm.find('input[type=checkbox][name=use_encryption]').prop('checked'),
     isAudioUpload = closestForm.find('input[type=checkbox][name=is_audio_upload]').prop('checked'),
+    forceIframeUpload = closestForm.find('input[type=checkbox][name=force_iframe_upload]').prop('checked'),
+    forceProgressApi = closestForm.find('input[type=checkbox][name=force_progress_api]').prop('checked'),
     title = closestForm.find('input[type=text][name=title]').val(),
     apiData = {},
     progressInterval = 5000, // 5sec
     progressValue = 0,
+    uploadIframeId = 'upload_iframe',
+    selectedUploadIframe,
+    uploadUrl,
+    progressUrl,
+    uploadFileKey,
+    uploadIframe = $('<iframe width="0" height="0" border="0" src="javascript: false;" style="display: none;"/>').
+    attr('id', uploadIframeId).attr('name', uploadIframeId),
+    closestFormAction = closestForm.attr('action'),
     supportFormData = function() {
       return !!window.FormData;
     },
@@ -80,17 +90,6 @@ $(document).on('click', 'button[data-action=upload-file]', function (e) {
       return !! (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
     };
 
-  if (!supportFormData() || !supportFileAPI() || !supportCORS()) {
-    showAlert('warning', 'It is not supported by your browser.');
-    return;
-  }
-
-  if (uploadFileCount === 0) {
-    showAlert('warning', 'Please select a file to upload.');
-    uploadFileInput.focus();
-    return;
-  }
-
   if (categoryKey.length > 0) {
     apiData.category_key = categoryKey;
   }
@@ -100,10 +99,69 @@ $(document).on('click', 'button[data-action=upload-file]', function (e) {
   if (isAudioUpload) {
     apiData.is_audio_upload = 1;
   }
-  if (uploadFileCount === 1 && title.length > 0) {
+  if (title.length > 0) {
     apiData.title = title;
   }
 
+  if (forceIframeUpload ||
+    (!forceIframeUpload && (!supportFormData() || !supportFileAPI() || !supportCORS()))
+  ) {
+    // upload a file using iframe
+    $.post(
+      closestForm.attr('action'),
+      apiData,
+      function (data) {
+        var progress = $('<div class="progress" />'),
+          progressBar = $('<div class="progress-bar progress-bar-striped active" style="min-width: 100%;" />');
+
+        if (('error' in data && data.error) ||
+          !('result' in data) || !('upload_url' in data.result) || !('progress_url' in data.result)) {
+          showAlert('danger', ('message' in data ? data.message : 'Api response error.'));
+        }
+
+        uploadUrl = data.result.upload_url;
+        progressUrl = data.result.progress_url;
+        uploadFileKey = data.result.upload_file_key;
+
+        selectedUploadIframe = $('#' + uploadIframeId);
+
+        progress.addClass('progress-' + uploadFileKey);
+        progressBar.attr('role', 'progressbar').text('Uploading ...');
+        progress.append(progressBar);
+        progress.insertBefore(uploadFileInput);
+
+        showAlert('info', 'Uploading file ...');
+        $(self).attr('disabled', true);
+
+        if (!selectedUploadIframe.length) {
+          $('body').append(uploadIframe);
+          selectedUploadIframe = $('#' + uploadIframeId);
+        }
+
+        selectedUploadIframe.bind('load', function() {
+          $(self).attr('disabled', false);
+
+          progress.delay(2000).fadeOut(500);
+
+          closestForm.attr('action', closestFormAction);
+          $(self).attr('disabled', false);
+        });
+
+        closestForm.attr('target', uploadIframeId).attr('action', uploadUrl);
+        closestForm.submit();
+
+        uploadFileInput.replaceWith(uploadFileInput.clone(true));
+      }, 'json');
+    return;
+  }
+
+  uploadFileCount = uploadFileInput.prop('files').length;
+  if (uploadFileCount === 0) {
+    showAlert('warning', 'Please select a file to upload.');
+    uploadFileInput.focus();
+    return;
+  }
+
   showAlert('info', 'Uploading file ...');
   $(self).attr('disabled', true);
 
@@ -112,11 +170,8 @@ $(document).on('click', 'button[data-action=upload-file]', function (e) {
       closestForm.attr('action'),
       apiData,
       function (data) {
-        var uploadUrl,
-          progressUrl,
-          uploadFileKey,
-          formData = new FormData(),
-          progress,
+        var formData = new FormData(),
+          progress = $('<div class="progress" />'),
           progressBar,
           repeator;
 
@@ -125,19 +180,18 @@ $(document).on('click', 'button[data-action=upload-file]', function (e) {
           showAlert('danger', ('message' in data ? data.message : 'Api response error.'));
         }
 
-        uploadFileInput.val('').clone(true);
-
         uploadUrl = data.result.upload_url;
         progressUrl = data.result.progress_url;
         uploadFileKey = data.result.upload_file_key;
 
-        progress = $('<div class="progress" />').addClass('progress-' + uploadFileKey);
+        progress.addClass('progress-' + uploadFileKey);
         progressBar = $('<div class="progress-bar" />').attr('aria-valuenow', 0);
         progressBar.attr('role', 'progressbar')
-          .attr('aria-valuenow', 0).attr('aria-valuemin', 0).attr('aria-valuenow', 0).css('min-width', '2em').text('0%');
+          .attr('aria-valuenow', 0).attr('aria-valuemin', 0).css('min-width', '2em').text('0%');
         progress.append(progressBar);
         progress.insertBefore(uploadFileInput);
 
+        uploadFileInput.val('').clone(true);
         formData.append('upload-file', uploadFile);
 
         $.ajax({
@@ -151,7 +205,7 @@ $(document).on('click', 'button[data-action=upload-file]', function (e) {
           xhr: function () {
             var xhr = new XMLHttpRequest();
 
-            if (supportAjaxUploadProgress()) {
+            if (!forceProgressApi && supportAjaxUploadProgress()) {
               xhr.upload.addEventListener('progress', function (e) {
 
                 if (e.lengthComputable) {
@@ -170,6 +224,8 @@ $(document).on('click', 'button[data-action=upload-file]', function (e) {
                 }
               }, false);
             } else {
+              progressBar.addClass('progress-bar-striped active');
+
               repeator = setInterval(function () {
 
                 $.get(progressUrl, function (data) {
@@ -225,8 +281,8 @@ $(document).on('click', 'button[data-action=upload-file]', function (e) {
 
             progress.delay(2000).fadeOut(500);
           }
-        });
+        }); // $.ajax
       } // function(data)
-    , 'json'); // $.post
+      , 'json'); // $.post
   });
 });
diff --git a/public/index.php b/public/index.php
@@ -110,7 +110,7 @@
 ?>
     </div>
 
-    <form action="index.php?action=upload_url" method="post">
+    <form action="index.php?action=upload_url" method="post" enctype="multipart/form-data">
         <fieldset <?php if (!file_exists($configFilePath)) echo 'disabled'; ?>>
 <?php
 if (file_exists($configFilePath)):
@@ -142,7 +142,7 @@
 ?>
         <div class="form-group">
             <label for="upload-file">Upload file</label>
-            <input type="file" class="form-control" id="upload-file" name="upload-file" placeholder="Upload File" multiple>
+            <input type="file" class="form-control" id="upload-file" name="upload-file" placeholder="Upload File" multiple accept="audio/*,video/*">
         </div>
 
         <div class="checkbox">
@@ -162,6 +162,18 @@
             <input type="text" class="form-control" id="Title" name="title" placeholder="Title">
         </div>
 
+        <div class="checkbox">
+            <label>
+                <input type="checkbox" name="force_iframe_upload" value="1"> Force iframe upload
+            </label>
+        </div>
+
+        <div class="checkbox">
+            <label>
+                <input type="checkbox" name="force_progress_api" value="1"> Force progress api
+            </label>
+        </div>
+
         <button type="submit" class="btn btn-primary" data-action="upload-file"><i class="fa fa-upload"></i> Upload</button>
         </fieldset>
     </form>

diff --git a/resources/assets/less/default.less b/resources/assets/less/default.less
@@ -1,30 +1,21 @@
-@import "//fonts.googleapis.com/css?family=Roboto:400,300";
-
-@btn-font-weight: 300;
-@font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;
-
 body {
   font-weight: 300;
 }
 
 #alert_message {
-	position: fixed;
-	bottom: 1em;
-	left: 0;
-	right: 0;
-	margin-left: auto;
-	margin-right: auto;
+  position: fixed;
+  bottom: 1em;
+  left: 0;
+  right: 0;
 }
-
 #alert_message .alert {
-	position: relative;
-	z-index: 9999;
-	width: 400px;
-	left: 0;
-	right: 0;
-	margin-left: auto;
-	margin-right: auto;
-	margin-bottom: 5px;
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  position: relative;
+  z-index: 999;
+  width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 5px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
+