> ## Documentation Index
> Fetch the complete documentation index at: https://developer.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Update metadata on a file

export const MultiRelatedLinks = ({sections = []}) => {
  if (!sections || sections.length === 0) {
    return null;
  }
  return <div className="space-y-8">
      {sections.map((section, index) => <RelatedLinks key={index} title={section.title} items={section.items} />)}
    </div>;
};

export const RelatedLinks = ({title, items = []}) => {
  const getBadgeClass = badge => {
    if (!badge) return "badge-default";
    const badgeType = badge.toLowerCase().replace(/\s+/g, "-");
    return `badge-${badge === "ガイド" ? "guide" : badgeType}`;
  };
  if (!items || items.length === 0) {
    return null;
  }
  return <div className="my-8">
      {}
      <h3 className="text-sm font-bold uppercase tracking-wider mb-4">{title}</h3>

      {}
      <div className="flex flex-col gap-3">
        {items.map((item, index) => <a key={index} href={item.href} className="py-2 px-3 rounded related_link hover:bg-[#f2f2f2] dark:hover:bg-[#111827] flex items-center gap-3 group no-underline hover:no-underline border-b-0">
            {}
            <span className={`px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-wide flex-shrink-0 ${getBadgeClass(item.badge)}`}>
              {item.badge}
            </span>

            {}
            <span className="text-base">{item.label}</span>
          </a>)}
      </div>
    </div>;
};

export const ProgressBar = ({pages = [], ...props}) => {
  const [currentStep, setCurrentStep] = useState(0);
  const [isDarkMode, setIsDarkMode] = useState(false);
  useEffect(() => {
    const checkDarkMode = () => {
      const isDark = document.documentElement.classList.contains('dark');
      console.log('ProgressBar - isDarkMode:', isDark);
      setIsDarkMode(isDark);
    };
    checkDarkMode();
    const observer = new MutationObserver(() => {
      checkDarkMode();
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => {
      observer.disconnect();
    };
  }, []);
  useEffect(() => {
    if (pages.length > 0) {
      const currentPath = window.location.pathname;
      const stepIndex = pages.findIndex(page => {
        const pagePath = page.startsWith('/') ? page : `/${page}`;
        return currentPath.endsWith(pagePath) || currentPath.includes(pagePath);
      });
      if (stepIndex !== -1) {
        setCurrentStep(stepIndex + 1);
      }
    }
  }, [pages]);
  if (!pages || pages.length === 0) {
    return null;
  }
  const step = currentStep;
  const total = pages.length;
  console.log('ProgressBar - Rendering with isDarkMode:', isDarkMode);
  const progressBarContainerStyle = {
    width: '100%',
    marginBottom: '32px',
    display: 'flex',
    alignItems: 'center',
    gap: '16px'
  };
  const stepsContainerStyle = {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    flexShrink: 0
  };
  const progressBarTrackStyle = {
    flex: 1,
    height: '22px',
    backgroundColor: 'rgba(169, 210, 244, 0.06)',
    border: isDarkMode ? '1px solid rgba(230, 241, 247, 0.67)' : '1px solid #e3ecf3',
    borderRadius: '4px',
    overflow: 'hidden',
    position: 'relative'
  };
  const progressBarFillStyle = {
    height: '100%',
    backgroundColor: 'rgba(113, 192, 248, 0.23)',
    width: `${step / total * 100}%`,
    transition: 'width 0.3s ease'
  };
  const getStepStyle = (stepNumber, isActive) => {
    if (isDarkMode) {
      return {
        width: '22px',
        height: '22px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: '600',
        position: 'relative',
        zIndex: 1,
        transition: 'all 0.3s ease',
        backgroundColor: isActive ? 'rgba(113, 192, 248, 0.23)' : 'transparent',
        color: isActive ? '#60a5fa' : '#a0aec0',
        border: isActive ? '1px solid #e3ecf3' : '1px solid #e0e6eb',
        cursor: 'pointer',
        textDecoration: 'none'
      };
    }
    if (isActive) {
      return {
        width: '22px',
        height: '22px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: '600',
        position: 'relative',
        zIndex: 1,
        transition: 'all 0.3s ease',
        backgroundColor: 'rgba(169, 210, 244, 0.32)',
        color: '#374151',
        border: '1px solid #e1eef8',
        cursor: 'pointer',
        textDecoration: 'none'
      };
    }
    return {
      width: '22px',
      height: '22px',
      borderRadius: '4px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: '12px',
      fontWeight: '600',
      position: 'relative',
      zIndex: 1,
      transition: 'all 0.3s ease',
      backgroundColor: '#fbfbfb',
      color: '#9ca3af',
      border: '1px solid #e3ecf3',
      cursor: 'pointer',
      textDecoration: 'none'
    };
  };
  return <div style={progressBarContainerStyle} {...props}>
      <div style={stepsContainerStyle}>
        {Array.from({
    length: total
  }, (_, index) => {
    const stepNumber = index + 1;
    const pageIndex = index;
    const pagePath = pages[pageIndex];
    const fullPath = pagePath.startsWith('/') ? pagePath : `/${pagePath}`;
    const isActive = stepNumber === step;
    return <a key={stepNumber} href={fullPath} style={getStepStyle(stepNumber, isActive)}>
              {stepNumber}
            </a>;
  })}
      </div>
      <div style={progressBarTrackStyle}>
        <div style={progressBarFillStyle}></div>
      </div>
    </div>;
};

<ProgressBar
  pages={[
                      "guides/metadata/quick-start/list-all",
                      "guides/metadata/quick-start/create-template",
                      "guides/metadata/quick-start/create-instance",
                      "guides/metadata/quick-start/update-instance",
                      "guides/metadata/quick-start/update-template",
                      "guides/metadata/quick-start/create-query",
                      "guides/metadata/quick-start/next-steps"
                    ]}
/>

Once metadata has been applied to a file or folder there is often a need to
update the metadata at a later date.

Updating a metadata instance is done by applying a set of operations to the
original data. These operations are performed atomically, ensuring that the
changes are either all applied or not applied at all.

<Card href={localizeLink("/guides/metadata/instances/update")} arrow title="Learn more about updating instances" />

In this case, let's assume we want to change the `name` of the customer from
`Box, Inc` to `Box`. We can apply two operations, firstly, we ensure the
value of the name is still `Box, Inc` before we change it, and secondly we make
the change.

<CodeGroup>
  ```sh cURL theme={null}
  curl -X PUT https://api.box.com/2.0/files/12345/metadata/enterprise/customerInfo \
      -H "authorization: Bearer <ACCESS_TOKEN>" \
      -H "content-type: application/json-patch+json" \
      -d '[
        {
          "op": "test",
          "path": "/name",
          "value": "Box, Inc"
        },
        {
          "op": "replace",
          "path": "/name",
          "value": "Box"
        }
      ]'
  ```

  ```csharp .NET theme={null}
  var updates = new List<BoxMetadataUpdate>()
  {
    new BoxMetadataUpdate()
    {
        Op = MetadataUpdateOp.test,
        Path = "/name",
        Value = "Box, Inc"
    },
    new BoxMetadataUpdate()
    {
        Op = MetadataUpdateOp.replace,
        Path = "/name",
        Value = "Box"
    }
  };
  Dictionary<string, object> updatedMetadata = await client.MetadataManager
      .UpdateFileMetadataAsync("12345", updates, "enterprise", "customerInfo");
  ```

  ```java Java theme={null}
  BoxFile file = new BoxFile(api, "12345");
  file.updateMetadata(
    file.createMetadata(
    "customerInfo",
    "enterprise",
    new Metadata().test("/name", "Box, Inc").replace("/name", "Box")
  );
  ```

  ```python Python theme={null}
  file = client.file(file_id='12345')
  metadata = file.metadata(scope='enterprise', template='customerInfo')

  updates = metadata.start_update()
  updates.test('/name', 'Box, Inc')
  updates.replace('/name', 'Box')

  file.update(updates)
  ```

  ```js Node theme={null}
  var updates = [
      { op: 'test', path: '/name', value: 'Box, Inc' },
      { op: 'replace', path: '/name', value: 'Box' }
  ];

  client.files.updateMetadata(
      '12345',
      client.metadata.scopes.ENTERPRISE,
      "customerInfo",
      updates
  ).then(metadata => {
      //...
  });
  ```
</CodeGroup>

<Card href={localizeLink("/guides/metadata/instances/update")} arrow title="Learn more about all operations" />

The API will return the updated metadata instance.

```json theme={null}
{
  "name": "Box",
  "industry": "Technology",
  "tav": 1000000,
  "$id": "01234500-12f1-1234-aa12-b1d234cb567e",
  "$parent": "folder_12345,",
  "$scope": "enterprise_34567",
  "$template": "customerInfo",
  "$type": "customerInfo-6bcba49f-ca6d-4d2a-a758-57fe6edf44d0",
  "$typeVersion": 2,
  "$version": 1,
  "$canEdit": true
}
```

<Next>I've updated metadata on a file</Next>

<RelatedLinks
  title="RELATED APIS"
  items={[
{ label: translate("Update metadata instance on file"), href: "/reference/put-files-id-metadata-id-id", badge: "PUT" },
{ label: translate("Update metadata instance on folder"), href: "/reference/put-folders-id-metadata-id-id", badge: "PUT" }
]}
/>

<RelatedLinks
  title="RELATED GUIDES"
  items={[
{ label: translate("Metadata templates"), href: "/guides/metadata/templates/index", badge: "GUIDE" },
{ label: translate("Update metadata on an item"), href: "/guides/metadata/instances/update", badge: "GUIDE" }
]}
/>