Use the custom-file-pickers also for the new file and image userfields

public/viewjs/components/userfieldsform.js

@@ -30,16 +30,17 @@ Grocy.Components.UserfieldsForm.Save = function(success, error)
 		}
 		else if (input.attr("type") == "file")
 		{
-			var old_file = input.data('old-file')
+			var oldFile = input.data('old-file')
-			if (old_file)
+			if (oldFile)
 			{
-				Grocy.Api.Delete('files/userfiles/' + old_file, null, null,
+				Grocy.Api.Delete('files/userfiles/' + oldFile, null, null,
 					function(xhr)
 					{
 						Grocy.FrontendHelpers.ShowGenericError('Could not delete file', xhr);
 					});
 				jsonData[fieldName] = "";
 			}
+
 			if (input[0].files.length > 0)
 			{
 				// Files service requires an extension
@@ -52,14 +53,11 @@ Grocy.Components.UserfieldsForm.Save = function(success, error)
 					},
 					function(xhr)
 					{
-						Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
+						// When navigating away immediately from the current page, this is maybe a false positive - so ignore this for now
+						// Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
 					}
 				);
 			}
-			else
-			{
-				//jsonData[fieldName] = null;
-			}
 		}
 		else if ($(this).hasAttr("multiple"))
 		{
@@ -116,24 +114,30 @@ Grocy.Components.UserfieldsForm.Load = function()
 				{
 					if (value != null && !value.isEmpty())
 					{
-						var file_name = atob(value.split('_')[1]);
+						var fileName = atob(value.split('_')[1]);
-						var file_src = value.split('_')[0];
+						var fileSrc = value.split('_')[0];
-						input.hide();
+						var formGroup = input.parent().parent().parent();
-						var file_info = input.siblings('.userfield-file');
+
-						file_info.removeClass('d-none');
+						formGroup.find("label.custom-file-label").text(fileName);
-						file_info.find('a.userfield-current-file')
+						formGroup.find(".userfield-file-show").attr('href', U('/files/userfiles/' + value));
-							.attr('href', U('/files/userfiles/' + value))
+						formGroup.find('.userfield-file-show').removeClass('d-none');
-							.text(file_name);
+						formGroup.find('img.userfield-current-file')
-						file_info.find('img.userfield-current-file')
+							.attr('src', U('/files/userfiles/' + value + '?force_serve_as=picture&best_fit_width=250&best_fit_height=250'));
-							.attr('src', U('/files/userfiles/' + value + '?force_serve_as=picture&best_fit_width=250&best_fit_height=250'))
+						LoadImagesLazy();
-						file_info.find('button.userfield-file-delete').click(
+
+						formGroup.find('.userfield-file-delete').click(
 							function()
 							{
-								file_info.addClass('d-none');
+								formGroup.find("label.custom-file-label").text(__t("No file selected"));
-								input.data('old-file', file_src);
+								formGroup.find(".userfield-file-show").addClass('d-none');
-								input.show();
+								input.attr('data-old-file', fileSrc);
 							}
 						);
+
+						input.on("change", function(e)
+						{
+							formGroup.find(".userfield-file-show").addClass('d-none');
+						});
 					}
 				}
 				else

views/components/userfields_tbody.blade.php

@@ -14,8 +14,7 @@
 	<a href="{{ $userfieldObject->value }}"
 		target="_blank">{{ $userfieldObject->value }}</a>
 	@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_FILE)
-	<a class="show-as-dialog-link"
+	<a href="{{ $U('/files/userfiles/'. $userfieldObject->value) }}"
-		href="{{ $U('/files/userfiles/'. $userfieldObject->value) }}"
 		target="_blank">{{ base64_decode(explode('_', $userfieldObject->value)[1]) }}</a>
 	@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_IMAGE)
 	<a class="show-as-dialog-link"

views/components/userfieldsform.blade.php

@@ -119,38 +119,48 @@
 	</div>
 	@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_FILE)
 	<div class="form-group">
-		<label for="{{ $userfield->name }}">{{ $userfield->caption }}</label>
+		<label>{{ $userfield->caption }}</label>
+		<div class="input-group">
+			<div class="custom-file">
 				<input type="file"
-			class="form-control userfield-input"
+					class="custom-file-input userfield-input"
 					data-userfield-name="{{ $userfield->name }}">
-		<div class="d-none userfield-file">
+				<label class="custom-file-label"
-			<a href=""
+					for="{{ $userfield->name }}">
-				class="userfield-current-file"
+					{{ $__t('No file selected') }}
-				data-uf-name="{{ $userfield->name }}"></a>
+				</label>
-			<button type="button"
+			</div>
-				class="userfield-current-file btn btn-danger userfield-file-delete"
+			<div class="input-group-append userfield-file-delete">
-				data-uf-name="{{ $userfield->name }}">
+				<span class="input-group-text"><i class="fas fa-trash"></i></span>
-				<i class="fas fa-trash"></i>
+			</div>
-			</button>
+			<div class="input-group-append">
+				<a href="#"
+					target="_blank"
+					class="input-group-text userfield-file-show d-none"><i class="fas fa-eye"></i></a>
+			</div>
 		</div>
 	</div>
 	@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_IMAGE)
 	<div class="form-group">
-		<label for="{{ $userfield->name }}">{{ $userfield->caption }}</label>
+		<label>{{ $userfield->caption }}</label>
+		<div class="input-group">
+			<div class="custom-file">
 				<input type="file"
-			class="form-control userfield-input"
+					class="custom-file-input userfield-input"
 					data-userfield-name="{{ $userfield->name }}">
-		<div class="d-none userfield-file">
+				<label class="custom-file-label"
+					for="{{ $userfield->name }}">
+					{{ $__t('No file selected') }}
+				</label>
+			</div>
+			<div class="input-group-append userfield-file-delete">
+				<span class="input-group-text"><i class="fas fa-trash"></i></span>
+			</div>
+		</div>
 		<img src=""
 			alt="{{ $userfield->name }}"
-				class="userfield-current-file"
+			class="userfield-current-file userfield-file-show d-none lazy mt-1"
 			data-uf-name="{{ $userfield->name }}" />
-			<button type="button"
-				class="userfield-current-file btn btn-danger userfield-file-delete"
-				data-uf-name="{{ $userfield->name }}">
-				<i class="fas fa-trash"></i>
-			</button>
-		</div>
 	</div>
 	@endif