Image Upload - Reload page


Topic: Image Upload - Reload page

MarioPalacios1986 asked 5 years ago

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.


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.


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?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • 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