Add image upload UI and server-side upload/list APIs

css/galleriffic-2.css

@@ -100,6 +100,84 @@ div.navigation {
 	/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
 }
 
+/* Upload panel under thumbnails */
+.upload-panel {
+	margin-top: 14px;
+	padding-top: 12px;
+	border-top: 1px solid #e5e5e5;
+}
+.upload-title {
+	font-weight: bold;
+	color: #333;
+	margin-bottom: 8px;
+}
+.dropzone {
+	position: relative;
+	border: 2px dashed #cfcfcf;
+	border-radius: 8px;
+	padding: 14px 12px;
+	background: #fafafa;
+	cursor: pointer;
+}
+.dropzone:focus {
+	outline: none;
+	box-shadow: 0 0 0 3px rgba(46, 131, 255, 0.25);
+	border-color: #2e83ff;
+}
+.dropzone.dragover {
+	border-color: #2e83ff;
+	background: #f2f7ff;
+}
+.dropzone-text {
+	color: #666;
+	font-size: 12px;
+}
+.file-input {
+	position: absolute;
+	inset: 0;
+	opacity: 0;
+	width: 100%;
+	height: 100%;
+	cursor: pointer;
+}
+.upload-preview {
+	margin-top: 10px;
+}
+.upload-preview img {
+	max-width: 100%;
+	max-height: 160px;
+	border: 1px solid #ddd;
+	background: #fff;
+	display: block;
+}
+.preview-meta {
+	font-size: 11px;
+	color: #666;
+	margin-top: 6px;
+	word-break: break-all;
+}
+.upload-actions {
+	margin-top: 10px;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+.upload-actions button {
+	padding: 7px 12px;
+	border-radius: 6px;
+	border: 1px solid #cfcfcf;
+	background: #fff;
+	cursor: pointer;
+}
+.upload-actions button:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+.upload-status {
+	font-size: 12px;
+	color: #666;
+}
+
 /* ---- Layout: slideshow (left) + thumbs (right), full width ---- */
 .gallery-wrap {
 	display: flex;