File Upload

[olzii]

Do anyone have plan to add file upload feature ?

[koistya]

Yep, it will be added soon. It would look like an API endpoint that generates upload URL (to Google Storage Bucket or Amazon S3). The client app would request that URL and upload file(s) directly to cloud storage using HTTP PUT request.

mutation {
  getUploadURL(filename: "hello-world.jpg", ...)
}

await fetch(uploadURL, { method: "PUT", body: file });

Each uploaded file needs to have a unique URL (e.g. by prefixing it with file ID) so it can be permanently cached at the CDN level. And then can be requested directly from google storage by client app(s). For example:

https://s.example.com/nv4fzx/hello-world.jpg

Where s.example.com is a CDN endpoint (CNAME) pointing to gs://s.example.com GCS bucket, and nv4fzx is a unique file ID.

Also, it can be complemented with yet another cloud function that can be used to transform uploaded images via URL parameters, similarly to Cloudinary:

https://i.example.com/w_80,h_60,c_fill/nv4fzx/hello-world.jpg

Files

• api/src/mutations/getUploadURL.ts
• api/src/mutations/saveUpload.ts

References

https://googleapis.dev/nodejs/storage/latest/File.html#generateSignedPostPolicyV4
https://cloud.google.com/functions/docs/tutorials/imagemagick
https://zelark.github.io/nano-id-cc/

P.S.: Join our Discord channel to discuss this feature https://discord.com/invite/bSsv7XM

[phpb-com]

Any update on this? Thanks.

[koistya]

@phpb-com yes, there is api/src/mutations/getUploadURL.ts and api/src/mutations/saveUpload.ts on the API side. All you have to do on the client is to request "upload URL", send the file(s) via HTTP PUT to that URL, then send "uploaded file URL" to the saveUpload() API mutation (which copies the file over from a temporary upload bucket location to a permanent place based on the linked content type (user photo, blog post pictures, etc.). As was described here.