JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app" class="min-h-screen bg-indigo-900 p-10">
    <div ref="droparea" v-on="handlers" class="text-center border border-dashed border-white rounded-md text-white opacity-70 p-10">
        <form>
            <p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>
            <input type="file" class="hidden" id="image" accept="image/jpeg">
            <label for="image" class="inline-flex mt-5 py-2 px-3 bg-white text-indigo-900 text-sm rounded cursor-pointer">Select an image</label>
        </form>
        
        <div v-if="files.length">{{ files }}</div>
    </div>
</div>

JavaScript

// https://tailwindcss.com/docs
// https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/
// http://talkerscode.com/webtricks/preview-image-before-upload-using-javascript.php

new Vue({
    el: '#app',
    data: function() {
        const vm = this;

        return {
        	files: [],
            handlers: {
                dragenter: 	vm.dragenter,
                dragover: 	vm.dragover,
                dragleave: 	vm.dragleave,
                drop: 		vm.drop,
            }
        };
    },
    methods: {
        handleFiles: function(files) {
            ([...files]).forEach(this.uploadFile);
        },
        handleDrop: function(event){
            let data = event.dataTransfer;
            let files = data.files;

            this.handleFiles(files);
        },
        uploadFile: function(file){
        	let _this = this,
                url = 'https://api.cloudinary.com/v1_1/mbehrendts/image/upload',
                formData = new FormData();

            formData.append('file', file);
            formData.append('upload_preset', 'lxwrfi5c');

            fetch(url, {
                method: 'POST',
                body: formData
            })
                .then(function(response){
                	return response.text();
                })
                .then(function(data){
                    _this.files.push(data);
                })
                .catch(function(error){
                	console.error(error);
                })
        },
        highlight: function(event) {

            this.$refs.droparea.classList.remove('opacity-70');
            this.$refs.droparea.classList.add('opacity-100');

        },
        unhighlight: function(event) {

            this.$refs.droparea.classList.remove('opacity-100');
            this.$refs.droparea.classList.add('opacity-70');

        },
        dragenter: function(event){
            this.preventDefaults(event);
            this.highlight(event);
        },
       ...