Additional updates per issue processwire/processwire-issues#330 - make image replacement keep the same filename (so long as files have same extension). Also upgraded it to retain description and tags during replacement.

wire/core/Pagefile.php

@@ -249,6 +249,8 @@ class Pagefile extends WireData {
 					$id = (int) $id;
 					if(!$id) $id = '';
 					$name = $n > 0 ? "description$id" : "description";
+				} else if($id === 'default') {
+					$name = 'description';
 				} else if($languages) {
 					$language = $languages->get($id); // i.e. "default" or "es"
 					if(!$language->id) continue;

wire/core/Pagefiles.php

@@ -76,6 +76,14 @@ class Pagefiles extends WireArray implements PageFieldValueInterface {
 	 */
 	protected $unlinkQueue = array();
 	
+	/**
+	 * Items to be renamed when Page is saved (oldName => newName)
+	 *
+	 * @var array
+	 *
+	 */
+	protected $renameQueue = array();
+
 	/**
 	 * IDs of any hooks added in this instance, used by the destructor
 	 * 
@@ -338,11 +346,22 @@ class Pagefiles extends WireArray implements PageFieldValueInterface {
 		foreach($this->unlinkQueue as $item) {
 			$item->unlink();
 		}
+		foreach($this->renameQueue as $item) {
+			$name = $item->get('_rename'); 
+			if(!$name) continue;
+			$item->rename($name); 
+		}
 		$this->unlinkQueue = array();
 		$this->removeHooks();
 		return $this; 
 	}
 	
+	protected function addSaveHook() {
+		if(!count($this->unlinkQueue) && !count($this->renameQueue)) {
+			$this->hookIDs[] = $this->page->filesManager->addHookBefore('save', $this, 'hookPageSave');
+		}
+	}
+
 	/**
 	 * Delete a pagefile item
 	 * 
@@ -375,9 +394,7 @@ class Pagefiles extends WireArray implements PageFieldValueInterface {
 	public function remove($item) {
 		if(is_string($item)) $item = $this->get($item); 
 		if(!$this->isValidItem($item)) throw new WireException("Invalid type to {$this->className}::remove(item)"); 
-		if(!count($this->unlinkQueue)) {
+		$this->addSaveHook();
-			$this->hookIDs[] = $this->page->filesManager->addHookBefore('save', $this, 'hookPageSave'); 
-		}
 		$this->unlinkQueue[] = $item; 
 		parent::remove($item); 
 		return $this; 
@@ -401,6 +418,28 @@ class Pagefiles extends WireArray implements PageFieldValueInterface {
 		return $this; 
 	}
 
+	/**
+	 * Queue a rename of a Pagefile
+	 * 
+	 * This only queues a rename. Rename actually occurs when page is saved. 
+	 * Note this differs from the behavior of `Pagefile::rename()`. 
+	 * 
+	 * #pw-group-manipulation
+	 * 
+	 * @param Pagefile $item
+	 * @param string $name
+	 * @return Pagefiles 
+	 * @see Pagefile::rename()
+	 * 
+	 */
+	public function rename(Pagefile $item, $name) {
+		$item->set('_rename', $name); 
+		$this->renameQueue[] = $item; 
+		$this->trackChange('renameQueue', $item->name, $name);
+		$this->addSaveHook();
+		return $this;
+	}
+
 	/**
 	 * Return the full disk path where files are stored
 	 * 

wire/modules/Inputfield/InputfieldFile/InputfieldFile.module

@@ -786,6 +786,9 @@ class InputfieldFile extends Inputfield implements InputfieldItemList, Inputfiel
 			$replaceFile = $this->value->getFile($replace);
 			if($replaceFile && $replaceFile instanceof Pagefile) {
 				$this->processInputDeleteFile($replaceFile);
+				if(strtolower($pagefile->ext()) == strtolower($replaceFile->ext())) {
+					$this->value->rename($pagefile, $replaceFile->name);
+				}
 				$changed = true; 
 			}
 		}

wire/modules/Inputfield/InputfieldImage/InputfieldImage.js

@@ -1517,8 +1517,23 @@ function InputfieldImage($) {
 						if($progressItem.length) $progressItem.remove();
 						
 						if(uploadReplace.item && maxFiles != 1) {
-							// re-open replaced item
+							// indicate replacement for processing
 							$markup.find(".InputfieldFileReplace").val(uploadReplace.file);
+							// update replaced file name (visually) if extensions are the same
+							var $imageEditName = $markup.find(".InputfieldImageEdit__name");
+							var uploadNewName = $imageEditName.text();
+							var uploadNewExt = uploadNewName.substring(uploadNewName.lastIndexOf('.')+1).toLowerCase();
+							uploadNewName = uploadNewName.substring(0, uploadNewName.lastIndexOf('.')); // remove ext
+							var uploadReplaceName = uploadReplace.file;
+							if(uploadReplaceName.indexOf('?') > -1) {
+								uploadReplaceName = uploadReplaceName.substring(0, uploadReplaceName.indexOf('?'));
+							}
+							var uploadReplaceExt = uploadReplaceName.substring(uploadReplaceName.lastIndexOf('.')+1).toLowerCase();
+							uploadReplaceName = uploadReplaceName.substring(0, uploadReplaceName.lastIndexOf('.')); // remove ext
+							if(uploadReplaceExt == uploadNewExt) {
+								$imageEditName.children('span').text(uploadReplaceName).removeAttr('contenteditable');
+							}
+							// re-open replaced item
 							$markup.find(".gridImage__edit").click();
 						}
 				
@@ -1567,6 +1582,7 @@ function InputfieldImage($) {
 					xhr.open("POST", postUrl, true);
 					xhr.setRequestHeader("X-FILENAME", encodeURIComponent(file.name));
 					xhr.setRequestHeader("X-FIELDNAME", fieldName);
+					if(uploadReplace.item) xhr.setRequestHeader("X-REPLACENAME", uploadReplace.file); 
 					xhr.setRequestHeader("Content-Type", "application/octet-stream"); // fix issue 96-Pete
 					xhr.setRequestHeader("X-" + postTokenName, postTokenValue);
 					xhr.setRequestHeader("X-REQUESTED-WITH", 'XMLHttpRequest');

wire/modules/Inputfield/InputfieldImage/InputfieldImage.module

@@ -559,6 +559,23 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu
 		return $a;
 	}
 
+	/**
+	 * Get Pagefile to pull description and tags from 
+	 * 
+	 * @param Pagefile $pagefile
+	 * @return Pageimage
+	 * 
+	 */
+	protected function getMetaPagefile(Pagefile $pagefile) {
+		if(!$this->isAjax || !isset($_SERVER['HTTP_X_REPLACENAME'])) return $pagefile;
+		$metaFilename = $_SERVER['HTTP_X_REPLACENAME'];
+		if(strpos($metaFilename, '?')) list($metaFilename,) = explode('?', $metaFilename); 
+		$metaFilename = $this->wire('sanitizer')->name($metaFilename);
+		$metaPagefile = $this->attr('value')->get($metaFilename);
+		if(!$metaPagefile instanceof Pagefile) $metaPagefile = $pagefile;
+		return $metaPagefile;
+	}
+
 	/**
 	 * Render a Pageimage item
 	 *
@@ -593,8 +610,9 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu
 			";
 		} else {
 			$buttons = $pagefile->ext() == 'svg' ? '' : $this->renderButtons($pagefile, $id, $n);
-			$description = $this->renderItemDescriptionField($pagefile, $id, $n);
+			$metaPagefile = $this->getMetaPagefile($pagefile);
-			$additional = $this->renderAdditionalFields($pagefile, $id, $n);
+			$description = $this->renderItemDescriptionField($metaPagefile, $id, $n);
+			$additional = $this->renderAdditionalFields($metaPagefile, $id, $n);
 			$error = '';
 			if($thumb['error']) {
 				$error = str_replace('{out}', $sanitizer->entities($thumb['error']), $this->themeSettings['error']);
@@ -654,8 +672,9 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu
 		
 		if($editable) {
 			$buttons = $this->renderButtons($pagefile, $id, $n);
-			$descriptionField = $this->renderItemDescriptionField($pagefile, $id, $n);
+			$metaPagefile = $this->getMetaPagefile($pagefile);
-			$additional = $this->renderAdditionalFields($pagefile, $id, $n);
+			$descriptionField = $this->renderItemDescriptionField($metaPagefile, $id, $n);
+			$additional = $this->renderAdditionalFields($metaPagefile, $id, $n);
 			$editableOut = "
 				<div class='InputfieldImageEdit__buttons'>$buttons</div>
 				<div class='InputfieldImageEdit__core'>$descriptionField</div>