Uploading a File to the Server and then to a Database without using API Routes
Answered
Eulophid wasp posted this in #help-forum
Eulophid waspOP
So i'm currently trying to take a file from an
input component and then send it to the server to be uploaded into a database, however im trying not to use API routes as to prevent it being publicly accessible. My main issue right now though is that I cant just send Files to the server, so how should I go about getting files to the server in this manner.Answered by B33fb0n3
Yes, use a post upload url.
1. generate this url
2. add a policy for it (to limit the uploads)
3. send the file to the url in the body with the policy params.
Finish 🙂
you can read the exact process here: https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html
1. generate this url
2. add a policy for it (to limit the uploads)
3. send the file to the url in the body with the policy params.
Finish 🙂
you can read the exact process here: https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html
26 Replies
@Eulophid wasp So i'm currently trying to take a file from an `input` component and then send it to the server to be uploaded into a database, however im trying not to use API routes as to prevent it being publicly accessible. My main issue right now though is that I cant just send Files to the server, so how should I go about getting files to the server in this manner.
well... the files need to be send somewhere. And when you don't want to create an api route, the client would need to make the database calls. That means, that each client has access to your database. You dont want this.
Create an api route for both (file & database entry) to prevent database access by the client
OR
upload the file from the client to your file storage server and create the entry in your database after the file was uploaded. Like that you wont hit any limits.
I can help you more if you give us more details about your situation. Why don't you want to create a route? What kind of storage server do you use? ...
Create an api route for both (file & database entry) to prevent database access by the client
OR
upload the file from the client to your file storage server and create the entry in your database after the file was uploaded. Like that you wont hit any limits.
I can help you more if you give us more details about your situation. Why don't you want to create a route? What kind of storage server do you use? ...
@B33fb0n3 well... the files need to be send somewhere. And when you don't want to create an api route, the client would need to make the database calls. That means, that each client has access to your database. You **dont** want this.
Create an api route for both (file & database entry) to prevent database access by the client
OR
upload the file from the client to your file storage server and create the entry in your database after the file was uploaded. Like that you wont hit any limits.
I can help you more if you give us more details about your situation. Why don't you want to create a route? What kind of storage server do you use? ...
Eulophid waspOP
I basically wanna do the latter, im trying to effectively remake google drive but instead of having individual accounts, its almost like kahoot where its session based
im trying to use mongo to store the files
im trying to get it to the server so that i cant interact with mongos api but I cant seem to get the file to server, and im trying to avoid API routes as to prevent anyone outside of the app trying to access it with API calls
@Eulophid wasp im trying to use mongo to store the files
Iirc your database can’t store any files. They can only store a path or storage key or any similar inside your database . The file storage server is a separate server just for files. I like to use „s3“
@B33fb0n3 Iirc your database can’t store any files. They can only store a path or storage key or any similar inside your database . The file storage server is a separate server just for files. I like to use „s3“
Eulophid waspOP
could u link it, im still very unfamiliar with this side of backend
oh nvm amazon s3
S3 and presigned URLs
Google those words. You’ll find solutions.
Also a db can store files (just a bunch of bytes representing the file), but 99 out 100 times it’s not ideal.
@B33fb0n3 Yes 🙂
Eulophid waspOP
could u run me thru like a quick summary of how to use this cuz my brain is so fried from youtube and stack overflow has bleached my eyes
@Eulophid wasp could u run me thru like a quick summary of how to use this cuz my brain is so fried from youtube and stack overflow has bleached my eyes
Yes, use a post upload url.
1. generate this url
2. add a policy for it (to limit the uploads)
3. send the file to the url in the body with the policy params.
Finish 🙂
you can read the exact process here: https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html
1. generate this url
2. add a policy for it (to limit the uploads)
3. send the file to the url in the body with the policy params.
Finish 🙂
you can read the exact process here: https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html
Answer
@B33fb0n3 Yes, use a post upload url.
1. generate this url
2. add a policy for it (to limit the uploads)
3. send the file to the url in the body with the policy params.
Finish 🙂
you can read the exact process here: https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html
Eulophid waspOP
fanks, ill check it out
@Eulophid wasp solved?
@B33fb0n3 <@781053954346975253> solved?
Eulophid waspOP
Haven’t had time to check it out yet, was traveling
@Eulophid wasp Haven’t had time to check it out yet, was traveling
when will you test it?
@B33fb0n3 when will you test it?
Eulophid waspOP
in the morning
@Eulophid wasp tested?
@B33fb0n3 <@781053954346975253> tested?
Eulophid waspOP
Almost done getting a basic framework down, I got stuck doing a refactor on something’s because it was getting cluttered and made setting this up a pain
@Eulophid wasp Almost done getting a basic framework down, I got stuck doing a refactor on something’s because it was getting cluttered and made setting this up a pain
I thought the guide that I linked is pretty straight forward 🤔
@Eulophid wasp Almost done getting a basic framework down, I got stuck doing a refactor on something’s because it was getting cluttered and made setting this up a pain
Eulophid waspOP
It is, my code was ass tho
@Eulophid wasp It is, my code was ass tho
oh ok, can I mark this message as solved? https://nextjs-forum.com/post/1287016332478644225#message-1287052834629615636
@B33fb0n3 oh ok, can I mark this message as solved? https://discord.com/channels/752553802359505017/1287016332478644225/1287052834629615636
Eulophid waspOP
can i dm u if i have any issues or questions?
@Eulophid wasp can i dm u if i have any issues or questions?
if you experience any issues feel free to create a thread with the specific issue you experiencing
Eulophid waspOP
ok