add/edit nft

assets/css/style.css

@@ -1085,4 +1085,17 @@ h1, h2, h3, h4, h5, h6 {
   text-align: center;
   font-size: 13px;
   color: #012970;
+}
+
+.btn-changeImg {
+  padding: .3rem;
+  background-color: #012970;
+  display: inline-block;
+  width: 6rem;
+  color: white;
+  margin: .3rem auto;
+}
+.btn-changeImg:hover {
+  background-color: #012970;
+  color: white;
 }

nft_add.html

@@ -951,15 +951,26 @@ function handleFileSelect(evt) {
 $("#nft_add_form").submit(function(e) {
   e.preventDefault();
   const form = document.querySelector('#nft_add_form');
-  var bodyFormData = new FormData(form);
+  var bodyFormData = new FormData();
  
   var title = $('#title').val();
   var desc = $('#content').val();
   var uid = $('#uid').val();
   var amount = $('#amount').val();
   var toaddress = $('#toaddress').val();
-  var image = $('#image').val();
+  // var image = $('#image').val();
+  //   let front = image.split(/(\\|\/)/g).pop();
+  //   let type = front.split('.').pop();
+  //   if(type == 'jpg' || type == 'jpeg') {
+  //     type = 'jpeg';
+  //   } else if (type == 'png') {
+  //     type = 'png';
+  //   }
+  //   console.log(front,type);
+  // image =`@${front};type=image/${type}`;
+
   console.log(title, desc, uid, amount, toaddress, imageFile);
+  let isActive = $("#is_active_checkbox").is(':checked');
 
   bodyFormData.append('title', title);
   bodyFormData.append('context', desc);
@@ -968,8 +979,12 @@ $("#nft_add_form").submit(function(e) {
   bodyFormData.append('uid', uid);
   bodyFormData.append('amount', amount);
   bodyFormData.append('address', toaddress);
-  bodyFormData.append('image', image);
-  bodyFormData.append('is_active', $("#is_active_checkbox").is(':checked'));
+  bodyFormData.append('image', imageFile);
+  bodyFormData.append('is_active', isActive);
+
+  for (var pair of bodyFormData.entries()) {
+    console.log(pair[0]+ '=' + pair[1]); 
+  }
 
 
   if (!title) {
@@ -1010,9 +1025,23 @@ $("#nft_add_form").submit(function(e) {
 }).then(res => {
   Data = {...res.data}
   console.log(Data);
-  
+  Swal.fire({
+        title: '成功',
+        icon: 'success',
+        text: '新增成功',
+        confirmButtonColor: '#3085d6'
+      });
+  window.setTimeout(() => {
+    window.location.href = 'nft.html';
+  }, 2000);
 }).catch(err => {
   console.log(err);
+  Swal.fire({
+    title: '錯誤',
+    icon: 'success',
+    text: '請稍後再試',
+    confirmButtonColor: '#3085d6'
+  });
 })
   return false;
 });

nft_edit.html

@@ -573,16 +573,20 @@
                     <input id="desc" name="inputDesc" type="text" class="form-control">
                   </div>
                 </div>
-                <div class="row mb-3">
+                <!-- <div class="row mb-3">
                   <div class="col-12 text-center">
                     <img src="" alt="" id="img" width="60" height="60">
                   </div>
-                </div> 
+                </div>  -->
                 <div class="row mb-3">
                   <label for="inputNumber" class="col-sm-2 col-form-label">圖片</label>
-                  <div class="col-sm-10">
+                  <div class="col-sm-10 blk-file">
                     <input id="image" name="image" class="form-control" type="file">
                   </div>
+                  <div class="col-sm-10 blk-imgurl">
+                    <div id="imgUrl"></div>
+                  </div>
+                  <span class="btn-changeImg btn">更改圖片</span>
                 </div>              
                 <div class="row mb-3">
                   <legend class="col-form-label col-sm-2 pt-0">顯示</legend>
@@ -914,6 +918,13 @@ let Data;
 let category;
 let imgurl;
 
+$('.blk-file').hide();
+$('.btn-changeImg').click(function() {
+  $('.blk-imgurl').hide();
+  $('.blk-file').show();
+  $(this).hide();
+})
+
 function getpathId(){
   let id = window.location.search.split('?').pop();
   return id.split('=')[1];
@@ -934,7 +945,8 @@ axios({
   console.log(Data);
   $('#title').val(res.data.title);
   $('#desc').val(res.data.context);
-  $('#img').attr('src', res.data.imgurl);
+  $('#imgUrl').text(res.data.imgurl);
+  // $('#img').attr('src', res.data.imgurl);
   if(res.data.is_active) {
     $('#is_active_checkbox').attr('checked', true)
   } else {
@@ -966,8 +978,6 @@ function handleFileSelect(evt) {
 
       // Read in the image file as a data URL.
       reader.readAsText(f);
-      imgurl = imageFile;
-      console.log(imgurl)
 }
 
 
@@ -977,6 +987,20 @@ $("#nft_add_form").submit(function(e) {
   var title = $('#title').val();
   var image = $('#image').val();
   var context = $('#desc').val();
+  if(image) {
+    image = $('#image').val();
+    let front = image.split(/(\\|\/)/g).pop();
+    let type = front.split('.').pop();
+    if(type == 'jpg' || type == 'jpeg') {
+      type = 'jpeg';
+    } else if (type == 'png') {
+      type = 'png';
+    }
+    console.log(front,type);
+    image = imageFile;
+  } else {
+    image = '';
+  }
 
   console.log('title = ' + title + ', image = ' + image); // test
  
@@ -1036,12 +1060,12 @@ axios({
       Swal.fire({
         title: '成功',
         icon: 'success',
-        text: '新增成功',
+        text: '編輯成功',
         confirmButtonColor: '#3085d6'
       });
-      // window.setTimeout(() => {
-      //   window.location.href = 'nft.html';
-      // }, 2000);
+      window.setTimeout(() => {
+        window.location.href = 'nft.html';
+      }, 2000);
 }).catch(err => {
   console.log(err);
   Swal.fire({