JSFiddle - React, Tailwind, and code Playground

by Vikash Kumar Gupta

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-upload 
  class="upload-demo" 
  action="https://jsonplaceholder.typicode.com/posts/" 
  :on-preview="handlePreview" 
  :on-remove="handleRemove" 
  :on-progress="handleProgress"
  :on-success= "handleSuccess"  
  :on-error= "handleError"

  :file-list="fileList2" 
  :show-file-list="false"
  list-type="text">
  <el-button size="small" type="primary">Click to upload</el-button>
  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
</el-upload>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

Babel + JSX

var Main = {
    data() {
      return {
      	"myFiles": [],
        fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        files: []
      };
    },
    methods: {
      handleRemove(file, fileList) {
        /* console.log(file, fileList) */;
      },
      handlePreview(file, fileList) {
        /* console.log(file, fileList) */;
      },
      handleSuccess(file){
      	this.myFiles.push(file);
        console.log("success, myFiles")       
        console.log(this.myFiles)
      },
      handleError(file){
      	this.myFiles.push(file);
        console.log("error, myFiles")       
        console.log(this.myFiles)
      },
      handleProgress(event, file, fileList){
      	/* console.log(event)      	
      	        console.log(file)
      	console.log(fileList) */

      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')