highperfocused/open-saas
1
0
Fork 0
mirror of https://github.com/wasp-lang/open-saas.git synced 2025-11-25 07:47:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

Grouped all file-upload functionality. (#170)

Browse Source 
* Grouped all file-upload functionality.

* fix
This commit is contained in:
Martin Šošić
2024-07-02 14:36:25 +02:00
committed by GitHub
parent 25ffc25a0b
commit f01d2414da
10 changed files with 115 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
opensaas-sh/blog/src/content/docs/guides/file-uploading.md
View File

@@ -119,26 +119,13 @@ With your S3 bucket set up and your AWS credentials in place, you can now start
To begin customizing file uploads, is important to know where everything lives in your app. Here's a quick overview:
- `main.wasp`:
- The `File entity` can be found here. Here you can modify the fields to suit your needs:
```c
entity File {=psl
id String @id @default(uuid())
name String
type String
key String
uploadUrl String
user User @relation(fields: [userId], references: [id])
userId Int
createdAt DateTime @default(now())
psl=}
```
- `src/server/actions.ts`:
- The `File entity` can be found here. Here you can modify the fields to suit your needs.
- `src/file-upload/FileUploadPage.tsx`:
- The `FileUploadPage` component is where the file upload form lives. It also allows you to download the file from S3 by calling the `getDownloadFileSignedURL` based on that files `key` in the app DB.
- `src/file-upload/operations.ts`:
- The `createFile` action lives here and calls the `getUploadFileSignedURLFromS3` within it using your AWS credentials before passing it to the client. This function stores the files in the S3 bucket within folders named after the user's ID, so that each user's files are stored separately.
- `src/server/queries.ts`:
- The `getAllFilesByUser` fetches all File information uploaded by the user. Note that the files do not exist in the app database, but rather the file data, name its `key`, which is used to fetch the file from S3
- The `getDownloadFileSignedURL` query fetches the presigned URL for a file to be downloaded from S3 using the file's `key` stored in the app's database
- `src/client/app/FileUploadPage.tsx`:
- The `FileUploadPage` component is where the file upload form lives. It also allows you to download the file from S3 by calling the `getDownloadFileSignedURL` based on that files `key` in the app DB.
- The `getAllFilesByUser` fetches all File information uploaded by the user. Note that the files do not exist in the app database, but rather the file data, its name and its `key`, which is used to fetch the file from S3.
- The `getDownloadFileSignedURL` query fetches the presigned URL for a file to be downloaded from S3 using the file's `key` stored in the app's database.
## Using Multer to upload files to your server

6
opensaas-sh/blog/src/content/docs/start/guided-tour.md
View File

@@ -62,6 +62,7 @@ If you are using a version of the OpenSaaS template with Wasp `v0.11.x` or below
│   ├── client/ # Your client code (React) goes here.
│   ├── server/ # Your server code (NodeJS) goes here.
│   ├── shared/ # Your shared (runtime independent) code goes here.
│   ├── file-upload/ # Logic for uploading files to S3.
│   └── .waspignore
├── .env.server # Dev environment variables for your server code.
├── .env.client # Dev environment variables for your client code.
@@ -101,7 +102,7 @@ It's possible to learn Wasp's feature set simply through using this template, bu
### Client
The `src/client` folder contains all the code that runs in the browser. It's a standard React app, with a few Wasp-specific things sprinkled in.
The `src/client` folder contains the code that runs in the browser. It's a standard React app, with a few Wasp-specific things sprinkled in.
```sh
.
@@ -120,14 +121,13 @@ The `src/client` folder contains all the code that runs in the browser. It's a s
### Server
The `src/server` folder contains all the code that runs on the server. Wasp compiles everything into a NodeJS server for you.
The `src/server` folder contains the code that runs on the server. Wasp compiles everything into a NodeJS server for you.
All you have to do is define your server-side functions in the `main.wasp` file, write the logic in a function within `src/server` and Wasp will generate the boilerplate code for you.
```sh
└── server
   ├── auth # Some small auth-related functions to customize the auth flow.
  ├── file-upload # File upload utility functions.
  ├── payments # Payments utility functions.
  ├── scripts # Scripts to run via Wasp, e.g. database seeding.
  ├── webhooks # The webhook handler for Stripe.