File Upload
In this page we describe how to upload files to a deployed schema.
Cedalio adds to your schema a type File that you can use in your schema fields. Files will be uploaded to IPFS and you will be provided with an url and the cid (Content identifier) of the file.
Currently files are limited to 250 MB
type File {
contentType: String
cid: String!
size: Int!
fileName: String
fileURL: URL!
}
In order for the upload to work, you must ensure the File field is sent as a multipart form. If you're using Apollo for example, you can use apollo-upload-client.
Schema
Apollo client
cURL example
type Post @model {
title: String!
slug: String!
picture: File!
}
import { gql, useMutation, MutationFunctionOptions, ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";
import { createUploadLink } from "apollo-upload-client";
const MUTATION = gql`
mutation ($picture: FileInput!, $title: String!, $slug: String!) {
postCreate(input: { title: $title, slug: $slug, picture: $picture }) {
post {
id
slug
picture {
contentType
cid
size
fileName
fileURL
}
}
}
}
`;
function UploadFiles() {
const [mutate] = useMutation(MUTATION);
function onChange({ target: { validity, files } }: React.ChangeEvent<HTMLInputElement>) {
if (validity.valid && files) {
// The FileInput type accepts a Javascript File
const variables: MutationFunctionOptions = { variables: { picture: files[0], title: "title1", slug: "slug1" } };
mutate(variables);
}
}
return <input type="file" multiple required onChange={onChange} />;
}
const uploadLink = createUploadLink({ uri: "http://your.endpoint/<deployment_id>/graphql" });
const client = new ApolloClient({
link: uploadLink,
cache: new InMemoryCache({
addTypename: false
}),
});
export default function Home() {
return (
<ApolloProvider client={client}>
<UploadFiles />
</ApolloProvider>
)
}
curl 'http://your.endpoint/deployments/<deployment_id>/graphql' \
-H 'Accept-Language: en-US,en;q=0.9' \
-H 'Connection: keep-alive' \
-H 'Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryQ8q2PO9vlu0WMM9q' \
-H 'accept: */*' \
-H 'authorization: Bearer your_token' \
--data-raw $'------WebKitFormBoundaryQ8q2PO9vlu0WMM9q\r\nContent-Disposition: form-data; name="operations"\r\n\r\n{"variables":{"picture":null,"title":"some_title","slug":"2l5ZpejyL5"},"query":"mutation ($picture: FileInput\u0021, $title: String\u0021, $slug: String\u0021) {\\n postCreate(input: {title: $title, slug: $slug, picture: $picture}) {\\n post {\\n id\\n }\\n }\\n}"}\r\n------WebKitFormBoundaryQ8q2PO9vlu0WMM9q\r\nContent-Disposition: form-data; name="map"\r\n\r\n{"1":["variables.picture"]}\r\n------WebKitFormBoundaryQ8q2PO9vlu0WMM9q\r\nContent-Disposition: form-data; name="1"; filename="example.txt"\r\nContent-Type: text/plain\r\n\r\n\r\n------WebKitFormBoundaryQ8q2PO9vlu0WMM9q--\r\n' \
--compressed \
--insecure
Network issues in the IPFS network
status_code: 200 OK
{
"data": null,
"errors": [
{
"message": "Web3Storage upload response is not successfull: 502 Bad Gateway"
}
]
}
Files bigger than 250MB
status_code: 413 request entity too large
Last modified 3mo ago