Shop product, multiple images upload at the same time, image upload in one click

assets/cp.scripts.js

@@ -3832,10 +3832,21 @@
 			},
 
 			ShopProductsUploadImage: function(action_name, product_id, input_id) {
+				var file_el = $('#' + input_id)[0];
+				if(!file_el.files) return;
+				if(file_el.files.length <= 0) return;
+
+				$('#img-upload-block input').prop('disabled', true);
+				$('#upload-msg').css('display', 'block');
+
 				var fd = new FormData();
 				fd.append('action', action_name);
 				fd.append('id', product_id);
-				fd.append('file', $('#' + input_id)[0].files[0]);
+				fd.append('count', file_el.files.length);
+				for(var i = 0; i < file_el.files.length; i++) {
+					fd.append('file_' + i, file_el.files[i]);
+				}
+
 				$.ajax({
 					url: '/cp/',
 					method: 'POST',
@@ -3861,6 +3872,10 @@
 							console.log('Error: JavaScript code eval error', e.message);
 						}
 					}
+				}).always(function() {
+					file_el.value = '';
+					$('#img-upload-block input').prop('disabled', false);
+					$('#upload-msg').css('display', 'none');
 				});
 			},
 

assets/cp.styles.css

@@ -973,6 +973,17 @@ ul.pagination {
 	border-radius: .25rem;
 }
 
+#upload-msg {
+	position: absolute;
+	background: white;
+	width: 100%;
+	height: 100%;
+	border: 1px solid #ced4da;
+	border-radius: .25rem;
+	padding: .375rem .75rem;
+	display: none;
+}
+
 /* Fix for bootstrap select */
 .dropdown.bootstrap-select {
 	position: relative;

modules/module_shop.go

@@ -1043,8 +1043,9 @@ func (this *Modules) RegisterModule_Shop() *Module {
 							`<div id="list-images">` +
 							this.shop_GetAllProductImages(wrap, data.A_id) +
 							`</div>` +
-							`<div class="list-button position-relative">` +
-							`<input class="form-control ignore-lost-data" type="file" id="file" name="file" style="font-size:13px;" /><button type="button" class="btn btn-success btn-dynamic-remove" onclick="fave.ShopProductsUploadImage('shop-upload-image', ` + utils.IntToStr(data.A_id) + `, 'file');">Upload</button>` +
+							`<div id="img-upload-block" class="list-button position-relative">` +
+							`<div id="upload-msg">Uploading...</div>` +
+							`<input class="form-control ignore-lost-data" type="file" id="file" name="file" onchange="fave.ShopProductsUploadImage('shop-upload-image', ` + utils.IntToStr(data.A_id) + `, 'file');" style="font-size:13px;" multiple />` +
 							`</div>` +
 							`</div>` +
 							`</div>` +

modules/module_shop_act_upload_image.go

@@ -22,81 +22,71 @@ func (this *Modules) RegisterAction_ShopUploadImage() *Action {
 		WantAdmin: true,
 	}, func(wrap *wrapper.Wrapper) {
 		pf_id := wrap.R.FormValue("id")
+		pf_count := wrap.R.FormValue("count")
 
 		if !utils.IsNumeric(pf_id) {
 			wrap.MsgError(`Inner system error`)
 			return
 		}
 
-		// Read file from request
-		file, handler, err := wrap.R.FormFile("file")
-		if err != nil {
-			wrap.MsgError(err.Error())
-			return
-		}
-		defer file.Close()
-
-		// Check file name
-		if handler.Filename == "" {
+		if !utils.IsNumeric(pf_count) {
 			wrap.MsgError(`Inner system error`)
 			return
 		}
 
-		// Read file to bytes
-		fileBytes, err := ioutil.ReadAll(file)
-		if err != nil {
-			wrap.MsgError(err.Error())
-			return
-		}
-
-		// Check if file is really an image
-		if _, _, err := image.Decode(bytes.NewReader(fileBytes)); err != nil {
-			wrap.MsgError(err.Error())
-			return
-		}
-
-		// Create dirs
-		if err := os.MkdirAll(wrap.DHtdocs+string(os.PathSeparator)+"products"+string(os.PathSeparator)+"images"+string(os.PathSeparator)+pf_id, os.ModePerm); err != nil {
-			wrap.MsgError(err.Error())
+		pf_count_int := utils.StrToInt(pf_count)
+		if pf_count_int <= 0 {
+			wrap.MsgError(`Inner system error`)
 			return
 		}
 
-		target_file_name := utils.Int64ToStr(time.Now().Unix()) + filepath.Ext(handler.Filename)
-		target_file_full := wrap.DHtdocs + string(os.PathSeparator) + "products" + string(os.PathSeparator) + "images" + string(os.PathSeparator) + pf_id + string(os.PathSeparator) + target_file_name
-
-		if err := wrap.DB.Transaction(func(tx *wrapper.Tx) error {
-			// Block rows
-			if _, err := tx.Exec("SELECT id FROM shop_products WHERE id = ? FOR UPDATE;", utils.StrToInt(pf_id)); err != nil {
-				return err
-			}
-
-			// Insert row
-			if _, err := tx.Exec(
-				`INSERT INTO shop_product_images SET
-					product_id = ?,
-					filename = ?
-				;`,
-				utils.StrToInt(pf_id),
-				target_file_name,
-			); err != nil {
-				return err
+		// Proccess all files
+		for i := 1; i <= pf_count_int; i++ {
+			post_field_name := "file_" + utils.IntToStr(i-1)
+			if file, handler, err := wrap.R.FormFile(post_field_name); err == nil {
+				if handler.Filename != "" {
+					if fileBytes, err := ioutil.ReadAll(file); err == nil {
+						if _, _, err := image.Decode(bytes.NewReader(fileBytes)); err == nil {
+							if err := os.MkdirAll(wrap.DHtdocs+string(os.PathSeparator)+"products"+string(os.PathSeparator)+"images"+string(os.PathSeparator)+pf_id, os.ModePerm); err == nil {
+								target_file_name := utils.Int64ToStr(time.Now().Unix()+int64(i-1)) + filepath.Ext(handler.Filename)
+								target_file_full := wrap.DHtdocs + string(os.PathSeparator) + "products" + string(os.PathSeparator) + "images" + string(os.PathSeparator) + pf_id + string(os.PathSeparator) + target_file_name
+								if err := wrap.DB.Transaction(func(tx *wrapper.Tx) error {
+									// Block rows
+									if _, err := tx.Exec("SELECT id FROM shop_products WHERE id = ? FOR UPDATE;", utils.StrToInt(pf_id)); err != nil {
+										return err
+									}
+
+									// Insert row
+									if _, err := tx.Exec(
+										`INSERT INTO shop_product_images SET
+											product_id = ?,
+											filename = ?
+										;`,
+										utils.StrToInt(pf_id),
+										target_file_name,
+									); err != nil {
+										return err
+									}
+
+									// Write file to disk
+									if err := ioutil.WriteFile(target_file_full, fileBytes, 0664); err != nil {
+										return err
+									}
+									return nil
+								}); err == nil {
+									wrap.Write(`$('#list-images').append('<div class="attached-img"><a href="/products/images/` + pf_id + `/` + target_file_name + `" title="` + target_file_name + `" target="_blank"><img src="/products/images/` + pf_id + `/thumb-0-` + target_file_name + `" /></a>, <a href="javascript:fave.ShopProductsDeleteImage(this, ` + pf_id + `, \'` + target_file_name + `\');">Delete</a></div>');`)
+								}
+							}
+						}
+					}
+				}
+				file.Close()
 			}
-
-			// Write file to disk
-			if err := ioutil.WriteFile(target_file_full, fileBytes, 0664); err != nil {
-				return err
-			}
-			return nil
-		}); err != nil {
-			wrap.MsgError(err.Error())
-			return
 		}
 
 		// Delete products XML cache
 		wrap.RemoveProductXmlCacheFile()
 
 		wrap.ResetCacheBlocks()
-
-		wrap.Write(`$('#list-images').append('<div class="attached-img"><a href="/products/images/` + pf_id + `/` + target_file_name + `" title="` + target_file_name + `" target="_blank"><img src="/products/images/` + pf_id + `/thumb-0-` + target_file_name + `" /></a>, <a href="javascript:fave.ShopProductsDeleteImage(this, ` + pf_id + `, \'` + target_file_name + `\');">Delete</a></div>');`)
 	})
 }