Angular File Upload - GeeksforGeeks (2024)

Table of Contents

Please Login to comment... Thank You!

Tutorials
- Python Tutorial
  - Taking Input in Python
  - Python Operators
  - Python Data Types
  - Python Loops and Control Flow
    - Python Conditional Statements
    - Python Loops
  - Python Functions
  - Python OOPS Concept
  - Python Data Structures
  - Python Exception Handling
  - Python File Handling
  - Python Exercises
- Java
- Programming Languages
- System Design
- Interview Corner
- Computer Science Subjects
- DevOps
- Linux
- Software Testing
- Databases
- Android
- Excel
- Mathematics
DSA
- Data Structures
- Algorithms
  - Analysis of Algorithms
  - Searching Algorithms
  - Sorting Algorithms
  - Greedy Algorithms
  - Dynamic Programming
  - Graph Algorithms
  - Pattern Searching
  - Recursion
  - Backtracking
  - Divide and Conquer
  - Mathematical Algorithms
  - Geometric Algorithms
  - Bitwise Algorithms
  - Randomized Algorithms
  - Branch and Bound
  - Algorithms Tutorial
- DSA Tutorial
- Practice
  - All DSA Problems
  - Problem of the Day
  - Company Wise Coding Practice
  - GfG SDE Sheet
  - Practice Problems Difficulty Wise
  - Language Wise Coding Practice
  - Curated DSA Lists
- Competitive Programming
- Company Wise SDE Sheets
- DSA Cheat Sheets
- Top Interview Questions
- Puzzles
Data Science
- Python Tutorial
- R Tutorial
- Machine Learning
- Data Science using Python
- Data Science using R
- Data Science Packages
  - Pandas Tutorial
  - NumPy Tutorial
- Data Visualization
  - Python Data Visualization Tutorial
  - Data Visualization with R
- Data Analysis
  - Data Analysis with Python
  - Data Analysis with R
- Deep Learning
- NLP Tutorial
Web Tech
- HTML Tutorial
- CSS Tutorial
- JavaScript Tutorial
- PHP Tutorial
- ReactJS Tutorial
- NodeJS Tutorial
- AngularJS Tutorial
- Bootstrap Tutorial
- Typescript
- Web Development Using Python
- Wordpress Tutorial
- Web Design
- Cheat Sheets
- Learn Complete Web Development
Courses
- Coding for Everyone
- DSA to Development
- Machine Learning & Data Science
- Generative AI & ChatGPT
- Become AWS Certified
- DSA Courses
- Programming Languages

Open In App

Last Updated : 06 Sep, 2022

Summarize

Comments

Improve

Suggest changes

Like Article

Save

Report

The file upload is an essential component to make a form that store some image kind of data. It helps in applications using image upload or in the file sharing. This file-upload component uses file.io API for uploading file and in return it provides a shareable link. Furthermore, we can send get request to shareable link to get the file but for now, our only focus is on upload section so we only use the post method.

Approach:

Create a new angular app using following command-
```
ng new angular-file-upload 
```
Move inside the app by using cd command-
```
cd src/app/
```
Generate new component file-upload-
```
ng g c file-upload/ 
```
Open src/app folder and start editing app.component.html file.
<app-file-upload></app-file-upload>
See Also
AngularJS Fetch Data From API using HttpClient - GeeksforGeeks Response - Web APIs | MDN How to Call APIs in Angular?Fetching Data from an API in Angular
Create a service for file-upload component via command-
```
ng g s file-upload/
```
Open src/app/file-upload folder and start editing file-upload.component.ts file.
import { Component, OnInit } from '@angular/core';
import { FileUploadService } from './file-upload.service';
@Component({
selector: 'app-file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
// Variable to store shortLink from api response
shortLink: string = "";
loading: boolean = false; // Flag variable
file: File = null; // Variable to store file
// Inject service
constructor(private fileUploadService: FileUploadService) { }
ngOnInit(): void {
}
// On file Select
onChange(event) {
this.file = event.target.files[0];
}
// OnClick of button Upload
onUpload() {
this.loading = !this.loading;
console.log(this.file);
this.fileUploadService.upload(this.file).subscribe(
(event: any) => {
if (typeof (event) === 'object') {
// Short link via api response
this.shortLink = event.link;
this.loading = false; // Flag variable
}
}
);
}
}
Open src/app/file-upload/ and start editing file-upload.service.ts file.
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class FileUploadService {
// API url
baseApiUrl = "https://file.io"
constructor(private http:HttpClient) { }
// Returns an observable
upload(file):Observable<any> {
// Create form data
const formData = new FormData();
// Store form name as "file" with file data
formData.append("file", file, file.name);
// Make http post request over api
// with formData as req
return this.http.post(this.baseApiUrl, formData)
}
}
Open src/app/file-upload and start editing file-upload.component.html file.
<div class="text-center">
<input class="form-control" type="file"
(change)="onChange($event)">
<button (click)="onUpload()"
class="btn btn-success">
Upload
</button>
</div>

<div class="container text-center jumbotron"
*ngIf="shortLink">
<h2> Visit Here</h2>
<a href="{{shortLink}}">{{shortLink}}</a>
</div>

<div class="container" *ngIf="loading">
<h3>Loading ...</h3>
</div>
Open src/app/ and start editing app.module.ts file.
import { BrowserModule } from
'@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FileUploadComponent } from
'./file-upload/file-upload.component';
import { AppComponent } from './app.component';
import {HttpClientModule} from
'@angular/common/http';
@NgModule({
declarations: [
AppComponent,
FileUploadComponent,
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Now run this command to serve on localhost
```
ng serve
```

Output:

Before file selection:
After file selection and clicking on button:
After loading is completed:

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

GeeksforGeeks

Improve

Blaze UI File Upload

Please Login to comment...

Article Tags :

Trending in News

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id, }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); return; } var improvement_reason_html = ""; for(var comment of commentArray) { // loop creating improvement reason list markup var comment_id = comment['id']; var comment_text = comment['suggestion']; improvement_reason_html += `

${comment_text}

`; } $('.improvement-reasons_wrapper').html(improvement_reason_html); $('.improvement-bottom-btn').html("Create Improvement"); $('.improve-modal--improvement').hide(); $('.improvement-reason-modal').show(); }, error: function(e){ $('.spinner-loading-overlay:eq(0)').remove(); // stop loader when ajax failed; }, }); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ $('.improvement-reason-modal').hide(); } $('.improve-modal--improvement').show(); }); function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; script.onload = callback; document.head.appendChild(script); } function suggestionCall() { var suggest_val = $.trim($("#suggestion-section-textarea").val()); var array_String= suggest_val.split(" ") var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(suggest_val.length <= 2000){ var payload = { "gfg_post_id" : `${post_id}`, "suggestion" : `

${suggest_val}

`, } if(!loginData || !loginData.isLoggedIn) // User is not logged in payload["g-recaptcha-token"] = gCaptchaToken jQuery.ajax({ type:'post', url: "https://apiwrite.geeksforgeeks.org/suggestions/auth/create/", xhrFields: { withCredentials: true }, crossDomain: true, contentType:'application/json', data: JSON.stringify(payload), success:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-section-textarea').val(""); jQuery('.suggest-bottom-btn').css("display","none"); // Update the modal content const modalSection = document.querySelector('.suggestion-modal-section'); modalSection.innerHTML = `

Thank You!

Your suggestions are valuable to us.

You can now also contribute to the GeeksforGeeks community by creating improvement and help your fellow geeks.

`; }, error:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Something went wrong."); jQuery('#suggestion-modal-alert').show(); error_msg = true; } }); } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Minimum 5 Words and Maximum Character limit is 2000."); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Enter atleast four words !"); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } if(error_msg){ setTimeout(() => { jQuery('#suggestion-section-textarea').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('

'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // load the captcha script and set the token loadScript('https://www.google.com/recaptcha/api.js?render=6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY',[], function() { setGoogleRecaptcha(); }); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('

'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.improvement-reason-modal').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); });