Files
supabase/apps/reference/_supabase_js/generated/storage-from-update.mdx
2022-08-23 13:05:23 +08:00

392 lines
9.2 KiB
Plaintext

---
id: storage-from-update
title: 'from.update()'
slug: /storage-from-update
custom_edit_url: https://github.com/supabase/supabase/edit/master/spec/supabase_js_v2_legacy.yml
---
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
Replaces an existing file at the specified path with a new one.
```js
const avatarFile = event.target.files[0]
const { data, error } = await supabase.storage
.from('avatars')
.update('public/avatar1.png', avatarFile, {
cacheControl: '3600',
upsert: false,
})
```
## Parameters
<ul className="method-list-group">
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
path
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>string</code>
</span>
</h4>
<div class="method-list-item-description">
The relative file path. Should be of the format `folder/subfolder/filename.png`. The bucket must already exist before attempting to update.
</div>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
fileBody
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>string</code> | <code>ArrayBuffer</code> | <code>ArrayBufferView</code> | <code>Blob</code> | <code>Buffer</code> | <code>File</code> | <code>FormData</code> | <code>ReadableStream</code> | <code>ReadableStream</code> | <code>URLSearchParams</code>
</span>
</h4>
<div class="method-list-item-description">
The body of the file to be stored in the bucket.
</div>
<ul className="method-list-group">
<h5 class="method-list-title method-list-title-isChild expanded">Properties</h5>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
URLSearchParams
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>object</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
string
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>object</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
ReadableStream
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>object</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
ReadableStream
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>object</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
FormData
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>object</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
File
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>object</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
Buffer
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>object</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
Blob
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>object</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
ArrayBufferView
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>object</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
ArrayBuffer
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>object</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
</li>
</ul>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
FileOptions
</span>
<span className="method-list-item-label-badge required">
required
</span>
<span className="method-list-item-validation">
<code>object</code>
</span>
</h4>
<div class="method-list-item-description">
No description provided.
</div>
<ul className="method-list-group">
<h5 class="method-list-title method-list-title-isChild expanded">Properties</h5>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
cacheControl
</span>
<span className="method-list-item-label-badge false">
optional
</span>
<span className="method-list-item-validation">
<code>string</code>
</span>
</h4>
<div class="method-list-item-description">
The number of seconds the asset is cached in the browser and in the Supabase CDN. This is set in the `Cache-Control: max-age=<seconds>` header. Defaults to 3600 seconds.
</div>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
contentType
</span>
<span className="method-list-item-label-badge false">
optional
</span>
<span className="method-list-item-validation">
<code>string</code>
</span>
</h4>
<div class="method-list-item-description">
the `Content-Type` header value. Should be specified if using a `fileBody` that is neither `Blob` nor `File` nor `FormData`, otherwise will default to `text/plain;charset=UTF-8`.
</div>
</li>
<li className="method-list-item">
<h4 className="method-list-item-label">
<span className="method-list-item-label-name">
upsert
</span>
<span className="method-list-item-label-badge false">
optional
</span>
<span className="method-list-item-validation">
<code>boolean</code>
</span>
</h4>
<div class="method-list-item-description">
When upsert is set to true, the file is overwritten if it exists. When set to false, an error is thrown if the object already exists. Defaults to false.
</div>
</li>
</ul>
</li>
</ul>
## Notes
- RLS policy permissions required:
- `buckets` table permissions: none
- `objects` table permissions: `update` and `select`
- Refer to the [Storage guide](/docs/guides/storage#access-control) on how access control works
- For React Native, using either `Blob`, `File` or `FormData` does not work as intended. Update file using `ArrayBuffer` from base64 file data instead, see example below.
## Examples
### Update file
```js
const avatarFile = event.target.files[0]
const { data, error } = await supabase.storage
.from('avatars')
.update('public/avatar1.png', avatarFile, {
cacheControl: '3600',
upsert: false,
})
```
### Update file using `ArrayBuffer` from base64 file data
```js
import { decode } from 'base64-arraybuffer'
const { data, error } = await supabase.storage
.from('avatars')
.update('public/avatar1.png', decode('base64FileData'), {
contentType: 'image/png',
})
```