mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 03:45:06 +03:00
Update tabs for storage.mdx
This commit is contained in:
Joshen Lim committed
1 parent
771d571f2e
commit
a7b5876c71
2 files changed
+64
-55
No files matched your search
@@ -54,22 +54,19 @@ Since the storage is interoperable with your Postgres database, you can also use
|
||||
client libraries. Here we create a bucket called "avatars":
|
||||
|
||||
<Tabs
|
||||
groupId="storage-tabs"
|
||||
defaultValue="dashboard"
|
||||
values={[
|
||||
{label: 'Dashboard', value: 'dashboard'},
|
||||
{label: 'SQL', value: 'sql'},
|
||||
{label: 'JavaScript', value: 'javascript'},
|
||||
{label: 'Dart', value: 'dart'},
|
||||
]}>
|
||||
<TabItem value="dashboard">
|
||||
scrollable
|
||||
size="small"
|
||||
type="underlined"
|
||||
defaultActiveId="dashboard"
|
||||
>
|
||||
<TabPanel id="dashboard" label="Dashboard">
|
||||
|
||||
1. Go to the [Storage](https://app.supabase.com/project/_/storage/buckets) page in the Dashboard.
|
||||
2. Click **New Bucket** and enter a name for the bucket.
|
||||
3. Click **Create Bucket**.
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="sql">
|
||||
</TabPanel>
|
||||
<TabPanel id="sql" label="SQL">
|
||||
|
||||
```sql
|
||||
-- Use Postgres to create a bucket.
|
||||
@@ -78,8 +75,8 @@ insert into storage.buckets (id, name)
|
||||
values ('avatars', 'avatars');
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="javascript">
|
||||
</TabPanel>
|
||||
<TabPanel id="javascript" label="JavaScript">
|
||||
|
||||
```js
|
||||
// Use the JS library to create a bucket.
|
||||
@@ -89,8 +86,8 @@ const { data, error } = await supabase.storage.createBucket('avatars')
|
||||
|
||||
[Reference.](/docs/reference/javascript/storage-createbucket)
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="dart">
|
||||
</TabPanel>
|
||||
<TabPanel id="dart" label="Dart">
|
||||
|
||||
```dart
|
||||
void main() async {
|
||||
@@ -104,7 +101,7 @@ void main() async {
|
||||
|
||||
[Reference.](https://pub.dev/documentation/storage_client/latest/storage_client/SupabaseStorageClient/createBucket.html)
|
||||
|
||||
</TabItem>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
||||
### Upload a file
|
||||
@@ -112,22 +109,20 @@ void main() async {
|
||||
You can upload a file from the Dashboard, or within a browser using our JS libraries.
|
||||
|
||||
<Tabs
|
||||
groupId="storage-tabs"
|
||||
defaultValue="dashboard"
|
||||
values={[
|
||||
{label: 'Dashboard', value: 'dashboard'},
|
||||
{label: 'JavaScript', value: 'javascript'},
|
||||
{label: 'Dart', value: 'dart'},
|
||||
]}>
|
||||
<TabItem value="dashboard">
|
||||
scrollable
|
||||
size="small"
|
||||
type="underlined"
|
||||
defaultActiveId="dashboard"
|
||||
>
|
||||
<TabPanel id="dashboard" label="Dashboard">
|
||||
|
||||
1. Go to the [Storage](https://app.supabase.com/project/_/storage/buckets) page in the Dashboard.
|
||||
2. Select the bucket you want to upload the file to.
|
||||
3. Click **Upload File**.
|
||||
4. Select the file you want to upload.
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="javascript">
|
||||
</TabPanel>
|
||||
<TabPanel id="javascript" label="JavaScript">
|
||||
|
||||
```js
|
||||
const avatarFile = event.target.files[0]
|
||||
@@ -138,8 +133,8 @@ const { data, error } = await supabase.storage
|
||||
|
||||
[Reference.](/docs/reference/javascript/storage-from-upload)
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="dart">
|
||||
</TabPanel>
|
||||
<TabPanel id="dart" label="Dart">
|
||||
|
||||
```dart
|
||||
void main() async {
|
||||
@@ -155,7 +150,9 @@ void main() async {
|
||||
}
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
[Reference.](https://pub.dev/documentation/storage_client/latest/storage_client/SupabaseStorageClient/createBucket.html)
|
||||
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
||||
### Download a file
|
||||
@@ -163,35 +160,31 @@ void main() async {
|
||||
You can download a file from the Dashboard, or within a browser using our JS libraries.
|
||||
|
||||
<Tabs
|
||||
groupId="storage-tabs"
|
||||
defaultValue="dashboard"
|
||||
values={[
|
||||
{label: 'Dashboard', value: 'dashboard'},
|
||||
{label: 'JavaScript', value: 'javascript'},
|
||||
{label: 'Dart', value: 'dart'},
|
||||
]}>
|
||||
<TabItem value="dashboard">
|
||||
scrollable
|
||||
size="small"
|
||||
type="underlined"
|
||||
defaultActiveId="dashboard"
|
||||
>
|
||||
<TabPanel id="dashboard" label="Dashboard">
|
||||
|
||||
1. Go to the [Storage](https://app.supabase.com/project/_/storage/buckets) page in the Dashboard.
|
||||
2. Select the bucket that contains the file.
|
||||
3. Select the file that you want to download.
|
||||
4. Click **Download**.
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="javascript">
|
||||
</TabPanel>
|
||||
<TabPanel id="javascript" label="JavaScript">
|
||||
|
||||
```js
|
||||
// Use the JS library to download a file.
|
||||
|
||||
const { data, error } = await supabase.storage
|
||||
.from('avatars')
|
||||
.download('public/avatar1.png')
|
||||
const { data, error } = await supabase.storage.from('avatars').download('public/avatar1.png')
|
||||
```
|
||||
|
||||
[Reference.](/docs/reference/javascript/storage-from-download)
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="dart">
|
||||
</TabPanel>
|
||||
<TabPanel id="dart" label="Dart">
|
||||
|
||||
```dart
|
||||
void main() async {
|
||||
@@ -204,7 +197,9 @@ void main() async {
|
||||
}
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
[Reference.](/docs/reference/dart/storage-from-download)
|
||||
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
||||
### Add security rules
|
||||
@@ -212,13 +207,12 @@ void main() async {
|
||||
To restrict access to your files you can use either the Dashboard or SQL.
|
||||
|
||||
<Tabs
|
||||
groupId="storage-tabs"
|
||||
defaultValue="dashboard"
|
||||
values={[
|
||||
{label: 'Dashboard', value: 'dashboard'},
|
||||
{label: 'SQL', value: 'sql'}
|
||||
]}>
|
||||
<TabItem value="dashboard">
|
||||
scrollable
|
||||
size="small"
|
||||
type="underlined"
|
||||
defaultActiveId="dashboard"
|
||||
>
|
||||
<TabPanel id="dashboard" label="Dashboard">
|
||||
|
||||
1. Go to the [Storage](https://app.supabase.com/project/_/storage/buckets) page in the Dashboard.
|
||||
2. Click **Policies** in the sidebar.
|
||||
@@ -227,8 +221,8 @@ To restrict access to your files you can use either the Dashboard or SQL.
|
||||
5. Give your policy a unique name.
|
||||
6. Write the policy using SQL.
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="sql">
|
||||
</TabPanel>
|
||||
<TabPanel id="sql" label="SQL">
|
||||
|
||||
```sql
|
||||
-- Use SQL to create a policy.
|
||||
@@ -238,7 +232,7 @@ create policy "Public Access"
|
||||
using ( bucket_id = 'public' );
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
||||
## Public and Private Buckets
|
||||
|
||||
@@ -156,4 +156,19 @@ pre[class*='language-'] {
|
||||
svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 56.25%;
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user