jdalrymple / gitbeaker

🦊🧪 A comprehensive and typed Gitlab SDK for Node.js, Browsers, Deno and CLI
Other
1.5k stars 283 forks source link

PackageRegistry.publish not properly uploading files from html file input #3580

Open BurritoSpray opened 2 months ago

BurritoSpray commented 2 months ago

PackageRegistry.publish not properly uploading files from html file input

When publishing a generic package the multipart header is not removed so the integrity of the file is compromised. Its working as expected when using directly the gitlab API with fetch, but when im doing the same with gitbeaker the file still has the headers for multipart stuff in it.

Maybe its just me doing it wrong but I haven't seen any example in the documentation about publishing a package.

Here's the code i used to get the issue

    const handleSubmit = async (e) => {
        e.preventDefault();
        const api = data.api;
        const project = data.project;

        // Validate inputs
        if (files === null || packageName === "" || tagName === "") {
            return;
        }

        // Upload the files one by one
        for (let file of files){
            try{
                const result = await api.PackageRegistry.publish(
                    project.id,
                    packageName,
                    tagName,
                    {
                        filename: file.name,
                        content: file
                    },
                    {
                        contentType: "multipart/form-data",
                        select: "package_file",
                        status: "default"
                    }
                )
                console.log(result);
            } catch (e) {
                console.error(e);
            }

        }
    }

Here's the headers im talking about Screenshot from 2024-04-30 13-02-30

Working example with fetch

    const handleSubmit = async (e) => {
        e.preventDefault();
        const api = data.api;
        const project = data.project;
        const token = await window.git.getToken();
        const url = await window.git.getGitURL();

        // Validate inputs
        if (files === null || packageName === "" || tagName === "") {
            return;
        }

        // Upload the files one by one
        for (let file of files){
            try{
                const response = await fetch(new URL(`/api/v4/projects/${project.id}/packages/generic/${packageName}/${tagName}/${file.name}?status=default&select=package_file`, url),{
                    method: "PUT",
                    headers: {
                        "Content-Type": "multipart/form-data",
                        "Authorization": `Bearer ${token}`
                    },
                    body: file
                });

                console.log(`Uploaded new package: ${await response.json()}`);
            } catch (e) {
                console.error(e);
            }

        }
    }

Result with fetch Screenshot from 2024-04-30 13-14-37

Steps to reproduce Try to upload a binary file from an html file input

Expected behaviour The data should be the same as the original file

Actual behaviour The headers are not removed so the file is no longer the same as the original

Possible fixes The contentType in the options does not seems to be doing anything no matter what I put the result is the same, it looks like it defaults to application/octet-steam

Checklist

jdalrymple commented 2 months ago

Ill give it a look and follow up!

NTICompass commented 1 month ago

I'm having this same issue. I'm assuming the issue has something to do with the isForm: true, line in PackageRegistry.ts.

https://github.com/jdalrymple/gitbeaker/blob/d64af2ae12f67faf0d446a94a20cf5645e4f520a/packages/core/src/resources/PackageRegistry.ts#L66

It's not supposed to be using FormData, it's supposed to be sending the file as the raw POST (PUT) body. The appendFormFromObject is creating a FormData object, which is incorrect for publishing to the package repo.

https://github.com/jdalrymple/gitbeaker/blob/d64af2ae12f67faf0d446a94a20cf5645e4f520a/packages/core/src/infrastructure/RequestHelper.ts#L350-L352

jdalrymple commented 1 month ago

Hmm yes, i used FormData since many of the other API's that transfer file data tend to leverage this method. In this case you mention "raw" but what is the actual data type? Blob?

NTICompass commented 1 month ago

I said "raw", because you'd set the Content-Type of the request to the MIME of the file you are uploading, then you'd send the binary file as the post body directly.

Using fetch, I did it like:

const upload = `${api.host}/api/v4/projects/${api.projectId}`
    +`/packages/generic/${api.name}/${version}/${name}.jar?status=default&select=package_file`;

const response = await fetch(upload, {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/java-archive',
        'Authorization': `Bearer ${api.token}`,
    },
    body: new Blob(fileData, {type: 'application/java-archive'})
});

So,yeah, it would be a Blob that you are sending as the body. This seems to just be for the PackageRegistry.publish route. I learned this the hard way when working with the GitLab api in a different project.

jdalrymple commented 1 month ago

Noted, Ill make those changes to support that^

jdalrymple commented 1 month ago

Havent forgotten about this! Just trying not to add to the tech debt pile so its taking a bit longer than id like haha