jeudi 28 février 2019

How to show an image in a pop up screen with ember.js

I'm currently making a pop-up screen with mobiscroll and ember.js where you can select a photo from your on pc and I need to display them in the pop-up screen as a preview. currently I have that you can choose a photo from your pc and you get a message in the console log that is has been uploaded.

I have this in my .hbs file:

<div class="popup">
<div class="popup-header">

</div>
<div class="ember-view mdsc-comp" style="width: 100px">
<div class="col 16 m6 s12 blue-grey lighten-4" style="border-radius:3px; border: 1px solid #ADB8C0; padding-right: 22.5px;padding-top: 25px;  margin-left: 11.250px !important;  border-radius: 5px; width: 50px">

  <div ></div>
    <input id="img" multiple="true" onchange= accept="image/png,image/jpeg,application/" type="file"/>

    <p>(Upload .png .jpeg of .gif afbeeldingen)</p>

  <h5>Titel</h5>
  <div class="input-field col s12">
    
  </div>
</div>

and this in my .js file:

  import Ember from 'ember';
  import mbscPopup from "../mobiscroll/mbsc-popup";

  export default mbscPopup.extend({
  didRender(){
    this.set("headerText", "Nieuwe media toevoegen");
},

actions:{
    cancel(){

    },

    save()
    {

    },
    upload() {
        console.log('upload');
    },
    add() {
        this.$("input[type='file']").click();
    },
}
});

My question is how I can show the image in the pop up screen.




Aucun commentaire:

Enregistrer un commentaire