entjustdoit Comments - Answer Overflow

Didn’t find an older version that was compatible. Onboarding an initial cohort of users within the next few days so probably too long to wait, but knowing that it’s 14 days away will probably build a much more slimmed down video conferencing UI until then (ie just video views, and a microphone and leave call button).

16 replies

WWasp-lang

•Created by entjustdoit on 6/8/2023 in #🙋questions

react dependency

Update: had the same idea about forcing the flag globally and turns out it just didn’t work with peer deps - oh well. It’s livekit - adding video conferencing to the second app I am building. I will probably still use their api will just have to do a custom front end which is way more work than their default

16 replies

WWasp-lang

•Created by entjustdoit on 6/8/2023 in #🙋questions

react dependency

Don’t see how I could use —legacy-peer-deps since wasp handles the npm install

16 replies

WWasp-lang

•Created by entjustdoit on 1/12/2023 in #🙋questions

File Uploading

No worries!

19 replies

WWasp-lang

•Created by entjustdoit on 1/12/2023 in #🙋questions

File Uploading

We now need to create two queries for getting the upload and download signed URLs.

...
import S3 from 'aws-sdk/clients/s3.js';

const s3Client = new S3({
  apiVersion: '2006-03-01',
  accessKeyId: process.env.AWS_S3_IAM_ACCESS_KEY,
  secretAccessKey: process.env.AWS_S3_IAM_SECRET_KEY,
  region: process.env.AWS_S3_REGION,
  signatureVersion: 'v4'
})
...
export const getUploadFileSignedURL = async (args, context) => {
  ... // business logic for who can upload
  const ex = args.fileType;
  const Key = `${uuid()}.${ex}`;
  const s3Params = {
    Bucket: process.env.AWS_S3_FILES_BUCKET,
    Key,
    Expires: 30,
    ContentType: `${ex}`,
  };
  const uploadUrl = await s3Client.getSignedUrl("putObject", s3Params);
  return { uploadUrl, key: Key };
}

export const getDownloadFileSignedURL = async (args, context) => {
  ... // business logic for who can download
  const s3Params = {
    Bucket: process.env.AWS_S3_FILES_BUCKET,
    Key: args.Key,
    Expires: 30,
  };
  const downloadUrl = await s3Client.getSignedUrl("getObject", s3Params);
  return downloadUrl;
}

...
import S3 from 'aws-sdk/clients/s3.js';

const s3Client = new S3({
  apiVersion: '2006-03-01',
  accessKeyId: process.env.AWS_S3_IAM_ACCESS_KEY,
  secretAccessKey: process.env.AWS_S3_IAM_SECRET_KEY,
  region: process.env.AWS_S3_REGION,
  signatureVersion: 'v4'
})
...
export const getUploadFileSignedURL = async (args, context) => {
  ... // business logic for who can upload
  const ex = args.fileType;
  const Key = `${uuid()}.${ex}`;
  const s3Params = {
    Bucket: process.env.AWS_S3_FILES_BUCKET,
    Key,
    Expires: 30,
    ContentType: `${ex}`,
  };
  const uploadUrl = await s3Client.getSignedUrl("putObject", s3Params);
  return { uploadUrl, key: Key };
}

export const getDownloadFileSignedURL = async (args, context) => {
  ... // business logic for who can download
  const s3Params = {
    Bucket: process.env.AWS_S3_FILES_BUCKET,
    Key: args.Key,
    Expires: 30,
  };
  const downloadUrl = await s3Client.getSignedUrl("getObject", s3Params);
  return downloadUrl;
}

19 replies

WWasp-lang

•Created by entjustdoit on 1/12/2023 in #🙋questions

File Uploading

Sure! First, go to S3 and setup a bucket and IAM user, then add these entries to your .env.server file.

AWS_S3_IAM_ACCESS_KEY=
AWS_S3_IAM_SECRET_KEY=
AWS_S3_FILES_BUCKET=
AWS_S3_REGION=

AWS_S3_IAM_ACCESS_KEY=
AWS_S3_IAM_SECRET_KEY=
AWS_S3_FILES_BUCKET=
AWS_S3_REGION=

then add the aws sdk to your list of dependencies

dependencies: [
...
("aws-sdk", "^2.1294.0"),
...
]

dependencies: [
...
("aws-sdk", "^2.1294.0"),
...
]

In your front end, setup the functions for downloading and uploading files.

const handleUploadFile = async () => {
  ...
  let data = await getUploadFileSignedURL(...);
  // key is the identifier of the file in S3
  const { uploadUrl, key } = data;
  // upload the actual file using the signed URL, newFile here is the file selected in the form
  await axios.put(uploadUrl, newFile);

  // store the key as a field of a file entity for later retrieval
  ...
}

const handleUploadFile = async () => {
  ...
  let data = await getUploadFileSignedURL(...);
  // key is the identifier of the file in S3
  const { uploadUrl, key } = data;
  // upload the actual file using the signed URL, newFile here is the file selected in the form
  await axios.put(uploadUrl, newFile);

  // store the key as a field of a file entity for later retrieval
  ...
}

const handleDownloadFile = async (file) => {
  ...
  let downloadUrl = await getDownloadFileSignedURL(...);
  // ignore my ugly code below, its a workaround I had to do due to how I had setup my UI
  var link = document.createElement("a");
  link.download = file.filename;
  link.href = downloadUrl;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  ...
}

const handleDownloadFile = async (file) => {
  ...
  let downloadUrl = await getDownloadFileSignedURL(...);
  // ignore my ugly code below, its a workaround I had to do due to how I had setup my UI
  var link = document.createElement("a");
  link.download = file.filename;
  link.href = downloadUrl;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  ...
}

19 replies

WWasp-lang

•Created by entjustdoit on 1/12/2023 in #🙋questions

File Uploading

@Vinny (@Wasp) @martinsos Pre signed URLs for S3, just made everything more restricted in the permissions panel (eg source on CORS)

19 replies

WWasp-lang

•Created by entjustdoit on 1/12/2023 in #🙋questions

File Uploading

Implemented and deployed 🚀 thanks for the help! The security thing was in reference to all the tutorials I was finding and less a comment on the method itself. They kept using fully public buckets for simplifying the tutorials which is what initially turned me off the approach.

19 replies

WWasp-lang

•Created by entjustdoit on 1/12/2023 in #🙋questions

File Uploading

❤️❤️ thank you for the thorough response! Yeah uploading to S3. I initially looked into the option of using signed uploads and skipping my server altogether as mentioned, but all the tutorials I saw kept having security disclaimers which made me nervous. I primarily wanted to make sure I wasn’t missing anything, and thought since it wasn’t asked before on here would be a good thing to clarify. I’ll dig into those links in the morning, thanks again!

19 replies

Gaming

Programming