Issue with assets not showing up in the Sanity studio after being uploaded to Firebase Cloud Storage.

11 replies
Last updated: Aug 21, 2023
I am building a firebase cloud action , when an image is uploaded in the storage an asset upload to sanity will take placeWhile doing this i am not getting any error, even the cdn link of the asset uploaded is getting returned but it is not getting shown anywhere in the studio


const metaData = {contentType}
    await bucket.file(thumbFilePath).save(thumbnailBuffer,{
        metadata:metaData
    })
    try {
        const data = await client.assets.upload("image", thumbnailBuffer, { contentType: metaData });
        logger.log("Returned asset", data);
        logger.log("Thumbnail Uploaded!");
    } catch (error) {
        logger.error(error);
    } finally {
        logger.log("Over");
    }
    
    return
Any help
Thanks in advance
AI Update

I can see the issue! When you use client.assets.upload(), you're creating an asset document in Sanity, but that asset isn't automatically connected to any of your content documents - it's just sitting in your asset library. This is why you're getting a CDN link back but not seeing it appear in your Studio's main content views.

The Problem

The asset upload method creates standalone asset documents in your Content Lake. These assets exist, but they're not referenced by any of your content documents, so they won't show up in your regular document views in Studio.

Solutions

Option 1: Create a Document that References the Asset

After uploading the asset, create or update a document that references it:

try {
    const asset = await client.assets.upload("image", thumbnailBuffer, { 
        contentType: metaData.contentType,
        filename: 'your-filename.jpg' // Adding filename helps with identification
    });
    
    logger.log("Returned asset", asset);
    
    // Now create a document that uses this asset
    await client.create({
        _type: 'yourDocumentType',
        title: 'Firebase uploaded image',
        image: {
            _type: 'image',
            asset: {
                _type: 'reference',
                _ref: asset._id
            }
        }
    });
    
    logger.log("Document created with image reference!");
} catch (error) {
    logger.error(error);
}

Option 2: View Assets Directly

If you want to see all uploaded assets (even orphaned ones), you can:

  1. Install sanity-plugin-media which gives you a dedicated asset browser
  2. Use the Vision plugin in Studio and query: *[_type == "sanity.imageAsset"] to see all image assets
  3. Access the Media Library if you're on an Enterprise plan

Option 3: Update an Existing Document

If you want to attach the uploaded image to an existing document:

const asset = await client.assets.upload("image", thumbnailBuffer, { 
    contentType: metaData.contentType 
});

await client.patch('document-id-here')
    .set({
        image: {
            _type: 'image',
            asset: {
                _type: 'reference',
                _ref: asset._id
            }
        }
    })
    .commit();

Additional Tips

  • Add a filename option to your upload to make assets easier to identify
  • Consider adding source metadata to track that these came from Firebase
  • The asset CDN link works immediately, but the asset needs to be referenced by a document to appear in your content views

The key takeaway: assets are separate entities from your content documents. You need to create that connection explicitly for them to show up in your Studio's document views.

You can use the Media Browser Plugin to manage your assets.
I am already using itBut still it is not visible
Is the CDN link being returned by the API accessible to you?
Yes , I can view the image using the cdn link
Does the project ID in the CDN url match the one set for the Studio where you have installed the Media browser plugin?
import {defineConfig} from 'sanity'
import {deskTool} from 'sanity/desk'
import {visionTool} from '@sanity/vision'
import {schemaTypes} from './schemas'
import { media } from 'sanity-plugin-media'

export default defineConfig({
  name: 'default',
  title: 'CLOUD-FUNCTION-BUCKET',

  projectId: '6ydkcei8',
  dataset: 'trial',

  plugins: [deskTool(), visionTool(),media()],

  schema: {
    types: schemaTypes,
  },
})
This is my config file
I am not a 100% sure but I wonder if the issue is the
dataset
? The one in the URL looks like it is pointing to
production
but the config file is pointing to
dataset: 'trial'
? Can you set
dataset: 'production'
in your config file and see if that helps?
Yes sorry for the overlookingI was continuously changing the dataset of sanity.cli.js instead of the config one
Thanks for pointing that
Little little typos
🥲
Thanks

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?