bb-plane-fork/apps/web/core/services/file.service.ts
binarybeach 9fb1ad44cd binarybeachio: presigned PUT for uploads (R2/B2 don't implement PostObject)
== WHY (KEEP THIS — IT'S WHY THE FORK EXISTS) ==

Vanilla Plane's upload flow uses AWS S3 PostObject (presigned POST +
multipart/form-data + signed-policy-document). Cloudflare R2 AND
Backblaze B2 — the two most common self-host S3-compatible backends —
both return HTTP 501 NotImplemented for PostObject. Empirically verified
2026-04-30 against B2 s3.us-west-004.backblazeb2.com from inside Plane's
own prod api container, replicating Plane's exact boto3 call:

  PUT against B2:  200 OK
  POST against B2: 501 NotImplemented "This API call is not supported."
  POST against R2: 501 NotImplemented (failure that started this thread)

The error code is `NotImplemented` (not `SignatureDoesNotMatch` etc),
meaning the server rejects the verb itself — no boto3 config, addressing-
style flag, or signature variant fixes it. Tested both path-style and
virtual-hosted-style URLs against B2; both fail identically for POST.

This patch rewrites the upload flow to use presigned PUT, which is
universally supported (R2, B2, AWS S3 native, MinIO, Wasabi, etc).

== WHAT (FIVE-FILE BACKEND, FIVE-FILE FRONTEND) ==

Backend:
* apps/api/plane/settings/storage.py — S3Storage.generate_presigned_post
  now mints a presigned PUT URL via generate_presigned_url(HttpMethod="PUT").
  Method name kept for caller compat. Response shape:
  {url, method: "PUT", fields: {Content-Type, key}}.
* apps/api/plane/utils/openapi/responses.py — example response updated.
* apps/api/plane/tests/unit/settings/test_storage.py — 2 tests updated to
  assert the new boto3 call.

Frontend:
* packages/types/src/file.ts — TFileSignedURLResponse.upload_data adds
  optional method?: "PUT" | "POST"; drops AWS POST-form-data fields.
* packages/services/src/file/helper.ts — generateFileUploadPayload now
  returns a TFileUploadRequest descriptor (url+method+body+headers) that
  dispatches on method. POST branch kept for upstream parity but the
  fork backend never emits POST.
* packages/services/src/file/file-upload.service.ts +
  apps/web/core/services/file-upload.service.ts — uploadFile signature
  changes from (url, FormData, progress?) to (payload, progress?).
* 5 caller sites updated (apps/web/core/services/file.service.ts x3,
  issue_attachment.service.ts x1, sites-file.service.ts x1).

== TRADEOFFS ACCEPTED ==

* Lost: signed `content-length-range` enforcement at the storage layer.
  Server-side validation in the API view still rejects oversized requests
  with 413 before minting the URL, so a determined client could only
  over-upload by misreporting size, capped at the bucket's own size limit.
* Different request shape on the wire (PUT with raw binary body vs POST
  with multipart form). Externally invisible to users.

== ROLLBACK ==

If this becomes a maintenance nightmare:

  git revert <this-commit-sha>
  # rebuild + push images, swap compose tags, redeploy

After revert, uploads will only work against backends that implement
PostObject (MinIO, AWS S3 native). R2 and B2 will return 501 again.

== FULL DECISION RECORD ==

binarybeachio repo: docs/features/storage-upload-flow.md

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-30 17:56:52 -10:00

291 lines
8.9 KiB
TypeScript

/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
import type { AxiosRequestConfig } from "axios";
// plane types
import { API_BASE_URL } from "@plane/constants";
import { getFileMetaDataForUpload, generateFileUploadPayload } from "@plane/services";
import type { EFileAssetType, TFileEntityInfo, TFileSignedURLResponse } from "@plane/types";
import { getAssetIdFromUrl } from "@plane/utils";
// helpers
// services
import { APIService } from "@/services/api.service";
import { FileUploadService } from "@/services/file-upload.service";
export interface UnSplashImage {
id: string;
created_at: Date;
updated_at: Date;
promoted_at: Date;
width: number;
height: number;
color: string;
blur_hash: string;
description: null;
alt_description: string;
urls: UnSplashImageUrls;
[key: string]: any;
}
export interface UnSplashImageUrls {
raw: string;
full: string;
regular: string;
small: string;
thumb: string;
small_s3: string;
}
export enum TFileAssetType {
COMMENT_DESCRIPTION = "COMMENT_DESCRIPTION",
ISSUE_ATTACHMENT = "ISSUE_ATTACHMENT",
ISSUE_DESCRIPTION = "ISSUE_DESCRIPTION",
PAGE_DESCRIPTION = "PAGE_DESCRIPTION",
PROJECT_COVER = "PROJECT_COVER",
USER_AVATAR = "USER_AVATAR",
USER_COVER = "USER_COVER",
WORKSPACE_LOGO = "WORKSPACE_LOGO",
}
export class FileService extends APIService {
private cancelSource: any;
private fileUploadService: FileUploadService;
constructor() {
super(API_BASE_URL);
this.cancelUpload = this.cancelUpload.bind(this);
// upload service
this.fileUploadService = new FileUploadService();
}
private async updateWorkspaceAssetUploadStatus(workspaceSlug: string, assetId: string): Promise<void> {
return this.patch(`/api/assets/v2/workspaces/${workspaceSlug}/${assetId}/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
async uploadWorkspaceAsset(
workspaceSlug: string,
data: TFileEntityInfo,
file: File,
uploadProgressHandler?: AxiosRequestConfig["onUploadProgress"]
): Promise<TFileSignedURLResponse> {
const fileMetaData = await getFileMetaDataForUpload(file);
return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/`, {
...data,
...fileMetaData,
})
.then(async (response) => {
const signedURLResponse: TFileSignedURLResponse = response?.data;
const fileUploadPayload = generateFileUploadPayload(signedURLResponse, file);
await this.fileUploadService.uploadFile(fileUploadPayload, uploadProgressHandler);
await this.updateWorkspaceAssetUploadStatus(workspaceSlug.toString(), signedURLResponse.asset_id);
return signedURLResponse;
})
.catch((error) => {
throw error?.response?.data;
});
}
async deleteWorkspaceAsset(workspaceSlug: string, assetId: string): Promise<void> {
return this.delete(`/api/assets/v2/workspaces/${workspaceSlug}/${assetId}/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
private async updateProjectAssetUploadStatus(
workspaceSlug: string,
projectId: string,
assetId: string
): Promise<void> {
return this.patch(`/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${assetId}/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
async updateBulkWorkspaceAssetsUploadStatus(
workspaceSlug: string,
entityId: string,
data: {
asset_ids: string[];
}
): Promise<void> {
return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/${entityId}/bulk/`, data)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
async updateBulkProjectAssetsUploadStatus(
workspaceSlug: string,
projectId: string,
entityId: string,
data: {
asset_ids: string[];
}
): Promise<void> {
return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${entityId}/bulk/`, data)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
async uploadProjectAsset(
workspaceSlug: string,
projectId: string,
data: TFileEntityInfo,
file: File,
uploadProgressHandler?: AxiosRequestConfig["onUploadProgress"]
): Promise<TFileSignedURLResponse> {
const fileMetaData = await getFileMetaDataForUpload(file);
return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/`, {
...data,
...fileMetaData,
})
.then(async (response) => {
const signedURLResponse: TFileSignedURLResponse = response?.data;
const fileUploadPayload = generateFileUploadPayload(signedURLResponse, file);
await this.fileUploadService.uploadFile(fileUploadPayload, uploadProgressHandler);
await this.updateProjectAssetUploadStatus(workspaceSlug, projectId, signedURLResponse.asset_id);
return signedURLResponse;
})
.catch((error) => {
throw error?.response?.data;
});
}
private async updateUserAssetUploadStatus(assetId: string): Promise<void> {
return this.patch(`/api/assets/v2/user-assets/${assetId}/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
async uploadUserAsset(data: TFileEntityInfo, file: File): Promise<TFileSignedURLResponse> {
const fileMetaData = await getFileMetaDataForUpload(file);
return this.post(`/api/assets/v2/user-assets/`, {
...data,
...fileMetaData,
})
.then(async (response) => {
const signedURLResponse: TFileSignedURLResponse = response?.data;
const fileUploadPayload = generateFileUploadPayload(signedURLResponse, file);
await this.fileUploadService.uploadFile(fileUploadPayload);
await this.updateUserAssetUploadStatus(signedURLResponse.asset_id);
return signedURLResponse;
})
.catch((error) => {
throw error?.response?.data;
});
}
async deleteUserAsset(assetId: string): Promise<void> {
return this.delete(`/api/assets/v2/user-assets/${assetId}/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
async deleteNewAsset(assetPath: string): Promise<void> {
return this.delete(assetPath)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
async deleteOldWorkspaceAsset(workspaceId: string, src: string): Promise<any> {
const assetKey = getAssetIdFromUrl(src);
return this.delete(`/api/workspaces/file-assets/${workspaceId}/${assetKey}/`)
.then((response) => response?.status)
.catch((error) => {
throw error?.response?.data;
});
}
async deleteOldUserAsset(src: string): Promise<any> {
const assetKey = getAssetIdFromUrl(src);
return this.delete(`/api/users/file-assets/${assetKey}/`)
.then((response) => response?.status)
.catch((error) => {
throw error?.response?.data;
});
}
async restoreNewAsset(workspaceSlug: string, src: string): Promise<void> {
// remove the last slash and get the asset id
const assetId = getAssetIdFromUrl(src);
return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/restore/${assetId}/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
async checkIfAssetExists(
workspaceSlug: string,
assetId: string
): Promise<{
exists: boolean;
}> {
return this.get(`/api/assets/v2/workspaces/${workspaceSlug}/check/${assetId}/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
async restoreOldEditorAsset(workspaceId: string, src: string): Promise<void> {
const assetKey = getAssetIdFromUrl(src);
return this.post(`/api/workspaces/file-assets/${workspaceId}/${assetKey}/restore/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
cancelUpload() {
this.cancelSource.cancel("Upload canceled");
}
async getUnsplashImages(query?: string): Promise<UnSplashImage[]> {
return this.get(`/api/unsplash/`, {
params: {
query,
},
})
.then((res) => res?.data?.results ?? res?.data)
.catch((err) => {
throw err?.response?.data;
});
}
async duplicateAsset(
workspaceSlug: string,
assetId: string,
data: {
entity_id?: string;
entity_type: EFileAssetType;
project_id?: string;
}
): Promise<{ asset_id: string }> {
return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/duplicate-assets/${assetId}/`, data)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
}