nyan

class ImageUpload {
	constructor({data}){
    this.data = data;
  }

static get toolbox() {
	    return {
	      title: 'Image',
	      icon: '<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>'
	    };
	  }

render(){
	    // return img;
			this.wrapper = document.createElement('div');
	    this.wrapper.classList.add('simple-image');
		  console.log('i see : ', this);
		  if (this.data && this.data.url){
		     this._createImage(this.data.url, this.data.caption);
		     return this.wrapper;
		  }
	    const input = document.createElement('input');
	    const imageUrl = { path: null };
			input.setAttribute("type","file");
			input.setAttribute("accept",".jpg");
			input.setAttribute("style","display:none;");
			input.addEventListener('change', (event) => {
	      var reader = new FileReader();
	      var path = null;
	      reader.onloadend = function () {
			    // Since it contains the Data URI, we should remove the prefix and keep only Base64 string
			    var b64 = reader.result.replace(/^data:.+;base64,/, '');
			    console.log(b64); //-> "R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="
			    jQuery.ajax({
			      url: '/cms/upload_file',
			      type: 'POST',
			      async: false,
			      dataType: 'json',
			      data: {image: b64},
			      complete: function(xhr, textStatus) {
			      },
			      success: function(data, textStatus, xhr) {
			        console.log(data);
			        path = data.path;
			        imageUrl.path = data.path;
			      },
			    });
			    
			  };

// while(path == null){
			  // 	setTimeout(2000);
			  // 	console.log(path);
			  // }
			  setInterval(() => {
	      	this._createImage(imageUrl.path);
	      }, 5000);

reader.readAsDataURL(input.files[0]);
	    });
			const input_mobile = document.createElement('input');
			input_mobile.setAttribute("type","file");
			input_mobile.setAttribute("accept",".jpg");
			input_mobile.setAttribute("style","display:none;");
	    // input.placeholder = 'Paste an image URL...';
	    // input.addEventListener('paste', (event) => {
	    //   this._createImage(event.clipboardData.getData('text'));
	    // });
			const img = document.createElement('img');
			img.setAttribute("src","/assets/img/image_icon.png");
			img.setAttribute("style","width:100%");
			img.setAttribute("class","image-set lazyload");

// img.setAttribute("onclick","imageset(self)");
			img.addEventListener('click', (event) => {
				input.click();
	      // this._createImage("/assets/img/image_icon.png");
	    });
	    this.wrapper.appendChild(img);
	    this.wrapper.appendChild(input);
	    this.wrapper.appendChild(input_mobile);
	    return this.wrapper;

}

_createImage(url, captionText){

image.src = replaceLast(url,'/','/low_');
    caption.placeholder = 'Caption...';
    caption.value = captionText || '';

this.wrapper.innerHTML = '';
    this.wrapper.appendChild(image);
    // this.wrapper.appendChild(caption);
  }

save(blockContent){
    const image = blockContent.querySelector('img');
    // const caption = blockContent.querySelector('input');

return {
      url: image.getAttribute("data-src"),
      url_mobile: image.src,
      // caption: caption.value
    }
  }
}

function imageset(element){
	console.log(element);
}