== 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>
291 lines
8.9 KiB
TypeScript
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;
|
|
});
|
|
}
|
|
}
|