Upload and Download Files with Progress | Spring Boot and Angular

[@matthewmatteomatheus6483]

Those 10 lines of CORS code saved my life. Thanks.

[@GetArrays]

I know right

[@yang120000]

One of the best tutorial content creators on YT, please keep it up, thank you!

[@ashekseum9301]

Your tutorials are the best. Can't say enough how good they are !

[@SaraMejbrimyworld-welcom]

the best tuto i ever watched, thank you so much 🥰

[@magadiflo-dev]

This video is excellent, thank you so much. Greetings from Peru

[@hindalla7888]

Hello thanks for sharing the code! I have a problem ; the back end works well but the front end when i want to upload a file I got 500 error "The process cannot access the file because it is being used by another process" please can u help me I really need this for my project

[@mcpoweradrian5284]

Your tutorials are great man, keep doing your stuff, you are amazing!

[@ФедорНиколаев-ч3г]

Thank you so much. More Angular+Spring please

[@trandreluis]

Thanks for the tutorial! How to make that using batch upload instead do uploading requests to each file?

[@Yangslehollandais]

I want ot know if want to upload a folder with file inside ?

[@manuelfilipe6831]

You are one of the best, thanks so much.

[@sohrabsheykhmohammadi1909]

you're amazing bro.

[@chengxiong9891]

Thank you so much for your course spring + angular.

[@_waadly977]

شكرا يافندم

[@selimhorri7816]

jazak Allah khayr brother, it's very clear

[@devolajide]

Thanks for the tutorial. What if I want to return more data in the response. Like "responseCode":200, "files":"files" etc

[@anselmschafer1647]

Thanks so much! Amazing!

[@davidab8392]

what cloud database can i use to store files ?

[@johnthedon2098]

I've exactly same code like yours but i'm getting this error `Invalid mime type "null": 'mimeType' must not be empty` ;(

[@سراب-ث1ح]

thank you lifesaver

[@phannhattan7091]

Sir, Could you guide me on how to prevent the downloaded files from disappearing when refreshing the page?

[@azzasammouda5329]

Thanks sir please it's the same for excel file?

[@GetArrays]

yes, all file types.

[@brankokostic5048]

This is great video. The only thing is that if you pass MultipartFile list to your end point for uploading it will not scale well and eventually you will get ‘request too big’ error. If you want to upload lots of big files at once you need to use streaming. You would need to read directly from HttpServletRequest and configure spring.servlet.multipart.enabled=false. I was able to transfer 30-40GB of files in this way without any problem. I haven’t tried it from Angular and insted I used Java client. However I think that your existing Angular side would still work with streaming. Once again thank you for great video and keep up the good work.

[@ayael119]

Hi can i ask you ??

[@brankokostic5048]

@@ayael119 Sure. what is the question?

[@ayael119]

@@brankokostic5048 do you have any code of forgetting password with angular and spring boot ??

[@anonymousluxray4990]

@brankokostic5048 Any references available for uploading files using streaming?

[@brankokostic5048]

@@anonymousluxray4990 I can give you some example of server side using Spring Boot end point. I also have example of a client in JS/TS. But if your tech stack is different then you would need to look for it.

[@KiranAnil8]

well explained. Thank you

[@manuelfilipe6831]

Please help me how to search files in directory.

[@claranceliberi]

Awesome tutorial

[@oposicaoecontraste]

My typescript accusses of not exiting the type file on eventHandler. Anyone experienced this error?

[@tunghoang9373]

Very helpful video, thanks so much.

[@GetArrays]

You're welcome

[@MN-ke6sv]

Thank you so much, But I have a problem when I try to test the methode downloadFiles with Postman I had an Error : java.io.FileNotFoundException: URL [file:/C:/Users/lenovo/Téléchargements/uploads/image.png] cannot be resolved in the file system for checking its content length Can you help me please !!

[@GetArrays]

It simply could not find the file. Make sure the file actually exists and wasn't deleted.

[@tiagovieira2375]

Does it cover how to upload file with other attributes? Like registering an user with a profile image...?

[@GetArrays]

No, not in this video. In the course, yes.

[@luongbich3223]

very cool...thank you so much!

[@ankit65668]

Hello, can you please provide frontend code if the API i.e. backend returns byte array (byte[]) in place of resource object?

[@GetArrays]

All source code in the video description

[@MrLool32]

Hey Dude nice video, is there a way to build the Rest Service to download multiple files at once? I can't find a proper example for this anywhere sadly.

[@GetArrays]

I have a whole course on that coming out soon, where we build an application like Dropbox/Google Drive.

[@MrLool32]

@@GetArrays Do you have anything of that on your page or channel yet? Or can you give me other resources to learn how to do this? I need it for my work and my time to get it done is running out...

[@GetArrays]

@@MrLool32 unfortunately, no. Not at the moment. The application is under construction.

[@teckinfodz]

thanks for this tuto i want to ask how to let same example with just let one file not mutiple

[@GetArrays]

Just remove the multiple property in the input in the HTML. that should do it. and you can also remove the list in the back in as well, just have the back end accept one multipartfile. Let me know if that helps.

[@teckinfodz]

@@GetArrays thank you very mutch ... i will do my try thanks again because my idia is pass download video file from page to anthor page like youtube. when you want to downlaod a video you do it in one page ... and when you click start is redirect you to anthor page when download start with progress !!!! this is what im try to do

[@swerytv4342]

Thanks for this tutorial

[@alesblaze4745]

thanks a lot man!

[@smartcodes9780]

Perfect tutorial

[@GetArrays]

Thank you

[@nikitasharma5647]

very helpful! thanks

[@ninosalkaton4461]

Hi Roland, thanks for the tutorial, I am getting error in app.html: error: Object is possibly 'null'.ngtsc(2531) Property 'files' does not exist on type 'EventTarget'.ngtsc(2339)

[@GetArrays]

Go to the tsconfig.js file and turn off strict template. That is one solution. Unless you wanna cast in the class. Let me know if that helps

[@ninosalkaton4461]

@@GetArrays the first error is disappeared, but I still have this error: Property 'files' does not exist on type 'EventTarget'.ngtsc(2339)

[@notfbi9432]

@@ninosalkaton4461 I'm having the same error

[@soumyashrivastava5411]

Hi... Any update on this one?

[@GetArrays]

@@soumyashrivastava5411 Please read the comment I made above. It is the tsconfig file you need to adjust.

[@yogeshbansal4311]

Hello sir, I would like to know if my file is greater than 12 mb and at the time of downloading service returning result in blob and it is taking time on server to process and returning response how can I tell user to wait or any way to reduce the service response time?

[@GetArrays]

A 12MB file is not a large file. Please set your max file size in your properties file spring.servlet.multipart.max-file-size=100000000MB spring.servlet.multipart.max-request-size=100000000MB

[@VWSPD]

Hi , thank you very much for this tutorial , the application is working when posting with postman but when uploading with angular I got this error " The process cannot access the file because this file is in use by another process " , please tell me what to do.

[@GetArrays]

Because you're uploading the same file

[@GetArrays]

The same you're trying to save yoire uploading it too

[@VWSPD]

@@GetArrays Thanks bro , i resolved the problem by adding a try catch .

[@bouabdellahsaidabdeldjalil6075]

@@VWSPD hiii bro, pls a have the same problem can u show how did u add the try catch

[@praveenjava6896]

how did u do that in reqestmapping there is symble.can u explain.

[@GetArrays]

What exactly are you talking about?

[@praveenjava6896]

i imported ur project but still in postman post request shows 500 error.

[@lequangduyminh9210]

Thanks you so much

[@justbelieveinmyself]

Спасибо большое! Thank u brother!

[@GetArrays]

Пожалуйста

[@nirodhasandanuwan5488]

best ever

[@refreshjavabysaikaruturi]

I am not getting the names of the file after uploading

[@GetArrays]

What do you mean? When you save the file, do you not see the name of that file? I'm not sure what the issue is. Can you be a little bit more specific?

[@refreshjavabysaikaruturi]

@@GetArrays hey, thanks now I am able to see but Not able to take multiple files

[@GetArrays]

@@refreshjavabysaikaruturi Please watch the tutorial and get the full code. Everything should work perfectly.

[@programtime5526]

great work thanks

[@antonymaia1996]

Hello friend, first I want to say that your example helped me a lot, but I have a problem, I'm not able to capture the Headers File-Name, the file is being downloaded with null, Ex: null.zip sorry my english, i'm using the google translator

[@GetArrays]

You need to add a configuration to allow the server to expose that header. Please watch the course, all of this is in there and explained.

[@larhchimismail3399]

please tell me how to control the size of the file that the user uploading for example i want the user to not exceed 10MB per file

[@GetArrays]

You need two functions. One to fire when the change event happens in the file input in the HTML and another to make the HTTP request to the back end. I implemented the former a long time ago. Here is the code I have for when the file is selected: public onSelectedFile(event: any): void { let totalFileSize = 0; if (event.target.files.length > 0) { this.files = event.target.files; let file: File; for (file of this.files) { console.log(file.size); totalFileSize += file.size; } if (totalFileSize > your limit here) { //Send notification to user here(`Files to upload too large. File(s) size: ${totalFileSize}. You only can upload 10MB file size.`); } else { call the function that's gonna me the HTTP request and give it the files } } }

[@larhchimismail3399]

@@GetArrays thanks bro for the answer I really appreciate your feedback thanks again

[@GetArrays]

@@larhchimismail3399 no problem

[@omkarsunilpatil3654]

nice video buddy thanks .when will make the project with reactjs?

[@GetArrays]

The front end with React is done but not for this project.

[@matthj.c7962]

when i try to upload with postman i have this error : java.nio.file.NoSuchFileException

[@fabianortiz5946]

El problema es que su directorio predeterminado al inicio de la aplicación Path fileStorage = get(DIRECTORY, filename).toAbsolutePath().normalize(); lo puedes solucionar quitando DIRECTORY

[@fabianortiz5946]

Path fileStorage = get(filename).toAbsolutePath().normalize();

[@miguelhmp]

First you need to create the "uploads" folder manually, in the path of the "DIRECTORY".

[@badrsilmi7996]

hi i used your source code but i keep getting java nosuchfileException im using jdk 17 is it the problem?

[@GetArrays]

Source code is in the video description. Both back-end and front-end code. Let me know if you can locate it.

[@badrsilmi7996]

@@GetArrays i yes i did i used your backend with postman and i keep getting in my console java.nio.file.NoSuchFileException . i dont know what to do

[@GetArrays]

That’s because in your Java code you’re referring to a file or folder on your computer that doesn’t exist. Please double check your path / files and make sure they exist on your machine if you’re referring to them in the Java code. Let me know if that helps.

[@badrsilmi7996]

@@GetArrays okay im gonna try that

[@badrsilmi7996]

@@GetArrays it worked thank you so much , and thank you for your time.

[@akshaychothani606]

I am getting error "Current request is not a multipart request" can you please help me

[@GetArrays]

check your headers when you're sending the request.

[@techatnyc7320]

Thankyou!

[@lll-wb3vx]

ur the best

[@spabinash2181]

how to i get image url link instead of image in download/filename

[@indlareddy1566]

Did you get solution of how to get image url

[@praveenreddy5903]

In STS not working

[@upcomingcoder7933]

Kindly do an angular ecommerce app with spring boot as backend app

[@lagz89]

How can I add the bearer token ?

[@GetArrays]

I have free videos on that as well. Please look at the channel videos. There are tutorials on token and all.

[@mallikarjunareddynimmakaya4120]

Please start microservices tutorial

[@mm1nt]

idk why Path is not showing get method for me!

[@GetArrays]

make sure it's imported correctly. Please take the code, the link is in the description and see what you miss.

[@mm1nt]

@@GetArrays thank u so much lol it worked as i was writing the comment Ur guides are heaven keep it up u deserve more views and stay safw

[@praveenreddy5903]

nio-8080-exec-1 error

[@kalenzo78]

amazing

[@subhajitsett3399]

Can you please share the source code? Thanks in advance.

[@GetArrays]

It's in the video description

[@humeidjocordasse4605]

I would like to go deeper upon this topic: Upload and Download files with Spring Boot and Angular, would someone give some sources?

[@GetArrays]

Check the video description. I give all the source code.

[@humeidjocordasse4605]

@@GetArrays I'm sorry, I probably expressed myself wrong, what i a wanted to say with "sources", it was sources of the concepts, like books, posts, etc. Just for deeper knowledge.

[@Raphael-et6ig]

00:28:00