media-uploads.mdx

Media Uploads

:::warning Apps can only display images hosted on Reddit :::

You can upload images to Reddit at runtime using the media capability. This is different than static images, which you bundle with your app's client assets.

Runtime images are useful for embedding images in RTJSON (Posts and Comments) as well as displaying them within an interactive post app.

Enabling media uploads

Enable the media permission in your devvit.json file.

{
  "permissions": {
    "media": true
  }
}

Using media uploads

On the server, you can pass the URL of any remotely hosted image (even if its not hosted on Reddit) to the media.upload function. This function will return a Reddit URL. Both HTTP and data URLs are supported.

import { media } from '@devvit/media';

function submitImage() {
  const response = await media.upload({
    url: 'https://media2.giphy.com/media/xTiN0CNHgoRf1Ha7CM/giphy.gif',
    type: 'gif',
  });
}

Canvas screenshots

The Canvas API is fully supported by Devvit. You can use it to capture screenshots of your app's current state and upload them using the media API.

This is useful for letting users share their progress, achievements, or creations as image posts. Sharing screenshots is an effective way to build community engagement and increase visibility for your app.

// Capture the canvas as a data URL
const canvas = document.querySelector('canvas');
const dataUrl = canvas.toDataURL('image/png');

// Send to server endpoint for upload
const response = await fetch('/api/upload-screenshot', {
  method: 'POST',
  body: JSON.stringify({ image: dataUrl }),
});

import { media } from '@devvit/media';

app.post('/api/upload-screenshot', async (c) => {
  const { image } = await c.req.json();
  
  const response = await media.upload({
    url: image,  // data URL from canvas
    type: 'png',
  });
  
  return c.json({ url: response.mediaUrl });
});

Limitations

• The formats supported are PNG, JPEG, WEBP, and GIF.
• The maximum file size allowed is 20 MB.

Notes

• When uploading a WEBP image, it will be converted to JPEG. As such, the Reddit URL returned points to a JPEG image.