Skip to content

Instantly share code, notes, and snippets.

@jhades
Last active April 16, 2024 06:52
Show Gist options
  • Save jhades/e6efe40ab1584451dd26cca76e48b800 to your computer and use it in GitHub Desktop.
Save jhades/e6efe40ab1584451dd26cca76e48b800 to your computer and use it in GitHub Desktop.
<input type="file" class="file-upload" onchange="console.log(event.target.files)">
{
lastModified: 1601984029839
lastModifiedDate: Tue Oct 06 2020 13:33:49 GMT+0200 (Central European Summer Time)
name: "angular-forms-course-small.jpg"
size: 56411
type: "image/jpeg"
webkitRelativePath: ""
}
<input type="file" class="file-input"
(change)="onFileSelected($event)" #fileUpload>
<div class="file-upload">
{{fileName || "No file uploaded yet."}}
<button mat-mini-fab color="primary" class="upload-btn"
(click)="fileUpload.click()">
<mat-icon>attach_file</mat-icon>
</button>
</div>
.file-input {
display: none;
}
...
@Component({
selector: 'file-upload',
templateUrl: "file-upload.component.html",
styleUrls: ["file-upload.component.scss"]
})
export class FileUploadComponent {
fileName = '';
constructor(private http: HttpClient) {}
onFileSelected(event) {
const file:File = event.target.files[0];
if (file) {
this.fileName = file.name;
const formData = new FormData();
formData.append("thumbnail", file);
const upload$ = this.http.post("/api/thumbnail-upload", formData);
upload$.subscribe();
}
}
}
<input type="file" class="file-input"
[accept]="requiredFileType"
(change)="onFileSelected($event)" #fileUpload>
<div class="file-upload">
{{fileName || "No file uploaded yet."}}
<button mat-mini-fab color="primary" class="upload-btn"
(click)="fileUpload.click()">
<mat-icon>attach_file</mat-icon>
</button>
</div>
<div class="progress">
<mat-progress-bar class="progress-bar" mode="determinate"
[value]="uploadProgress" *ngIf="uploadProgress">
</mat-progress-bar>
<mat-icon class="cancel-upload" (click)="cancelUpload()"
*ngIf="uploadProgress">delete_forever</mat-icon>
</div>
@Component({
selector: 'file-upload',
templateUrl: "file-upload.component.html",
styleUrls: ["file-upload.component.scss"]
})
export class FileUploadComponent {
@Input()
requiredFileType:string;
fileName = '';
uploadProgress:number;
uploadSub: Subscription;
constructor(private http: HttpClient) {}
onFileSelected(event) {
const file:File = event.target.files[0];
if (file) {
this.fileName = file.name;
const formData = new FormData();
formData.append("thumbnail", file);
const upload$ = this.http.post("/api/thumbnail-upload", formData, {
reportProgress: true,
observe: 'events'
})
.pipe(
finalize(() => this.reset())
);
this.uploadSub = upload$.subscribe(event => {
if (event.type == HttpEventType.UploadProgress) {
this.uploadProgress = Math.round(100 * (event.loaded / event.total));
}
})
}
}
cancelUpload() {
this.uploadSub.unsubscribe();
this.reset();
}
reset() {
this.uploadProgress = null;
this.uploadSub = null;
}
}
const fileUpload = require('express-fileupload');
const app: Application = express();
app.use(fileUpload());
app.route('/api/thumbnail-upload').post(onFileupload);
export function onFileupload(req:Request, res: Response) {
let file = req['files'].thumbnail;
console.log("File uploaded: ", file.name);
...
}
<input type="file" class="file-upload" multiple>
<file-upload requiredFileType="image/png"></file-upload>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment