How To Upload Files With Angular and PHP
Tags: Angular, PHP, Web Development, JavaScript, Web Applications

How to upload files?. This question comes to every beginner’s mind of any programming developers. Why because sending data (means key-value pair or form data) to the server is different from sending the blob(images, files) object.

Let’s see how to upload a file using Angular with PHP in a simple way. It is not as tough as you think. But when I was a beginner, I felt it’s too tough to upload files. Whenever I got a file uploading task, I felt why it is not working for me. I got frustrated sometimes. But now I am able to easily do the file uploading tasks.

If you look from the top, the file uploading process had three stages. And they are very easy stages.

Create an input field with the file type with plain HTML. Create a FormData object in JavaScript and attach the chosen file. Then pass the FormData using HTTP Client. Catch the file using PHP code(Usual PHP file catch code).

Let’s see how to upload a file using Angular with PHP in a step by step example.

1. Create Angular Project

Create an Angular project using the below command.

ng new erp

Add required module to app.module.ts file.

For the file input type, we need the below modules.

FormsModule

ReactiveFormsModule

To send data to the server we need the below module.

HttpClientModule

So add the below code in your app.module.ts file.

I am using the Angular Material UI Framework. It is an optional step.

Add Angular Material using the below command on your terminal/command prompt.

So add the below code in your app.module.ts file.

2. Create File Input

Open app.component.html file and create a file input type like below.

Here I created a formControl element to refer to the file input.

The fileChange() function is used to detect the file size and extension. You can add restrictions if you want when you choose the file.

Create a button to upload the selected file.

The uploadFile() function is used to attach the file to the formData object and send using the HTTP request.

3. Create FormData in TypeScript

First, create a formControl element for the input field in the app.component.ts file.

file=new FormControl('')

Then create a variable to hold the selected file information.

file_data:any=''

Now create a fileChange() function like below.

In the above code

Checking whether the file is selected or not using fileList.length Then we can get the file information using file.name, file.size, file.type We can check the file size. Here I limiting the file size to 4 MB using this code. (file.size/1048576)<=4. You can modify this as per your need. Then create a formData object and attach the using append() function. You can pass additional information in a key-value pair format using the append() function also.

4. Send File Using HTTP

To send the file to the server, first, we need to create a reference for HTTP using constructor in app.component.ts file.

Then create a variable with the IP address of the server.

Now call the post() method of the HTTP request and pass the formData object like below.

5. Catch File using PHP

The client-side code is over. Now we need to catch the uploaded file using the PHP server. For this, you need the PHP installed on your machine or the Cloud Server.

Create a folder to save the uploaded file on the server. Here I created the docs folder to store files.

I have a lengthy code catch and store the file. I using the structure to avoid many issues. You can find the explanation in the code.

Hope you like this tutorial.

Even if you copy and paste the above all code, it will work fine.

Sample Output:

Full Source Code Link: https://github.com/bharathirajatut/angular-examples/tree/master/file-upload-example

Common Error

The below error you will face while uploading a file, even there is no mistake in your code.

Warning: move_uploaded_file(docs/245f99482bb6035-377112-avpng.png): failed to open stream: Permission denied in

Why because it is related to folder permission with OS. Usually, this error will occur only in Mac and Linux. Not in windows.

Solution

On Ubuntu Linux, use the below command to permit file uploading.

sudo chown www-data folder_name

sudo chmod 0755 -R folder_name

On Mac, Right-click the folder->Get Info->choose Read & Write for Everyone.