Angular 2 upload Image button is refreshing page

Question

I have a html form with two buttons on it:-

[1] One button is used to upload an image file (.jpg) [2] and the second one is to submit the form.

The problem is that the upload image button seems to be refreshing the page after the method for uploading the image has completed. Below is my html:-

<div class="m-b-18px">
  <div class="col-m-12">
    <a (click)="readRecipes()" class="btn btn-primary pull-right">
      <span class="glyphicon glyphicon-plus"></span>Read Recipes
    </a>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <form [formGroup]="create_recipe_form" (ngSubmit)="createRecipe()">
      <table class="table table-hover table-responsive table-bordered">
        <tr>
          <td>
            Name
          </td>
          <td>
            <input name="name" formControlName="name" type="text" class="form-control" required />
            <div *ngIf="create_recipe_form.get('name').touched && create_recipe_form.get('name').hasError('required')"
              class="alert alert-danger">Name is required
            </div>
          </td>
        </tr>

        <tr>
          <td>
            Description
          </td>
          <td>
            <textarea name="description" formControlName="description" class="form-control" required>

            </textarea>
            <div *ngIf="create_recipe_form.get('description').touched && create_recipe_form.get('description').hasError('required')"
              class="alert alert-danger">
              Description is required
            </div>
          </td>
        </tr>

        <tr>
          <td>
            Image
          </td>
          <td>
            <input name="selectFile" id="selectFile" type="file" class="form-control btn btn-success" />
            <button type="button" class="btn btn-primary" (click)="uploadImage($event)" value="Upload Image">Upload Image</button>
            <input type='hidden' id='image_id' name='img_id' value="6" formControlName="image_id" />
          </td>
        </tr>



        <tr>
          <td></td>
          <td>
            <button class="btn btn-primary" type="submit" [disabled]="!create_recipe_form.valid">
                <span class="glyphicon glyphicon-plus"></span> Create
            </button>
          </td>
        </tr>
      </table>
    </form>
  </div>
</div>

My code for the uploadImage method is below:-

 uploadImage(e) {
    let files = this.elem.nativeElement.querySelector('#selectFile').files;
    let formData = new FormData();
    let file = files[0];

    formData.append('selectFile', file, file.name);

    this._imageService.uploadImage(formData)
      .subscribe(
        image => {
          console.log(image);
          this.addImageIdToHtml(image)
          e.preventDefault();
          e.stopPropagation();
        },
        error => console.log(error)
      );
  }

As soon as the above method has finished running the page appears to refreshing causing my app to go back to the land page. This is not the behaviour I want. What I actually want is the form page to be retained until the Submit form button is pressed. Can anyone help me please?

Anuruddha Thennakoon · Accepted Answer · 2017-12-06 09:14:47Z

Use div tags instead of form tag.

Change the button type as button.

<button type="button">Upload Image</button>

Modify the code as follows.

<div class="m-b-18px">
  <div class="col-m-12">
    <a (click)="readRecipes()" class="btn btn-primary pull-right">
      <span class="glyphicon glyphicon-plus"></span>Read Recipes
    </a>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div [formGroup]="create_recipe_form" (ngSubmit)="createRecipe()">
      <table class="table table-hover table-responsive table-bordered">
        <tr>
          <td>
            Name
          </td>
          <td>
            <input name="name" formControlName="name" type="text" class="form-control" required />
            <div *ngIf="create_recipe_form.get('name').touched && create_recipe_form.get('name').hasError('required')"
              class="alert alert-danger">Name is required
            </div>
          </td>
        </tr>

        <tr>
          <td>
            Description
          </td>
          <td>
            <textarea name="description" formControlName="description" class="form-control" required>

            </textarea>
            <div *ngIf="create_recipe_form.get('description').touched && create_recipe_form.get('description').hasError('required')"
              class="alert alert-danger">
              Description is required
            </div>
          </td>
        </tr>

        <tr>
          <td>
            Image
          </td>
          <td>
            <input name="selectFile" id="selectFile" type="file" class="form-control btn btn-success" />
            <button type="button" class="btn btn-primary" (click)="uploadImage($event)" value="Upload Image">Upload Image</button>
            <input type='hidden' id='image_id' name='img_id' value="6" formControlName="image_id" />
          </td>
        </tr>



        <tr>
          <td></td>
          <td>
            <button class="btn btn-primary" type="button" [disabled]="!create_recipe_form.valid">
                <span class="glyphicon glyphicon-plus"></span> Create
            </button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

Ilyas Ayuubi · Accepted Answer · 2021-11-07 16:52:34Z

1

You should not upload files on Angular folders like (Assets) , cuz it will recompile every time new file added to Angular environment and that will cause you the page refreshment you didn't want.

answered Nov 7, 2021 at 16:52

Ilyas Ayuubi

5264 silver badges6 bronze badges

1 Comment

lesolorzanov Over a year ago

This is the right solution. And it's one of these abstract implicit things one has to learn about Angular. It's also the fault of the watchers which are pretty bad. Disable the live reload if you need to put files in the assets folder

HexaCrop · Accepted Answer · 2017-12-06 04:58:59Z

0

If you are using button tag inside the form tag, add type="button" inside the button tag.

<button type="button"></button>

This will work perfectly

answered Dec 6, 2017 at 4:58

HexaCrop

4,4114 gold badges31 silver badges56 bronze badges

2 Comments

ED209 Over a year ago

If you look at my html u can see that I have already done this:- <button type="button" class="btn btn-primary" (click)="uploadImage($event)" value="Upload Image">Upload Image</button>

HexaCrop Over a year ago

The second button type is submit.

Collectives™ on Stack Overflow

Angular 2 upload Image button is refreshing page

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related