Add File Upload to Your React App with Amplify - full tutorial

[@oscargm1979]

Thank you so much.This is a really good playlist for anyone like me that want to start in AWS. Edit: BTW,bro if you want to avoid that warning about React advising you that you must choose between using 'controled components or uncontroled components' it is because you are dealing with an object and he cannot find song.title | song.owner,etc.Just initalize it: const [songData, setSongData] = useState({ title: '', owner: '', description: '', }); Now when you do this he know where to look and is not anymore an uncontroled component:

[@CompleteCoding]

Thanks for the tip. I'm definitely not a FE Dev any more so I don't keep as up to date with it.

[@joshuaunderwood1873]

Haven't seen an upload in awhile, don't give up Sam.

[@CompleteCoding]

I've been on holiday for 2 weeks and the internet was too poor to upload anything. I've literally got a video uploading now :) Thanks again for the support Joshua

[@farhanfarooq]

Just started learning aws and watched this entire series in one go. Good content thank you. Let me scroll through other playlists in your channel :D

[@CompleteCoding]

Glad it was helpful!

[@khandoor7228]

Hey Sam, I was really looking forward this and i was not disappointed! Thanks Sam!!

[@CompleteCoding]

I'm really glad that it lived up to your expectations. Have you got any plans for something to build with what you've learnt?

[@khandoor7228]

@@CompleteCoding Hey Sam, Yeah I have some ideas for projects but right now I am trying to knock out some AWS certs. I really love developing in React so I am trying to keep those skills current / integrated with AWS and your channel really helps me a lot with doing that. Working on the job, working on Certs, keeping up on other dev skills and keeping up with the family is a lot right now, not enough hours in the day but I'm thankful for all of it!!!!! Any chance you can add an image to the song record? I saw your tutorial on adding images to an S3 bucket and it would just be combining the technique you showed in this video and that one but I think it would be great to see it done. There is usually a lot that goes into adding images, size limits, number of images ... etc. Generally it would be great to keep adding new features to this project. That would be awesome for me. Thanks for everything you do though, you are helping me a lot personally!!!

[@CompleteCoding]

@@khandoor7228 Good effort keeping all that up. Yes you could. It would be an almost identical process to the one in this video but with an image instead of an mp3. You could then do processing on it afterwards like you mentioned. In terms of limiting what the user uploads as an image, it is often better to do that on the front end. You want to allow the user to decide how they want their image cropped. Scaling and compressing you could do on the front or back end.

[@ShyamnaikGuguloth]

Awesome video. Loved the way you explain things.

[@CompleteCoding]

Thanks

[@aditmodi]

great video sam. I want to implement a file storage application using aws s3. any guides/ materials on how I could do it???

[@CompleteCoding]

You could do something very similar to what we've done in this video. If you want to show them all the files they have you can list them. docs.amplify.aws/lib/storage/list/q/platform/js

[@lostmonster1097]

Thank you so much. this video is usefull, can I ask a question? If I want to delete how can I do that? thanks a lot

[@CompleteCoding]

If you look in the Amplify docs there should be a storage.delete method

[@programmusicuk]

LOVE IT! Works really well, very enjoyable tutorial. Putting another request in for transactional-based tutorials please Sam - googlePay /Stripe etc :)

[@CompleteCoding]

Noted!

[@saeidpm]

Thanks Sam, You are awesome By the way i have a suggestion for the alignment of the items inside the Paper component. You only need to apply a css class to all the div inside it as follows: .flexItem { flex: 25%; }

[@CompleteCoding]

Thanks! I don't spend as much time on front end development any more so miss out on the newer CSS tricks.

[@minyang3988]

Great video! I am just wondering how to sign in with facebook?

[@CompleteCoding]

I'm looking at making a video covering that soon

[@khandoor7228]

Hey Sam, when creating an Amplify project is there any way to create it in a separate environment, either separate VPC or Organization or something? Im just thinking if I were to make several projects I would want to have some logical separation, especially for running metrics, alarms, costs all that sort of thing. I dont see that in any of the configuration steps. I guess i could add tags to the various components. I looked it up in the Amplify docs and didnt see anything.

[@CompleteCoding]

Each lambda that you deploy has it's own set of metrics in AWS CloudWatch. You can configure alarms for individual lambdas or groups of them. For different environments, when you first set up Amplify you created it with a 'dev' environment. If you go into 'local-env-info.json' you can see the environment. If you create a dev, uat and prod branch you can have each of them deploy to a separate environment, creating new lambdas and database tables

[@khandoor7228]

@@CompleteCoding thanks very much Sam

[@tylermorales9043]

💡 Quick Tip: Instead of implementing a conditional operator to render if a component exists, I've instead used the short-circuit (AND) operator to accomplish the same task: `{JS expression && `

[@CompleteCoding]

Very nice. I don't do much front end dev any more so tips like that are great

[@muhammadahsan3929]

i have on question you created a storage and on uploading song you are not specifying storage (bucket) name. (if we have multiple). then how it came to know that you are uploading to that storage or bucket?

[@Saptisunil]

Heyy ! In the amplify storage i am storing the json files. So how can i display the contents in the json file using the fileAccessURL ? Can you help me with that ?

[@CompleteCoding]

You can do a GET request with Axios to the URL and get the json as a response.

[@case_tips]

Hello, where does onUpload event come from? I couldn't find such event type in react.

[@CompleteCoding]

on SongList line 110, I am passing the variable of "onUpload" into the AddSong component. I am passing in this function. () => { setShowAddNewSong(false); fetchSongs(); } I could have defined it as a named function "const upload = () => ..." an then passed that into the AddSong component

[@case_tips]

@@CompleteCoding Got it. Thank you so much

[@dw2232]

Is there a link for the source code to download? Thanks.

[@CompleteCoding]

Here you go github.com/SamWSoftware/amplify-react-tutorial-project/tree/amplify-upload

[@saipavandhulipudi2352]

when I try to upload the song I got the this error App.jsx:143 Uncaught (in promise) {data: null, errors: Array(1)}....pls help me anyone

[@CompleteCoding]

try wrapping App.jsx:143 in a try/catch and then console.log the error. That should help you figure out the issue. Probably permissions or missing resources

[@tylermorales9043]

I think you have to include all the data points (ex/ description, title, artist)

[@ziranshuzhang6831]

Amplify offers almost no flexibility, and the document is never stuck to the point, tedious and buggy, like every other AWS service. I would directly use AWS services if I have to stick with AWS, and if I can, I will just stay away from AWS.

[@CompleteCoding]

I agree that Amplify is pretty limited. I'm surprised that you would want to avoid AWS completely though. What have you used that is buggy?

[@ziranshuzhang6831]

@@CompleteCoding That's not what I mean. Amplify is buggy and below standard. Other AWS services are normally great in functionality and pricing. But their document is constantly bad. All of them. I always end up spending more than twice of the time to achieve the same thing in AWS than GCP, and that's normally very unpleasant time, it normally involves going through 100 documents and links they have to finally get to what you want. And normally done with some help on Stackoverflow, instead of official document.

[@CompleteCoding]

@@ziranshuzhang6831 Yeh, the AWS docs are pretty awful

[@ShyamnaikGuguloth]

Have few quiries, can you share your email id or social media links to contact... thanks

[@CompleteCoding]

My email is in the about section of the channel