New Storage docs #902

nezaj · 2025-02-19T03:05:11Z

What it says on the tin!

github-actions · 2025-02-19T03:07:10Z

View Vercel preview at instant-www-js-storage-docs-jsv.vercel.app.

stopachka · 2025-02-19T18:48:26Z

client/www/pages/docs/storage.md


-Storage is still in **beta**, but you can request access [here](https://docs.google.com/forms/d/e/1FAIpQLSdzInffrNrsYaamtH_BUe917EOpcOq2k8RWcGM19XepJR6ivQ/viewform?usp=sf_link)!
+Here's a full example of how to upload and display a grid of images


Nit: perhaps we add an intro sentence:

"Let's start with a fresh NextJS app:" or something like this?

stopachka · 2025-02-19T18:50:11Z

client/www/pages/docs/storage.md

+
+// Types
+// ----------
+export type Image = {


nit: if we are using schema, i.m.o we can just extract the type from it.

For example:

type InstantFile = InstaQLEntity<AppSchema, '$files'>

client/www/pages/docs/storage.md

stopachka · 2025-02-19T18:52:00Z

client/www/pages/docs/storage.md

+  });
+
+  if (isLoading) {
+    return <div>Fetching data...</div>;


nit: I would return null for isLoading.

Reasoning: Otherwise this will have a bit of a jarring flash when you first load the page

stopachka · 2025-02-19T18:52:27Z

client/www/pages/docs/storage.md

+
+  // The result of a $files query will contain objects with
+  // metadata and a download URL you can use for serving files!
+  const { $files: images } = data as { $files: Image[] };


You shouldn't need to write this if you use schema.

stopachka · 2025-02-19T18:56:08Z

client/www/pages/docs/storage.md

+  );
+  const [isUploading, setIsUploading] = useState(false);
+
+  if (isLoadingAvatar) return <div>Loading...</div>;


nit: would return null

stopachka · 2025-02-19T18:57:00Z

client/www/pages/docs/storage.md


-  return <img src={imageUrl} />;
+function Wrapper() {


nit: would call this App or something

client/www/pages/docs/storage.md

stopachka

Some minor comments, but LGTM! Love the detail

stopachka · 2025-02-20T00:55:11Z

client/sandbox/react-nextjs/pages/play/avatar.tsx

+  );
+}
+
+function Wrapper() {


nit: would write this as export default function Page or something

stopachka

Great work!

stopachka · 2025-02-20T00:56:09Z

client/www/pages/docs/storage.md


-{% callout type="warning" %}
+Now open `instant.perms.ts` and add the following permissions


nit: you mean instant.schema.ts?

stopachka · 2025-02-20T00:56:21Z

client/www/pages/docs/storage.md

+    $files: i.entity({
+      "content-disposition": i.string().indexed(),
+      "content-type": i.string().indexed(),
+      "key-version": i.number(),


Are these needed?

Nope! Will remove!

stopachka · 2025-02-20T00:56:34Z

client/www/pages/docs/storage.md

+Now open `instant.perms.ts` and add the following permissions
+
+```javascript {% showCopy=true %}
+import type { InstantRules } from "@instantdb/react";


InstantRules are not needed here

stopachka · 2025-02-20T00:59:55Z

client/www/pages/docs/storage.md

@@ -5,287 +5,743 @@ title: Storage
 Instant Storage makes it simple to upload and serve files for your app.
 You can use Storage to store images, videos, documents, and any other file type.


Suggested change

You can use Storage to store images, videos, documents, and any other file type.

You can store images, videos, documents, and any other file type.

stopachka · 2025-02-20T01:02:07Z

client/www/pages/docs/storage.md


-Storage is still in **beta**, but you can request access [here](https://docs.google.com/forms/d/e/1FAIpQLSdzInffrNrsYaamtH_BUe917EOpcOq2k8RWcGM19XepJR6ivQ/viewform?usp=sf_link)!
+Let's use a fresh Next JS app to build a full example of how to upload and


Suggested change

Let's use a fresh Next JS app to build a full example of how to upload and

Let's build a full example of how to upload and

stopachka · 2025-02-20T01:04:09Z

client/www/pages/docs/storage.md

+      contentType: file.type,
+      // See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition
+      // Default: 'inline'
+      contentDisposition: 'attachment; filename="moop.jpg"',


nit: did we mean the filename to be moop.jpg?

I did want to show an example of setting a custom filename but perhaps we should be more descriptive!

stopachka · 2025-02-20T01:05:45Z

client/www/pages/docs/storage.md

 ```

-Then, in your `ImageViewer` component, you can use the `cachedUrl` by default, and handle the expiration when necessary:
+Make sure to update this line with the app id in your `.env` file.


If they have a .env file, perhaps it makes sense to simply use process.env.NEXT_PUBLIC_INSTANT_APP_ID in the example?

stopachka · 2025-02-20T01:06:30Z

client/www/pages/docs/storage.md

+const path = `${user.id}/orders/${orderId}.pdf`;
+await db.storage.uploadFile(path, file, {
+  contentType: 'application/pdf',
+  contentDisposition: 'attachment; filename="confirmation.pdf"',


nit: the filename should be dynamic no?

I was actually intending not but we could do that!

stopachka · 2025-02-20T01:07:23Z

client/www/pages/docs/storage.md

+  },
+});
+
+


nit: perhaps these should be two separate code blocks?

stopachka · 2025-02-20T01:10:55Z

client/www/pages/docs/storage.md


-The Admin SDK offers the same API for managing storage on the server, plus a few extra convenience methods for scripting.
+Here's a more detailed example showing how you may implement an avatar upload feature:


This feels a bit jarring -- it's a pretty big example, but feels like it's said nonchalantly. Perhaps we can give this a full subheader? We can show the example, and link out to the full repo? I am not sure but just felt a bit off scrolling here. At the least it's weird that with such a large codeblock there is no copy button

nezaj added 5 commits February 19, 2025 10:21

Update sandbox styles

d61ccde

Update storage docs

d02d912

Add avatars example

adba8f4

Add new storage docs

027209f

Typos/grammar

561b4db

stopachka reviewed Feb 19, 2025

View reviewed changes

client/www/pages/docs/storage.md Show resolved Hide resolved

stopachka reviewed Feb 19, 2025

View reviewed changes

client/www/pages/docs/storage.md Outdated Show resolved Hide resolved

stopachka approved these changes Feb 19, 2025

View reviewed changes

nezaj added 2 commits February 19, 2025 16:44

Use correct next path

31d9d85

More docs

10d3326

nezaj force-pushed the storage-docs branch from 40b857e to 10d3326 Compare February 20, 2025 00:46

nezaj changed the title ~~[WIP] New Storage docs~~ New Storage docs Feb 20, 2025

stopachka reviewed Feb 20, 2025

View reviewed changes

cr

b85fef4

nezaj merged commit 82ecacc into main Feb 20, 2025
28 checks passed

nezaj deleted the storage-docs branch February 20, 2025 21:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Storage docs #902

New Storage docs #902

nezaj commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025

stopachka Feb 19, 2025

stopachka Feb 19, 2025 •

edited

Loading

stopachka Feb 19, 2025

stopachka Feb 19, 2025

stopachka Feb 19, 2025

stopachka Feb 19, 2025

stopachka left a comment

stopachka Feb 20, 2025

stopachka left a comment

stopachka Feb 20, 2025

stopachka Feb 20, 2025

nezaj Feb 20, 2025

stopachka Feb 20, 2025

stopachka Feb 20, 2025

stopachka Feb 20, 2025

stopachka Feb 20, 2025

nezaj Feb 20, 2025

stopachka Feb 20, 2025

stopachka Feb 20, 2025

nezaj Feb 20, 2025

stopachka Feb 20, 2025

stopachka Feb 20, 2025

nezaj Feb 20, 2025


		Storage is still in beta, but you can request access [here](https://docs.google.com/forms/d/e/1FAIpQLSdzInffrNrsYaamtH_BUe917EOpcOq2k8RWcGM19XepJR6ivQ/viewform?usp=sf_link)!
		Here's a full example of how to upload and display a grid of images


		{% callout type="warning" %}
		Now open `instant.perms.ts` and add the following permissions

		@@ -5,287 +5,743 @@ title: Storage
		Instant Storage makes it simple to upload and serve files for your app.
		You can use Storage to store images, videos, documents, and any other file type.

	You can use Storage to store images, videos, documents, and any other file type.
	You can store images, videos, documents, and any other file type.


		Storage is still in beta, but you can request access [here](https://docs.google.com/forms/d/e/1FAIpQLSdzInffrNrsYaamtH_BUe917EOpcOq2k8RWcGM19XepJR6ivQ/viewform?usp=sf_link)!
		Let's use a fresh Next JS app to build a full example of how to upload and

	Let's use a fresh Next JS app to build a full example of how to upload and
	Let's build a full example of how to upload and


		The Admin SDK offers the same API for managing storage on the server, plus a few extra convenience methods for scripting.
		Here's a more detailed example showing how you may implement an avatar upload feature:

New Storage docs #902

New Storage docs #902

Conversation

nezaj commented Feb 19, 2025 • edited Loading

github-actions bot commented Feb 19, 2025

Choose a reason for hiding this comment

stopachka Feb 19, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stopachka left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stopachka left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nezaj commented Feb 19, 2025 •

edited

Loading

stopachka Feb 19, 2025 •

edited

Loading