Introduction:
Adding images to your website is a simple method to enhance user experience. Visual information makes up 90% of all information that we take in and have sent to our brains. Images can aid in drawing attention to your site and directing visitors’ lines of sight.
In this article, we upload the image free of cost on the Imgur website using API and get the image details like URL, size, height, width, etc.
To perform this task, we also need an account on Imgur. So, let’s start our uploading journey step by step 🙂
Get Started:
Step 1: Create An Account On Imgur And Get Client Id
Go to https://imgur.com/ and signup for it.
After creating the account, navigate to this site: https://apidocs.imgur.com/ and click on the Authorization and OAuth menu tab.
Then click on the Registration link
It will navigate to you on Register An Application form.
After submitting the form, you will get the Client Id and Client Secret. So, copy that and store it in a safe place.
Step 2: Set up An Angular Application.
Go to your desired folder and run the following command to create an Angular application.
ng new imgur-upload
You need to select routing and CSS type while creating the application. After successfully creating the application, run the following command to test the application.
ng serve -o
Step 3: Create Upload Service.
First of all, Import HttpClientModule in the app.module.ts file to perform the HTTP client request.
import { HttpClientModule } from '@angular/common/http';
.
.
imports: [
.
.
HttpClientModule,
],
Then after, create the service by running the following command.
ng g s upload
Add imageUpload() method in the UploadService.
imageUpload(file: any): Observable<object> {
const httpOptions = {
headers: new HttpHeaders({
Authorization: 'Client-ID 39***********dd' //Your client id
}),
};
const formData = new FormData();
formData.append('image', file);
return this.http.post('https://api.imgur.com/3/image', formData, httpOptions);
}
Step 4: Add HTML and onUploadImage() method in your component.
app.component.html file
<div> <input type="file" (change)="onUploadImage($event)"> </div>
app.component.ts file
onUploadImage(event: any) {
this.uploadService.imageUpload(event.target.files[0]).subscribe((response: any) => {
console.log(response);
});
}
Now, when you try to upload an image the API will give the 429 error.
To remove this type of error, you need to add the following <meta> tag in your index.html file.
<head> <meta charset="utf-8"> <title>ImgurUpload</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="referrer" content="no-referrer" /> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head>
Finally, you have done everything to perform a free image upload and get many responses:)
We log the console for a response. So, let’s check what happens when we upload an image.
Oh, in the response, we also get the URL. So now we are able to get images by URL!
