Topic: Image Upload - Reload page
Expected behavior
When I use the Image Upload (modules: UploaderOptions and UploadOutput) and I send data to store an image, after uploading, should NOT reload the page.
Actual behavior
when i submit the form to upload an image, the page reload
Resources (screenshots, code snippets etc.)
this is the code:
import { Router } from '@angular/router';
import { FormGroup, FormBuilder } from '@angular/forms';
import { ImageService } from '@core/services/brochure-services/image/image.service';
import { EventEmitter } from "@angular/core";
import { Component, OnInit, ViewChild, Input, ElementRef } from '@angular/core';
import { UploadFile, UploadInput, ToastService } from 'ng-uikit-pro-standard';
import { UploaderOptions, UploadOutput } from 'ng-uikit-pro-standard/lib/pro/file-input/classes/mdb-uploader.class';
@Component({ selector: 'app-image-upload', templateUrl: './image-upload.component.html', styleUrls: ['./image-upload.component.scss']})export class ImageUploadComponent implements OnInit {
selectedFile: File = null; fileName: string = ''; options: any;
constructor(
private imageService: ImageService,
private fb: FormBuilder,
private router: Router,
private toastrService: ToastService ) {
this.options = { opacity: 0.9 };
}
ngOnInit() { }
onFileSelect(event) {
console.log(event);
if (event.target.files.length > 0) {
this.selectedFile = event.target.files\[0\];
this.fileName = this.selectedFile.name;
}
}
onSubmit() {
const formData = new FormData();
formData.append('image', this.selectedFile, this.selectedFile.name);
// In here, after i submit this "formData", the page get reload
this.imageService.uploadImage(formData).subscribe(
data => {
// do something
});
}
}
Here is the Service :
@Injectable({ providedIn: 'root'})
export class ImageService extends BaseService {
constructor(http: HttpClient) {
super('http://localhost:8083/Image', http);
}
uploadImage(resource: any){
return this.http.post(this.endpoint + '/uploadImage', resource)
.map(response => response)
.catch(this.handleError);
}
}
Please someone help me, thanks.
Regards.
Do you upload the image by clicking a button? If so, please try to add type="button" to the button element.
- Arkadiusz Idzikowski
Actually no. My html code is this:
<div class="col-md-8">
<!-- Form -->
<h3 style="margin-bottom: 15%;">Image Uploader</h3>
<form (ngSubmit)="onSubmit()">
<div class="file-field md-form" style="margin-top:50px;">
<div mdbBtn floating="true" size="sm" color="primary" size="sm" class="waves-light" mdbWavesEffect>
<mdb-icon fas icon="cloud-upload-alt" aria-hidden="true"></mdb-icon>
<input type="file" name="image" mdbFileSelect (change)="onFileSelect($event)">
</div>
<div class="file-path-wrapper">
<input class="file-path" type="text" placeholder="Upload your image" [value]="fileName" >
</div>
</div>
<button type="submit" mdbBtn outline="true" size="sm" color="primary">Start uploading</button>
I'll try what you suggest. Thanks.
MarioPalacios1986 commented 5 years ago
It does not work, because the form need a button type submit to actually submit the form; to access the function: onSubmit()
Im still stuck here.
Please someone help me. Thanks.
Arkadiusz Idzikowski staff commented 5 years ago
Just to clarify - you tried to change button type to 'button' and it didn't work or it did help but at the same time it caused problems with submitting the form?
In the second case you can change the button type and move the method responsible for form submitting to the button (click) event.
Did you import FormsModule in your module file?
MarioPalacios1986 commented 5 years ago
Ok. I change the type of the button to type="button" and isn't give me new problems, it just the same problem i has originally.
Yes, now I use the (click) event in the button, and I'm not using any kind of form (I try with reactive forms, but instead of using the submit event in the form tag, i put that event in the button, but with the same result). Yes, I'm using FormsModule.
Arkadiusz Idzikowski staff commented 5 years ago
We tried to reproduce this problem in many ways (by using both template driven and reactive forms), but without success. Could you prepare simple demo project in which this problem occur and send it to a.idzikowski@mdbootstrap.com so we can debug that properly?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.3.0
- Device: Web, Mobile
- Browser: Safari, Chrome, Firefox
- OS: OSX, Win, Linux, IOS, Android
- Provided sample code: No
- Provided link: No
MarioPalacios1986 commented 5 years ago
All the rest is working ok; I can select an image and make the upload. But after this is done, for some reason, the page get reloaded. I want to avoid this.
Arkadiusz Idzikowski staff commented 5 years ago
Do you upload the image by clicking a button? If so, please try to add
type="button"to the button element.MarioPalacios1986 commented 5 years ago
I tried what you suggest, but with no success. Thanks anyway.