Angular 4 Uploading files and images using HTTP POST method #19

[@tamojitchakraborty3871]

This is a great tutorial, most of the tutorials throw jargon, this is great.Thank you

[@mdjunaidalam1160]

Thanks Tamojit, for your kind words :)

[@saurabhdutta865]

Do I need to set up the php server for executing those two php files? Angular part is clear to me.

[@davidracek3051]

i want to post a picture and a form with data. how would i do it? I will do a model driven form with data and then make imput type file? How does the post method handle the data? i have controller on backend that accepts multipart/form-data.

[@pawankumartiwari4060]

please suggest how to view or open a pdf file from in our browser in same tab as a in between div or any tag i am used vs and create API and return bytes but i dont know how to bound that angular 4

[@geetmalhotra5768]

How can I upload multiple files I tried like the below code and it doesn't work:
let attachments = this.elem.nativeElement.querySelector('#attachments').files;
let attachmentFiles:any = [];
for (var i = 0; i < attachments.length; i++) {
attachmentFiles.push(attachments[i]);
}
formData.append("attachments", attachmentFiles);

[@Technovit]

yes, i tried as well, it seems not working for me, CAn you help me on this plz?

[@kos8701]

Great tutorial Junaid, do you have the same tutorial but posting to a c# web api controller not php service?

[@mdjunaidalam1160]

Thanks :). No I do not have tutorial for similar service created in C#. But from angular 2 / angular 4 side the mechanism to post remains same and the code remains same, only you need to have web service in C# to handle the same request parameters with same result.

[@memunis]

thanks for the session. Can you please let me know how can I include node module in my ts file and use? For example I use "fast-csv" node module in my angular js 4 application?? please share the solution

[@mdjunaidalam1160]

you can use node package manager to include any dependency in your node_modules.
e.g. npm install {dependency name}
also you can use --save switch if you want to save this dependency reference in package.json

[@sagarrokade721]

why am i getting array when i remove [1] from fullpath while fetching images

[@satishjs856]

Hi Junaid, Can you advise how to download files after clicking on links..?

[@angelpellejero8764]

Thank you for sharing this great tutorial! Very nice work

[@mdjunaidalam1160]

Thanks for your kind comment :)

[@ravirawat4727]

How do we show an alert wether the file is uploaded or not

[@christ-gospel]

Thanks for your tutorial Sir.

[@CodeWithJamil786]

sir how can i edit or update the image using angular and php

[@prxgyz]

Undefined index: selectFile in C:\xampp\htdocs\api\fileUpload.php on line 13, anybody can help me ?

[@manikanta164]

please upload total source code in my mail

[@RaceDriverF1]

yeah I got the same error. It's waste of time. Try node.js :)

[@ghostgutarist5234]

Can you make a Video for Multipart Form?

[@soultouchingsongs]

yes pls..

[@nari1874]

If possible can u explain life cycle hooks..?

[@tomekm.516]

Amazing, you just saved me another days of pulling my hair out :)

[@mdjunaidalam1160]

Thanks :)

[@vishalmahajan639]

Nice video Sir 10/10 marks

[@mdjunaidalam1160]

Thanks Vishal :)

[@ibrahimnada4702]

Can anyone provide a GitHub url For the angular project?

[@Technovit]

can you someone help me to upload multiple files?

[@JoeMonye]

where can i download the source files?

[@mdjunaidalam1160]

ping me at [e-mail] , I will send you as the link where I uploaded has expired.

[@vnkpurohit]

Thanks for this video can you please guide on multiples file upload ...

[@sunilkumar-zf4dx]

Please post a video on httpclient. And debugging code in VSCode

[@shaik6765]

hi can u plz send the git link of this code

[@DeepakBadoni77]

How to upload videos in angular and display uploaded videos

[@gulamsimnani1113]

Video is so helpful ever. Could you please share on ngx-barcode with rest api?

[@mdjunaidalam1160]

Thanks Gulam :) At the moment I have not made any video on ngx-barcode.

[@akhil5331]

anyway to get the code for upload in angular4????

[@mdjunaidalam1160]

github.com/junaidalamgithub/angular4-tutorial_codes/blob/master/angular4_uploading_files.zip

[@chakravarthikalyan5093]

nice tutorial. but i want http post method is in node and mongo. pls suggest any tutorial

[@soultouchingsongs]

Thank you..👍..very useful tutorial.. Can you do a multiform with video if possible.. Would be great..

[@kittu3217]

are u a fullstack developer?

[@mdjunaidalam1160]

@@kittu3217 Yes

[@muzammilahmed9634]

Thanks awsome tutorials

[@mdjunaidalam1160]

Thanks Muzammil :)

[@rajkumarp1110]

Thank you nice tutorial

[@valrulete2560]

do you have angular 2?

[@mdjunaidalam1160]

This same tutorial holds valid for Angular 2 as there is not much difference between Angular 2 and 4 as of now.

[@valrulete2560]

aw ok do you have source code of thise?

[@mdjunaidalam1160]

I have the sourcecode for this video tutorial. The link has expired. Let me try to put it somewhere or if you want I can email you.

[@valrulete2560]

[e-mail] tnx

[@mdjunaidalam1160]

Hi Val, sent you the mail with the gdrive link. Let me know if you face any issue in downloading the source file.

[@vnkpurohit]

And please give me one more help how to manage big application of angular 4 and how to host anular4 + laravel for backend in mongodb database .. thanks :)

[@nagaswami8932]

How to Import data Excel file to Data base using Angular4

[@mdjunaidalam1160]

Hi Naga, to import data from an Excel file you need to use a server side program e.g. PHP, JSP, coldfusion etc. with thier respective Excel connector component. Angular can then request for the Excel file using this service call and then parse the response and display it n UI.

[@nagaswami8932]

Yes,But i need that development code in Angular and dotnet .How to implement in Dotnet and angular

[@snaliniraju]

can anybody share the code?

[@rahulchaudhari263]

please provoide code for the same

[@Gol_D_Roger_The_Pirate_King]

Can you make a download file tutorial using php and angular.

[@mdjunaidalam1160]

Sure will try to cvome up with one such tutorial whenever I get some bandwidth.

[@Ryuudo123]

link to code files....

[@mdjunaidalam1160]

Download the source files from the following link:
github.com/junaidalamgithub/angular4-tutorial_codes/blob/master/angular4_uploading_files.zip

[@mdjunaidalam1160]

Yes Zahid, the Domain has expired. I will update the file locations soon.

[@aukkaradetphachanya3956]

domain isn't working T_T

[@mdjunaidalam1160]

Yes this domain seems to be expired now. I will try to upload file at some other location and update the link.

[@ronysmile4409]

Sir please upload it in github. It is easy to access

[@mdjunaidalam1160]

Sure Rony, I will do it tonight or maybe by tomorrow and share the link.

[@ashizhamal9944]

request to work with laravel api....please...if you know

[@nalinisuraparaju4917]

Can share the code

[@subhashreemohapatra7724]

please sir add some videos for multiple file uploads.

[@deepb4uz]

yu can use the same logic along with the attribute multiple for input type

[@kavinkumar]

nice tutorial sir

[@mdjunaidalam1160]

Thanks Kavin :)

[@vishalmahajan639]

You should also provide the source code link for developer help

[@mdjunaidalam1160]

Hi Vishal, you can download the source code from the given link below:
github.com/junaidalamgithub/angular4-tutorial_codes/blob/master/angular4_uploading_files.zip

[@pratikvaity6833]

Notice: Undefined index: selectFile

[@pratikvaity6833]

My response from http.post => Response {_body: "uploads/20140620_121509.jpgjpg", status: 200, ok: true, statusText: "OK"

[@saadshahid6629]

Kindly share the source code of this video

[@RaceDriverF1]

So finally I tried today implement this code and it doesn't work. I think the versions of angular and packages are too old to write it now. So i recommend you not to write it with it. It's just waste of time. Try angular 6 with node.js upload. Best regards :)