[CLOSED] Param "fileId" is not optional When trying to create/upload a image

Hello again, following the docs (https://appwrite.io/docs/products/storage/upload-download) using http im unable to upload/create a file, i got this error: {"message":"Param \"fileId\" is not optional.","code":400,"type":"general_argument_invalid","version":"1.4.13"} this is what im trying to construct:

TypeScript

    // Set the required headers
    data.headers = {
        'Content-Type': 'multipart/form-data; boundary=cec8e8123c05ba25',
        'X-Appwrite-Project': 'xxxxxxxxxxxxx'
    };
    
    // Build the form data
    var formData = new FormData();
    formData.append('operations', JSON.stringify({
        query: "mutation CreateFile($bucketId: String!, $fileId: String!, $file: InputFile!) { storageCreateFile(bucketId: $bucketId, fileId: $fileId, file: $file) { id } }",
        variables: {
            bucketId: "yyyyyyyyyyyyyy",
            fileId: "unique()",
            file: null
        }
    }));
    
    formData.append('map', { "0": ["variables.file"] });
    formData.append('0', data.files[0]);
    
    // Set the form data in the request
    data.formData = formData;
    
    
}```

what im missing?
i already tried to set a `fileId` manually but same error occurs

TL;DR

Image upload issue with file ID being required, confusion around using GraphQL endpoint for image upload, attempts to fix the issue with different plugins, discussion on request bodies and headers, consideration of switching plugins due to lack of updates, final solution using the web SDK with custom script and CSS.

Probably fileId 😜

Why graphql?

but as you can see fileId: is there ("unique()")

i want to use jquery-fancyfileuploader and it only works server side, so i need to send the file to a url

Sorry I still don't understand

Also, our graphql endpoint accepts 3 parameters: query, operation name, and variables, but the form data you're sending has operations and map 🧐

You could tweak the code and dump this: https://github.com/appwrite/appwrite/blob/05f73fbe46796032c3785029a28b4ea0fafbcfd0/app/controllers/api/graphql.php#L82 to try and see what Appwrite sees

Nvm...looks like operations and query are right

https://github.com/appwrite/appwrite/blob/05f73fbe46796032c3785029a28b4ea0fafbcfd0/app/controllers/api/graphql.php#L244

I still don't understand why you need to use graphql 🧐

I want to use this jquery plugin: https://github.com/cubiclesoft/jquery-fancyfileuploader And, if I understand, it post the file to the url parameter, so, i need to post to the endpoint : /v1/storage/buckets/{bucketId}/files Or im wrong?

That endpoint isn't for graphql 👀

If you want to manually use the rest API, you can refer to https://appwrite.io/docs/apis/rest#files.

~~Although I would assume you can use our web sdk too ..~~ nvm maybe not

Im using the rest api, 🤔🤔

Or maybe im mixing things?

This here is graphql input

I think you must see the full script, give a sec

I don't think the docs you followed for this is right

Please refer to these docs

TypeScript

                    params: {
                        action: 'fileuploader'
                    },
                    fileupload : {
                        maxChunkSize : 4900000
                    },
                    url: "https://a.d.com/v1/storage/buckets/xx/files",
                    edit: false,
                    retries: 0,
                    maxfilesize: 100000000,
                    added: function (e, data) {
                        data.headers = {
                            'Content-Type': 'multipart/form-data; boundary=cec8e8123c05ba25',
                            'X-Appwrite-Project': 'zz',
                        };
                        if (data.files[0]['size'] > 4900000) {
                            data.headers['X-Appwrite-ID'] = data.files[0]['lastModified'];
                        }
                        var formData = new FormData();
                        const variables = {
                            bucketId: "xx",
                            file: null
                        };
                        if (data.files[0]['size'] > 4900000) {
                            variables.fileId = data.files[0]['lastModified'];
                        }
                        formData.append('operations', JSON.stringify({
                            query: "mutation CreateFile($bucketId: String!, $fileId: String!, $file: InputFile!) { storageCreateFile(bucketId: $bucketId, fileId: $fileId, file: $file) { id } }",
                            variables: variables
                        }));
                        formData.append('map', { "0": ["variables.file"] });
                        formData.append('0', data.files[0]);
                        data.formData = formData;
                        this.find('.ff_fileupload_actions button.ff_fileupload_start_upload').click();
                    }
                });```

thats the fullscript <@462046107556511744>

Doesn't change my last two statements

Let me check it again, im very confused

I really dont get it, documentation is very confusing or i have too much info that im very confused... documentation says only about chunked files but not for files less than 5mb, im frustrated

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more

Recommended threads

Need support?

Join our Discord

Get premium support