React File Upload Tutorial with Drag-n-Drop and ProgressBar

[@lazee_farm]

I can't believe I found someone who not only uses the same front end stack I do, but uploads super useful videos and explains them with so much clarity. This channel is a gem. Thanks so much

[@BrunoAntunesPT]

WOW, I feel wonderful after reading your comment 😍😍 thank you soo much Zeeshan, I am very grateful for your words ❤️❤️ thank you, thank you!!!

[@cagrakar792]

You touch the crucial parts of daily works of me as a front-end developer, in your every single videos. I'm learning so much from you Bruno, thank you.

[@BrunoAntunesPT]

WOOOW, thank you!! I'm very happy that I create content that helps you my friend 😍😍

[@khizarhayat979]

I love the way you explain everything. we want more tutorials and project series. you are the best.

[@BrunoAntunesPT]

Thank you my friend 😍😍

[@BrunoAntunesPT]

What specific videos would you like to see? 😉😉

[@khizarhayat979]

@@BrunoAntunesPT React Query

[@BrunoAntunesPT]

I'm currently using swr but react query is also very very interesting 😊

[@khizarhayat979]

@@BrunoAntunesPT sounds interesting,

[@pcintra1]

Bruno, your explanation was fantastic, very comprehensive and complete! Thank you for sharing!

[@BrunoAntunesPT]

Thank you very much Paulo ❤️ muito muito obrigado 😍

[@saisagarsharma]

Came here to like the video. will use the knowledge some other time when needed. ;)

[@BrunoAntunesPT]

Thank you my friend 😀 hopefully one day it will be helpful 😊😊

[@mhonjesterjohncalingo8799]

Your explanation is so easy to understand. I'm so glad that I watched this video, I learned a lot from it. Thank you so much.

[@BrunoAntunesPT]

Thank you for your words Mhon 😃😀 I'm very happy the video was helpful to you 😍

[@granporculio]

Omg Bruno, this video is gold. In this hour of video every little part of it is priceless. I have to implement something similar so many many thanks for having uploaded this tutorial. I'm sure it will take me several days to implement what you have done in only 1 hour. But it will be worthy. You're the best teacher ever.

[@granporculio]

I'd like to ask you only one thing. After having successfully uploaded any of those files to the cloud storage service, but just before submitting the form, image that the form is cancelled, the user close the window or whatever, how do you manage the file that is now "orphan" in the cloud? Maybe keep a log of those files in the database and delete them with a recurring task or something?

[@BrunoAntunesPT]

Thank you very very much 😊 Regarding your question, it depends on what you are using and how your application is working. If you keep in your database a reference to all the uploaded photos, then it's an easy task to clean the orphan ones, doing a few selects and doing the request to delete in your image provider. If not, you'll basically have to do something, which depending on the size and price of your image could provider can become expensive, getting all the photos metadata and then verify if you have references in your database for them, if not, delete

[@BrunoAntunesPT]

*image cloud provider, not image could provider, sorry 😅

[@granporculio]

Thank you for your answer Bruno. I'm actually using Firebase Storage and uploading mp3s so it can get pricey indeed if the precautions are not properly managed. I was thinking about doing the upload of the file at the time as the form is submitted for this reason, but the fact that the file can be uploaded while the user is filling up the rest of the form is a very practical feature. I've just finished testing the upload and it was super easy and it seemed magic thanks to your help. Now I will have to deal with this. Firstly I will code manually the deletion of the file in the onDelete event of the file and in the cleanup of the form when it closes and if it hasn't been submitted. We'll see how do I do the second part. Not sure how and when to program the automated deletions of the orphan files.

[@usmanmughal5916]

Man U deserve million subscribers right now.

[@BrunoAntunesPT]

Ahah thank you 😅 looks like I need to work more to reach those numbers 😀

[@wisie5233]

High quality video. Thank you, king

[@ayyoubkasmi3871]

Amazing video! This was indeed really helpful. Appreciate it! PS: I really laughed at those special 17 seconds where the computer froze XD, used to happen to me sometimes when sharing my screen in an online meeting haha

[@MrXperx]

I have found your tutorials very helpful. Thank you.

[@BrunoAntunesPT]

Thank you 😀

[@shrkawy]

thank you, man! I spent hours and hours trying to do this before I watch you

[@BrunoAntunesPT]

I'm soo happy reading that 😍 thank you my friend 😍😍

[@rococococoa]

Nice examples. I would have loved to have seen a polished final result example.

[@BrunoAntunesPT]

I'm curious. What else would you want to see? 😅

[@hyeongwoojeon3514]

wow thankyou a lot. I can feel your kindness in this video.

[@ytbcmt4686]

Respect from India!

[@BrunoAntunesPT]

Thank you 😀 love to India ❤️❤️

[@saifahmad5777]

Thank you Bruno for the great video. Finally I have created what I wanted for so long. All credit goes to you. It took one and half days for me to complete your tutorial, and it was also quite a bit challenging for me because I have no idea how to work with TypeScript. But finally I have done it without TypeScript, and it is working like yours. Thank you very much and keep uploading videos like this.

[@BrunoAntunesPT]

I'm soo happy to read your comment 😍😍😍 Thank you very much Saif 😍 if you ever have doubts on how to convert some code from typescript to javascript you can use the typescript playground to convert into javascript 😊 I'll paste an example in the next comment 😀

[@BrunoAntunesPT]

This is an example from my Multi-step Form Tutorial: tsplay.dev/oN5A9N When you open that page, on the left side you have the TypeScript code. After about 5 seconds (more or less), on the right side will appear the JavaScript code :) You can put any TypeScript code on the left, and the TypeScript playground will show on the right the resulting JavaScript code 😀

[@saifahmad5777]

@@BrunoAntunesPT Thank you once again bruno for the solution, can you tell me something about deleting files from cloudinary. Because I want to create a file CRUD application, and cant find any solution regarding this.

[@BrunoAntunesPT]

In this video we used the post method to create them. To delete them we need to use the delete method: cloudinary.com/documentation/admin_api#resources

[@saifahmad5777]

@@BrunoAntunesPT Hi Bruno yes, I have visited the API documentations before, and also some other sites like github and stackoverflow. But very sadly to say I havn't found any effective solutions for react. Some people are saying that, Accessing Cloudinary Admin panel is not possible from client site like react, because of security issues. Cloudinary also has solutions but just for node and other backend platforms. cloudinary.com/documentation/admin_api There is no clear expiations for react or any other client site platform. Though it has some documentation for react, but it is just for image and video transformation. I dont know what to do. 😭😭😭

[@hasst9261]

Thank you, Bruno. Nice video 😊

[@BrunoAntunesPT]

Thank you 😍

[@juanguirao]

Hi Bruno! I love your teaching style and your coding style. I am adopting you as my role model for coding!

[@genie52]

"I will zoom this for you.." - Thank you Bruno! :)

[@BrunoAntunesPT]

😍😍 I always try to zoom stuff. I'm really happy you noticed that 😍😍 I'm probably a weirdo here, but I watch a lot of coding content on my mobile phone. When people don't use proper font-sizes/zoom, it becomes very very hard to follow 🤐 That's the main reason I try to use font-sizes and enough zoom to be "watchable" on mobile phones. That way, people like me can watch code on their mobile phones 😀😀

[@borishelvas5547]

Great job Bruno ! I really love your vidéo ❤️

[@pcintra1]

Bruno, I would love if you could make a video about productivity with vscode, indicating the good extensions and operations (for instance, I don't know how you do auto-imports so practically). As this video will soon be out of date, according to the speed that new extensions come in, in the text part you could simply complement it with the news after the release of the video. I see that you are extremely careful and kind to your followers and I think this initiative will be so appreciated by your followers. Even if you don't do that I thank you for analyzing.

[@BrunoAntunesPT]

That is something i can create as a blog post because it's easier to keep up to date than a video. Uhmmm i need to think about it 😅

[@BrunoAntunesPT]

Thank you for the suggestion Paulo 😊

[@md.fazlulkarim8847]

Splendid as usual

[@BrunoAntunesPT]

Thank you very much my friend ❤️❤️

[@MrBloodySpirit]

Great tutorial! Thank you.

[@BrunoAntunesPT]

Thank you 😍

[@miltonr87]

Salvou minha vida! Brigadão cara!

[@BrunoAntunesPT]

Obrigado eu Milton =)

[@blyatMail]

sorry bruno.. i wanna ask.. can you explain part of 34:54 why the promise need to declare as string? I'm new typescript and react..

[@donn350]

Your videos are awesome

[@BrunoAntunesPT]

Thank you Luiz 😍😍

[@aigars2225]

Great video, thanks!

[@sanmeetsingh4]

Awesome ! it really helped me a lot

[@BrunoAntunesPT]

Awesome 😍😍

[@Programandoenc]

Hi Bruno! Thank you for this! When deleting an uploaded file, dont you need to also delete the file from the cloudinary cloud ?

[@BrunoAntunesPT]

Yes and no 😅 Now a bit more serious: yes! But if you delete on the front end only, then what will happen when your users leave the page? Or their computer crashed after upload? Or they lose connection? Your they get bothered and leave? You'll end up with tons of files in cloudinary. And believe me, that happens a lot in production apps 😅 Short answer: I have batches doing cleanup in the backend so I don't need to worry on the front end 🙂

[@cleo0318]

Hey Bruno! Great video! You should make a video some day on testing with jest and react testing library with Next/Material UI :)

[@BrunoAntunesPT]

Thank you very much Karen 😀😀 It'll come sooner or later something regarding testing 😀😀😀

[@AleWarlll]

Thanks bro, it helped a lot! You're very didatic too!

[@rangabharath4253]

Awesome 👍

[@BrunoAntunesPT]

Thank you Ranga 😀 I'm glad you enjoyed the video 😀😀

[@mariokaram8599]

thank you Brunoo

[@BrunoAntunesPT]

Thank you Mario 😀

[@greentiger6888]

@Bruno Antunes could you please tell how you are getting the auto import drop-downs in VS code at 8:56 and 5:56? Is this some VS Code extension? Please help me in enabling this.

[@BrunoAntunesPT]

The only extension I use on vscode for the videos is Prettier. Other than that I don't use any other extension in my videos to avoid confusion 😅😊 The way you can import is by having your cursor positioned on the "error". After your cursor is positioned correctly, press and holding "control" key, then press the "." key - while still pressing the "control" key 😊 Doing that it will open what you saw 😊

[@BrunoAntunesPT]

If you are learning vscode, this is very very very useful. I still have this printed on my desk 😅😅 code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

[@greentiger6888]

​@@BrunoAntunesPT Thanks so much :)

[@caradebreno]

Great video, saved me. One question, where are you from?

[@BrunoAntunesPT]

Thank you David, I'm happy it helped you 😍 I'm Portuguese - Lisbon, but I'm living in London - England 😅😅 Looking at your name I guess you are Portuguese or from a Portuguese speaking country, am I right? 😍😍

[@BrunoAntunesPT]

Eu consigo ver que fizeste um comentário mas não consigo ler, o KZbin apagou 😔 Isso normalmente acontece quando tem um URL para algum site, foi esse o caso?? 😅😅😅

[@caradebreno]

@@BrunoAntunesPT Não, no comentário eu apenas disse que sou do Brasil e que imaginei que você também falasse português, por conta do seu nome, que é parecido com meu nome do meio. Muito estranho o KZbin ter removido esse comentário hahaha

[@BrunoAntunesPT]

Ah Brasil 😍😍😍 fico muito feliz por saber que eh um irmão 😍😍 Muitas das vezes não percebo pq o KZbin apaga o comentário, mas apaga cerca de 2 ou 3 comentários por semana 😔😔

[@HolmesPatrick]

Great video - you are a good teacher , you may consider putting a preview of the image , and delete deletes the preview before upload - and also a feature to delete the picture in cloudinary - that would be good - how to put picture in separate folder in cloudinary it is going to root top level?

[@BrunoAntunesPT]

I actually thought about recording those things as part of this video, but it was already close to 1 hour, so I ended up removing it from the video =D It's something that I can record again in the future and release if you find interesting :)

[@alexgaetanopadula4057]

Hands on!!!! WOO

[@BrunoAntunesPT]

Thank you =D

[@alexgaetanopadula4057]

@@BrunoAntunesPT Thank you brother!

[@alexgaetanopadula4057]

Do you have any idea for a source of types of cloudinary?

[@BrunoAntunesPT]

@@alexgaetanopadula4057 what do you mean by source of types?

[@BrunoAntunesPT]

Is this what you were looking for?? cloudinary.com/documentation/image_transformations#image_format_support

[@hanle2985]

Thank you. You help me alot :D

[@manfredtkavetu4477]

Thanks Bruno for your lovely videos, you are the best my dear brother. I dropped 5 files, the progress bar is showing progress for all the 5 files simultaneously. Should progress bar not activate synchronously showing progression of each file to 100% completion then showing progression for the next file to 100% completion, and so forth?

[@BrunoAntunesPT]

Thank you very much 😀😀 We are uploading the files in parallel. If you drop 5 files (for example) we try to upload the 5 of them in parallel to be much much faster 😊 if one of your files is much bigger than the others you'll see the bars are independent of each other, and the bigger file will complete after the others 😉

[@manfredtkavetu4477]

@@BrunoAntunesPT thank you

[@PrashanthPuranik]

Hi Bruno. Thanks for the awesome tutorial 🙂 Learned enough to build a file picker for the task at hand in my job. I have one question - when you delete a file, is it not still being uploaded? The component is only removing from the files state, and hence progress bar (FileHeader) disappears. I guess if the upload is in progress, we need to cancel the request. Is that he right thing to do? Also, what should we do if the image has already been uploaded and we need to delete? Appreciate any pointers on this.

[@Wakkyguy]

Hey Bruno, how do you handle http errors while uploading the file which passes our type and size validations?

[@jrs_devs]

12:12 Hello Bruno, do you know of any open source software that has these functionalities (api for file storage) that could be installed on a HDD VPS with large storage size?

[@BrunoAntunesPT]

Honestly azure blob storage and aws s3 are soo cheap that I never felt the need to look elsewhere 😅 Any specific reason to avoid those 2? 😊

[@jrs_devs]

​@@BrunoAntunesPT Thank you bruno, I can see that those prices are really good. The reason is because the starting point would be around 200GB, and it probably would grow a lot as users can upload images/audio/video, just in case I don't get a huge bill.

[@BrunoAntunesPT]

Uhmm yeah... it depends on the size of data you need of course 😊 Our biggest app currently has around 10 or 12TB, if I'm not mistaken. We pay something like 200 dollars a month for that. I would say, its worth it's price for us. If we had to manage everything ourself, like backups etc, it would cost us more, but each case and situation is different 😊

[@jrs_devs]

@@BrunoAntunesPT That's a good point, but I think that for me what would make it more expensive is the data transfer, (0.09$ per GB per Month). I'll have to give it a try anyway.

[@BrunoAntunesPT]

@@jrs_devs @Jorge Ramirez Sandin I guess that even if you build your own server for images, you'll probably still use a cdn for performance reasons, so in the end, that's probably a very small difference in price regarding data transfer, because you also pay for the cdn 😊

[@shynsky]

Great explanatory video - I enjoyed it and learned a ton. Wish formik wasn't involved as I never used it and can't get to understand the part with useEffect and setting value via helpers. Maybe just need some more time to get a grasp of it :)

[@apoffys]

Great video, thanks! I'm getting a linter complaint I don't quite understand though, could you explain it? It's in SingleFileUploadWithProgress.tsx: useEffect(() => { async function upload() { const url = await uploadFile(file, setProgress); onUpload(file, url); } upload(); }, []); I get this warning: "React Hook useEffect has missing dependencies: 'file' and 'onUpload'. Either include them or remove the dependency array." Adding them to the array like ESlint wants just makes the upload continue in an endless loop. It works if I leave them out.

[@BrunoAntunesPT]

Yes, basically eslint is warning that you are using a dependency inside your effect that is not declared in the dependency array - this is on purpose, so you can add this line before "}, []);": // eslint-disable-next-line react-hooks/exhaustive-deps

[@apoffys]

@@BrunoAntunesPT I see, thanks!

[@gultenulukal1766]

You are the best...

[@BrunoAntunesPT]

I'm not, you are Gulten 😍😍❤️ thank you very much for your words my friend 😀

[@MardekSirenen]

Wow great video! But if I download the source code and open it in VS code I get error messages that the material ui packages/elements cannot be found.... What do I have to do to fix this?

[@BrunoAntunesPT]

Did you npm install?

[@justinlin2105]

Great videos! Gain a lot. Thanks

[@BrunoAntunesPT]

Thank you Justin =) Glad you like them!

[@johntenorio9086]

Thanks so much for the tutorial. I have a question and hope that somebody could help me. Why do my dropzone uploaded files disappear when I change pages with a multiStep?

[@BrunoAntunesPT]

Thank you 😊 Without code is impossible to give you an accurate reason why that happens, but my feeling is that you are destroying the component with some if else logic to render or not render the steps 😊 When you go back to that step you recreate the component to show it, and of course the state is started from fresh because the component is a completely new instance 😊 But if you have your github at hand, I can have a look and double check if my suspicions are correct 😅😅

[@dhruvpahwa7602]

How can I display already existing files from server and upload new files and update the existing files?

[@BrunoAntunesPT]

In nextjs you can't change the public folder at runtime 🙂 From their docs: Note: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available. We recommend using a third party service like AWS S3 for persistent file storage. nextjs.org/docs/basic-features/static-file-serving

[@dhruvpahwa7602]

@@BrunoAntunesPT I'm using react for displaying a list of files from an api and using react-dropzone to upload files to S3 bucket but not sure when and how should I update the list of already existing files. I'm storing the list of files in redux store and display it on the useEffect of FileUpload component.

[@mihailshahov9481]

@@dhruvpahwa7602 I have the same issue. How did you manage to initially display file from server?

[@dhruvpahwa7602]

@@mihailshahov9481 I fetched the files from the server on useEffect and stored the files in a useState variable files. Updated the files array on useEffect with files as dependency

[@yashmudgal5090]

Hi Sir, Can you please tell if we can add pause functionality also here.

[@k2nnethtan949]

Thanks, how do I search the filename such as image and previes on web? These files is store at network drive, or D drive folder?

[@mohamedyoussef8835]

Awesome video ++++++ 😃

[@matusmuransky3558]

Hi Bruno, one question if I may. When connecting formik to our fileupload component with the useEffect hook, react throws at me warning about missing dependecy: helpers. Any suggestion how to work it out ? Thanks in advance!

[@BrunoAntunesPT]

What you are seeing is most probably eslint, not react 🙂 the eslint rule is called react-hooks/exhaustive-deps You can find more over here: reactjs.org/docs/hooks-rules.html Just add the helpers to the array of dependencies in the useEffect. Optionally you can also add a comment to ignore the rule for that line 🙂 I hope this helps 🙂

[@matusmuransky3558]

@@BrunoAntunesPT Thank you very much for such a prompt reply, I will check the react docs! Btw. love your content and the way you can explain your code :) ... Just wanted to mention that I even tried to include the helpers object inside the dependency array and the whole app got stuck in an infinite loop as if the helpers object returned from the useField hook was constantly changing? Or is it some sort of reference problem between the upload component and the useField hook itself?

[@BrunoAntunesPT]

Thank you ❤️ It's possible they (formik) return a new object every time we call their hook 😅😅😅 When you are 100% sure you don't care about a dependency, you can use the comment to ignore that line 🙂

[@joanneT416]

Thanks so much, it is very helpful, I only have one question is how to delete the list after clicking the submit a form, spent 2 days but was unlucky.

[@BrunoAntunesPT]

Thank youuuu =D You can do something like this: codesandbox.io/s/headless-hill-09y41?file=/src/pages/index.tsx That's just a "hacky" way I did, let me know if that is what you were looking for :)

[@joanneT416]

@@BrunoAntunesPT you're are a genius. this is what I looking for. Thank you so so much.....

[@BrunoAntunesPT]

You are very welcome 😊😊😊 I'm happy that is what you were looking for 😍😍

[@joanneT416]

​@@BrunoAntunesPT I received a warning eslint on MultipleFileUploadField.tsx. can you help with this please? I should not use // eslint-disable-next-line react-hooks/exhaustive-deps ------ const files: UploadableFile[] React Hook useEffect has a missing dependency: 'helpers'. Either include it or remove the dependency array.eslint useEffect(() => { helpers.setValue(files) }, [files]) If I add the helpers to the array of dependencies in the useEffect, it will come with the page with infinite loop

[@vishalkaushal4311]

The part where you handled the progress, cant that be handled using axios as you mentioned, Is it more complex to do in axios than the displayed method?

[@BrunoAntunesPT]

It's actually easier in Axios, they have a property called progress :)

[@Programandoenc]

[To help the algorithm xD]: Thank you for your answer about deleting the files on the cloudinary cloud. So, you do the cleanup in the backend using a batch, the logic behind may be something like this? correct me if I am wrong please: When user deletes a image on the front end , you just update the "status" property of the image as deleted, and at the end of the day your batch just takes all image urls with "deleted" status and runs a delete in the cloudinary cloud one by one. Is that right ? Thank you ❤️❤️

[@BrunoAntunesPT]

Ahhahah thank you 🙂 Regarding the "algorithm" you choose it's very dependent in your application and requirements and country rules 😅 When I upload usually I upload to a folder with the day in the name "yyyy-mm-dd". That way uploads are split by day - and this is useful later (stay with me) 🙂 In my application we have to legally verify and validate all attachments users sent and sign them, so we just validate them and upload them again into a final folder (not the initial temp day folders) - because we do that, every day at night we have a script that deletes the temp folders that are at least 2 days old and that's easy because the folders have the name in them 🙂 keep in mind that depending on the cloud providers some support just move of files from a folder to another for free. Some other platforms force you to delete a file and upload again in the new folder - which can be costly to you and your company if they charge by operation 🙂

[@intothenature437]

FileError and FileRejection are not found error

[@BrunoAntunesPT]

I don't know what you mean. Can you elaborate? 😊

[@BrunoAntunesPT]

I can see you did 2 comments with URLs, but KZbin deleted them =( If you had URLs pointing to binaries, usually KZbin blocks them... can you share your GitHub URL? In the meantime, if you want, you can clone my GitHub repository to see the differences between mine and yours :)

[@ktm00072]

It came with react-dropzone package. While I am having typescript errors with setFiles() :D

[@jesper9334]

Hey, Thanks for the tutorial. I have everything setup and working on localhost but when I deploy to prod I get this error: Type error: Cannot find module 'react-dropzone' or its corresponding type declarations. Do you know why?

[@BrunoAntunesPT]

Mine deployed correctly into vercel without any issues - youtube-2021-feb-multiple-file-upload-formik.vercel.app/ Double check my repository to make sure you didn't put a dependency as devdependency or something like that 🙂

[@devdive24]

How can I create multiple uploadable areas within the same file and conditionally update the corresponding state? Thanks!

[@BrunoAntunesPT]

I can't understand or visualize what you mean. Do you have a real application I can look at (like Gmail or Facebook or LinkedIn something like that)? 🙂

[@Klklpia]

Thx!

[@BrunoAntunesPT]

😍😍😍

[@RupamBumba]

in case of multiple file upload how can take input for each file (like a description of the file, any tags for each file )

[@BrunoAntunesPT]

To do that, you'll need to add a new value into the field array for the description 😊 I have a video explaining field arrays in formik 😊 kzbin.info/www/bejne/o5aUnIyVqquYa80

[@nuttchokwittaya8225]

Bruno, there is an infinite loop creating singleFileUploadWithProgress. Once I change limit file size to 1000kb, it start to show infinite progress bar, so I console log to check re-rendering of that component, and indeed it is. Will check out the master branch and test it Please correct me if I am wrong

[@BrunoAntunesPT]

To be honest, I don't remember seeing an infinite loop in mine and I tested it with 60MB video files at the time - that being said, a bug in software is always possible 😂😂 Clone mine and re-do your tests there. If it happens there as well, let me know exactly your step by step and I can have a look 🙂

[@hamedkhoshaman8046]

hi bro ,how to upload csv file in table?please

[@adarshrathi8265]

bro, are you made multi form step. I want to make website clone of zety resume builder in which use multi step form.

[@BrunoAntunesPT]

If by insta you mean Instagram I don't use Instagram 😅 if you meant the GitHub URL you can find it over here: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik

[@adarshrathi8265]

@@BrunoAntunesPT bro are you made zety resume builder clone

[@BrunoAntunesPT]

It's not in my plans to build a clone of that app 🙂

[@kulivers1998]

thank u!!!

[@BrunoAntunesPT]

Thank you too!

[@clintonemok2105]

How can I clear all uploaded fileheaders after clicking “Submit” in formik? Great video everything else was really clear and easy to follow

[@BrunoAntunesPT]

Thank you 🙂 on the formik side you just need to setFieldValue to empty array and you are good.

[@RakeshKumar-zj4hu]

I’m marking this , needed for my next project!! I’m hoping this is with redux..

[@BrunoAntunesPT]

I'm not using redux - this component is only dealing with local state (forms - formik). Why would you use redux here? (Genuine question)

[@RakeshKumar-zj4hu]

@@BrunoAntunesPT I’m building an application with multi step form with final step to upload the documents.. have to store the state after each step which can move forward and backward. Do you see a better way to handle state? Pls suggest.

[@BrunoAntunesPT]

You can achieve it without redux... Actually I have a video with exactly what you describe (Multiple Step forms), where I don't use redux. In that video you can move back and forwards in the steps and the state is there for you between the steps 😊 That video URL is: kzbin.info/www/bejne/omSxdnZqgsiKack Let me know, if that's what you need/want (in the first 2 minutes of the video I show the final result - if that's not what you want/need you'll know immediately) 😃

[@RakeshKumar-zj4hu]

@@BrunoAntunesPT yes my friend. I had seen this video before. I am not using stepper , but maintaining state to keep track of step , which also is used to activate a step or deactivate a step. But now I’m realizing I can have a blend of both to achieve what is needed. Thanks yet again! Will keep you posted on my progress.

[@BrunoAntunesPT]

Awesome 😀 I'm very happy I was able to help, even if just a little bit 😀😍 Keep me posted on your progress my friend and best of luck developing the new project 😍😀😀

[@codehan]

How can we cancel an ongoing file upload, so that everything (other methods, promises etc.) is stopped/rejected. We are currcently dealing with the problem to stop a hash calculation and reject the individual promise after canceling an upload.

[@BrunoAntunesPT]

You need to call abort on the xhr call, like here: developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort

[@BrunoAntunesPT]

Then you also need to reject the promise we create to wrap the xhr call

[@smcalpha]

Nice video but what happens when you have your file list consisting of mixed accepted and rejected uploads? If you delete one of the files above wouldn't that lead to duplicate renders/uploads?

[@BrunoAntunesPT]

In the example you gave if you delete one file nothing will happen to the others. They will not be uploaded again 😊 In the video description you can find a link to the deployed demo and play with it 😊 if you have any questions or suggestion I'm very happy to hear 😍😍😍

[@smcalpha]

@@BrunoAntunesPT oh ok thanks I will try it out later today

[@BrunoAntunesPT]

Awesome 😍 let me know if you find any bug 😅😅😅

[@smcalpha]

@@BrunoAntunesPT I downloaded your repo and unfortunately the bug I encountered still persists. I made a video of that use case, maybe you can check it out and help me to find a solution to this. drive.google.com/file/d/1q-rLEc8JzlHBKbZvSJjxifmLGWhixYWl/view?usp=drivesdk

[@BrunoAntunesPT]

Ah that makes sense, I'm using the index as key, so that will happen - github.com/bmvantunes/youtube-2021-feb-multiple-file-upload-formik/blob/dfe4570deb49a012de1a18fe187de605a9935117/src/upload/MultipleFileUploadField.tsx#L74 You need to use a stable key instead of the index in that line. The file name is usually not a good idea because it can be repeated 😊

[@umarabdullahi3811]

👍

[@BrunoAntunesPT]

Thank you Umar 😀🎉

[@smarttechinfo4512]

Sir, i have a question . If anyone change the extension and upload it to the server. In that case how to validate that file before uploading... Eg. Suppose I have a file virus .zip , now I change it to virus.png and upload it to the server.. then how to protect the server from this kind of hoax image through validation...

[@andyfifedenim]

can i request a video on adding variants to a react shopping cart? all the youtube videos show single item products.... thanks

[@BrunoAntunesPT]

Of course, I'm always asking for suggestions 😍😍 What do you mean by variants? I'll give an example let me know if this is what you meant. Example: You go to Nike or Adidas website to buy a t-shirt and each t-shirt has a size (small, medium, large). You buy a pair of shoes and it has size for the shoes. Is that the variants you are referring to? Sorry if I completely misunderstood your request 😅😅

[@andyfifedenim]

@@BrunoAntunesPT that is it exactly!! it would help me (and i am sure others) out as lot....everywhere i look, e-commerce tutorials in react etc are for single items only..iphone, ipad etc....

[@BrunoAntunesPT]

I might prepare one for the future. But because it's not something I can prepare in a short period of time let me see if I can help you in the meantime 😊 What specific part are you "struggling" with currently? The act of storing those "variants" in the shopping cart itself? Or showing the multiple "variants" of the "product" in the product/search page? 😊 (it can be also be something else 😊)

[@andyfifedenim]

@@BrunoAntunesPT const addToCartHandler = () => { props.history.push(`/cart/${productId}?qty=${qty}?size=${size}`); so i am using this to add the "qty" and "size to the url, i am then parsing the url to add to the cart... however this messes up the cart subtotal.....

[@andyfifedenim]

@@BrunoAntunesPT It seems pretty complicated.... I need to be be able to add a size and or a color to the cart, however, i may also want to add another size or color... say a t-shirt color black, size small qty 3 & size medium qty 1 and a white color.. etc ...

[@likoindrahartawan2917]

how do you handle the .xlxs and .xls file ?

[@BrunoAntunesPT]

The same way 🙂 just add the extensions you need and it will work 🙂

[@adnanerohb]

thank you very awesome tutorial and very usefull. but i would love it more if it not depending on some tird party like cloudinary but we can use our own api instead of it

[@BrunoAntunesPT]

Thank you 😀😀 Yeah, I understand your point completely. As I explained in the video if you deploy to vercel, netlify, aws lambda, heroku etc, you'll need to use an external storage provider, because their file systems are ephemeral. And nowadays those platforms are where I see most people and companies deploying their applications 😊 A few examples of cloud storage are aws s3, azure blob storage, cloudinary, imgx etc... I decided to use cloudinary because their free demo account 😊😀

[@adnanerohb]

@@BrunoAntunesPT thank. yes i understand i am using my own api and i am saving pictures to server local storage but i loved many tips who did you used and tat helped me much

[@BrunoAntunesPT]

That's amazing to hear, thank you my friend 😍😍 Are you using formidable or multer or something else? (for the api side) 😊

[@adnanerohb]

@@BrunoAntunesPT i am using file system (fs) i think it's the easiest way for me because i am sending files data encoded on base64 because in my front end side i am using file reader so that i can show the user his image and just when he confirm i send the data

[@djamilsellam931]

is there a way to do it without typescript ? , as i only know reactjs

[@BrunoAntunesPT]

Yes, copy the code and paste into the typescript playground 🙂 it will give you the JavaScript result of it

[@dineshpanigrahi7471]

Please make a video on js version

[@BrunoAntunesPT]

You can copy any typescript file into the typescript language editor, and it will give you the JavaScript version: www.typescriptlang.org/play?target=99&jsx=1# Let me know if that helps :)

[@ryanoshea2710]

Anyone tried integrating this into React Final Form?

[@ThomazMartinez]

This codes does not actually track progress it's just 0 or 100 right?

[@BrunoAntunesPT]

it does track progress in large files and slow networks. Of course if the file is very small and/or your network is very fast it will be 0-100. Try a large image and make chrome simulate a 3G network and you can see progress :)

[@jedidiahzapata999]

Could I upload videos with this?

[@BrunoAntunesPT]

Yes 😊

[@arunkumar2786]

Express framework is bast or next.js

[@BrunoAntunesPT]

Hello Arun, They serve two different purposes :) Honestly in computer science it's very hard to say A is better than B, because it always depends on the use cases/contexts/scenarios you are comparing the two. Next.js might be better in some scenarios, and Express in other scenarios. If you want to give me your use cases I can go a bit deeper :)

[@arunkumar2786]

@@BrunoAntunesPT thanks

[@BrunoAntunesPT]

If you have a use case, feel free to connect with me on LinkedIn or twitter (usually I'm much more active on LinkedIn, so I will reply faster 😅😅)

[@Pavankumarsinglavqrdoor1242]

CG Dr

[@kaleshilpa8889]

can you short help me

[@ComputationalArt]

top!!!!, but you have to change computer : )....change to mac ;)

[@BrunoAntunesPT]

I actually today use Mac with an M1 pro chip 😅

[@claude.detchambila]

Nice tutorial. It would be nicer if you started from scratch and you had a shorter video

[@BrunoAntunesPT]

Thank you for the feedback 😀 always good to improve receiving this constructive feedback ❤️ I agree with you, ideally the video would have been shorter, but to pass all the information I wanted I was not able find a way to make it shorter, unless I skipped some parts, but then it goes against your other request 😊 Regarding the starting from scratch the only thing I did was run "npx create-next-app" and add formik 😊 Sadly, making those things in the video would have make the video even longer 😅😅 honestly I never know what to do in those situations 😅

[@kaleshilpa8889]

hi sir

[@borishelvas5547]

Great job Bruno ! I really love your vidéo ❤️

[@BrunoAntunesPT]

Thank you 😍