feat: manage project versions v2 (#5049)

* update add files copy and go to next step on just one file

* rename and reorder stages

* add metadata stage and update details stage

* implement files inside metadata stage

* use regular prettier instead of prettier eslint

* remove changelog stage config

* save button on details stage

* update edit buttons in versions table

* add collapse environment selector

* implement dependencies list in metadata step

* move dependencies into provider

* add suggested dependencies to metadata stage

* pnpm prepr

* fix unused var

* Revert "add collapse environment selector"

This reverts commit f90fabc7a57ff201f26e1b628eeced8e6ef75865.

* hide resource pack loader only when its the only loader

* fix no dependencies for modpack

* add breadcrumbs with hide breadcrumb option

* wider stages

* add proper horizonal scroll breadcrumbs

* fix titles

* handle save version in version page

* remove box shadow

* add notification provider to storybook

* add drop area for versions to drop file right into page

* fix mobile versions table buttons overflowing

* pnpm prepr

* fix drop file opening modal in wrong stage

* implement invalid file for dropping files

* allow horizontal scroll on breadcrumbs

* update infer.js as best as possible

* add create version button uploading version state

* add extractVersionFromFilename for resource pack and datapack

* allow jars for datapack project

* detect multiple loaders when possible

* iris means compatible with optifine too

* infer environment on loader change as well

* add tooltip

* prevent navigate forward when cannot go to next step

* larger breadcrumb click targets

* hide loaders and mc versions stage until files added

* fix max width in header

* fix add files from metadata step jumping steps

* define width in NewModal instead

* disable remove dependency in metadata stage

* switch metadata and details buttons positions

* fix remove button spacing

* do not allow duplicate suggested dependencies

* fix version detection for fabric minecraft version semvar

* better verion number detection based on filename

* show resource pack loader but uneditable

* remove vanilla shader detection

* refactor: break up large infer.js into ts and modules

* remove duplicated types

* add fill missing from file name step

* pnpm prepr

* fix neoforge loader parse failing and not adding neoforge loader

* add missing pack formats

* handle new pack format

* pnpm prepr

* add another regex where it is version in anywhere in filename

* only show resource pack or data pack options for filetype on datapack project

* add redundant zip folder check

* reject RP and DP if has redundant folder

* fix hide stage in breadcrumb

* add snapshot group key in case no release version. brings out 26.1 snapshots

* pnpm prepr

* open in group if has something selected

* fix resource pack loader uneditable if accidentally selected on different project type

* add new environment tags

* add unknown and not applicable environment tags

* pnpm prepr

* use shared constant on labels

* use ref for timeout

* remove console logs

* remove box shadow only for cm-content

* feat: xhr upload + fix wrangler prettierignore

* fix: upload content type fix

* fix dependencies version width

* fix already added dependencies logic

* add changelog minheight

* set progress percentage on button

* add legacy fabric detection logic

* lint

* small update on create version button label

---------

Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

packages/api-client/src/core/abstract-client.ts

@@ -248,16 +248,32 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 	 * Build context for an upload request
 	 *
 	 * Sets metadata.isUpload = true so features can detect uploads.
+	 * Supports both single file uploads and FormData uploads.
 	 */
 	protected buildUploadContext(
 		url: string,
 		path: string,
 		options: UploadRequestOptions,
 	): RequestContext {
-		const metadata: UploadMetadata = {
-			isUpload: true,
-			file: options.file,
-			onProgress: options.onProgress,
+		let metadata: UploadMetadata
+		let body: File | Blob | FormData
+
+		if ('formData' in options && options.formData) {
+			metadata = {
+				isUpload: true,
+				formData: options.formData,
+				onProgress: options.onProgress,
+			}
+			body = options.formData
+		} else if ('file' in options && options.file) {
+			metadata = {
+				isUpload: true,
+				file: options.file,
+				onProgress: options.onProgress,
+			}
+			body = options.file
+		} else {
+			throw new Error('Upload options must include either file or formData')
 		}
 
 		return {
@@ -266,7 +282,7 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 			options: {
 				...options,
 				method: 'POST',
-				body: options.file,
+				body,
 			},
 			attempt: 1,
 			startTime: Date.now(),

packages/api-client/src/core/abstract-upload-client.ts

@@ -12,9 +12,9 @@ import type { UploadHandle, UploadRequestOptions } from '../types/upload'
  */
 export abstract class AbstractUploadClient {
 	/**
-	 * Upload a file with progress tracking
+	 * Upload a file or FormData with progress tracking
 	 * @param path - API path (e.g., '/fs/create')
-	 * @param options - Upload options including file, api, version
+	 * @param options - Upload options including file or formData, api, version
 	 * @returns UploadHandle with promise, onProgress chain, and cancel method
 	 */
 	abstract upload<T = void>(path: string, options: UploadRequestOptions): UploadHandle<T>

packages/api-client/src/modules/labrinth/versions/v3.ts

@@ -1,4 +1,5 @@
 import { AbstractModule } from '../../../core/abstract-module'
+import type { UploadHandle } from '../../../types/upload'
 import type { Labrinth } from '../types'
 
 export class LabrinthVersionsV3Module extends AbstractModule {
@@ -136,11 +137,11 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 	 * ```
 	 */
 
-	public async createVersion(
+	public createVersion(
 		draftVersion: Labrinth.Versions.v3.DraftVersion,
 		versionFiles: Labrinth.Versions.v3.DraftVersionFile[],
 		projectType: Labrinth.Projects.v2.ProjectType | null = null,
-	): Promise<Labrinth.Versions.v3.Version> {
+	): UploadHandle<Labrinth.Versions.v3.Version> {
 		const formData = new FormData()
 
 		const files = versionFiles.map((vf) => vf.file)
@@ -182,21 +183,15 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 		formData.append('data', JSON.stringify(data))
 
 		files.forEach((file, i) => {
-			formData.append(fileParts[i], new Blob([file]), file.name)
+			formData.append(fileParts[i], file, file.name)
 		})
 
-		const newVersion = await this.client.request<Labrinth.Versions.v3.Version>(`/version`, {
+		return this.client.upload<Labrinth.Versions.v3.Version>(`/version`, {
 			api: 'labrinth',
 			version: 3,
-			method: 'POST',
-			body: formData,
+			formData,
 			timeout: 60 * 5 * 1000,
-			headers: {
-				'Content-Type': '',
-			},
 		})
-
-		return newVersion
 	}
 
 	/**
@@ -251,10 +246,10 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 		})
 	}
 
-	public async addFilesToVersion(
+	public addFilesToVersion(
 		versionId: string,
 		versionFiles: Labrinth.Versions.v3.DraftVersionFile[],
-	): Promise<Labrinth.Versions.v3.Version> {
+	): UploadHandle<Labrinth.Versions.v3.Version> {
 		const formData = new FormData()
 
 		const files = versionFiles.map((vf) => vf.file)
@@ -273,18 +268,14 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 		formData.append('data', JSON.stringify({ file_types: fileTypeMap }))
 
 		files.forEach((file, i) => {
-			formData.append(fileParts[i], new Blob([file]), file.name)
+			formData.append(fileParts[i], file, file.name)
 		})
 
-		return this.client.request<Labrinth.Versions.v3.Version>(`/version/${versionId}/file`, {
+		return this.client.upload<Labrinth.Versions.v3.Version>(`/version/${versionId}/file`, {
 			api: 'labrinth',
 			version: 2,
-			method: 'POST',
-			body: formData,
+			formData,
 			timeout: 60 * 5 * 1000,
-			headers: {
-				'Content-Type': '',
-			},
 		})
 	}
 }

packages/api-client/src/platform/xhr-upload-client.ts

@@ -27,12 +27,22 @@ export abstract class XHRUploadClient extends AbstractModrinthClient {
 
 		const url = this.buildUrl(path, baseUrl, options.version)
 
+		// For FormData uploads, don't set Content-Type (let browser set multipart boundary)
+		// For file uploads, use application/octet-stream
+		const isFormData = 'formData' in options && options.formData instanceof FormData
+		const baseHeaders = this.buildDefaultHeaders()
+		// Remove Content-Type for FormData so browser can set multipart/form-data with boundary
+		if (isFormData) {
+			delete baseHeaders['Content-Type']
+		} else {
+			baseHeaders['Content-Type'] = 'application/octet-stream'
+		}
+
 		const mergedOptions: UploadRequestOptions = {
 			retry: false, // default: don't retry uploads
 			...options,
 			headers: {
-				...this.buildDefaultHeaders(),
-				'Content-Type': 'application/octet-stream',
+				...baseHeaders,
 				...options.headers,
 			},
 		}
@@ -121,7 +131,9 @@ export abstract class XHRUploadClient extends AbstractModrinthClient {
 				xhr.setRequestHeader(key, value)
 			}
 
-			xhr.send(metadata.file)
+			// Send either FormData or file depending on what was provided
+			const data = 'formData' in metadata ? metadata.formData : metadata.file
+			xhr.send(data)
 			abortController.signal.addEventListener('abort', () => xhr.abort())
 		})
 	}

packages/api-client/src/types/upload.ts

@@ -13,29 +13,66 @@ export interface UploadProgress {
 }
 
 /**
- * Options for upload requests (matches request() style)
- *
- * Extends RequestOptions but excludes body and method since those
- * are determined by the upload itself.
+ * Base options for upload requests
  */
-export interface UploadRequestOptions extends Omit<RequestOptions, 'body' | 'method'> {
-	/** File or Blob to upload */
-	file: File | Blob
+interface BaseUploadRequestOptions extends Omit<RequestOptions, 'body' | 'method'> {
 	/** Callback for progress updates */
 	onProgress?: (progress: UploadProgress) => void
 }
 
 /**
- * Metadata attached to upload contexts
+ * Options for single file upload requests
+ */
+export interface FileUploadRequestOptions extends BaseUploadRequestOptions {
+	/** File or Blob to upload */
+	file: File | Blob
+	formData?: never
+}
+
+/**
+ * Options for FormData upload requests
+ *
+ * Used for multipart uploads (e.g., version file uploads) that need
+ * to send metadata alongside files.
+ */
+export interface FormDataUploadRequestOptions extends BaseUploadRequestOptions {
+	/** FormData containing files and metadata */
+	formData: FormData
+	file?: never
+}
+
+/**
+ * Options for upload requests - either a single file or FormData
+ */
+export type UploadRequestOptions = FileUploadRequestOptions | FormDataUploadRequestOptions
+
+/**
+ * Metadata attached to file upload contexts
  *
  * Features can check `context.metadata?.isUpload` to detect uploads.
  */
-export interface UploadMetadata extends Record<string, unknown> {
+export interface FileUploadMetadata extends Record<string, unknown> {
 	isUpload: true
 	file: File | Blob
+	formData?: never
 	onProgress?: (progress: UploadProgress) => void
 }
 
+/**
+ * Metadata attached to FormData upload contexts
+ */
+export interface FormDataUploadMetadata extends Record<string, unknown> {
+	isUpload: true
+	formData: FormData
+	file?: never
+	onProgress?: (progress: UploadProgress) => void
+}
+
+/**
+ * Metadata attached to upload contexts - either file or FormData
+ */
+export type UploadMetadata = FileUploadMetadata | FormDataUploadMetadata
+
 /**
  * Handle returned from upload operations
  *