motorradig/motorradig/resources/js/views/Upload.vue

<template>
    <div id="root">

        <div class="title level-item has-text-centered">Motorrad IG
        </div>

        <div class="has-text-centered">

            <button class="button" @click=""       >Über uns</button>
            <button class="button" @click=""      >Aktuelles</button>
            <button class="button" @click="">Mitgliedsantrag</button>

            <span v-if="!this.$store.state.user.hasOwnProperty('role')"><button class="button" @click="" >Tourplan (Beispiel)</button></span>
            <span v-else-if="this.$store.state.user.role==='GUEST'"><button class="button" @click="" >Tourplan (Gast)</button></span>
            <span v-else-if="this.$store.state.user.role==='MEMBER'"><button class="button" @click="" >Tourplan (komplett)</button></span>
            <span v-else-if="this.$store.state.user.role==='ADMIN'"><button class="button" @click="" >Tourplan (komplett)</button></span>


            <button class="button" @click=""         >Wetter</button>
            <button class="button" @click=""          >Links</button>
            <button class="button" @click=""      >Impressum</button>

            <button class="button" @click="showContent()"      >Show content</button>


            <router-link class="button" :to="{ name: 'Login' }">Log-In</router-link>



            <div>
                <form>
                    <span>UPLOAD:</span>
                    <input name="filename" type="file" @change="uploadFile"></input>
                </form>
            </div>

            <div style="background-color:darkmagenta;">
                <p>&nbsp; .....<br/></p>
            </div>

            <div style="background-color: cyan;">

                    <input @change="createFolderRequest" type="text"></input><button>Neuen Ordner erzeugen</button>

            </div>

            <form>
                <label>Ordner wählen:</label>
                <select @change="newFolderSelected">
                    <option v-for="folder in this.$store.state.folders">{{ folder }}</option>
                </select>
            </form>
        </div>

    </div>
</template>

<script>
    import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
    import {
        Blockquote,
        CodeBlock,
        HardBreak,
        Heading,
        HorizontalRule,
        OrderedList,
        BulletList,
        ListItem,
        TodoItem,
        TodoList,
        Bold,
        Code,
        Italic,
        Link,
        Strike,
        Underline,
        History,
    } from 'tiptap-extensions'
    export default {
        components: {
            EditorContent,
            EditorMenuBar,

        },
        data() {
            return {
                editor: new Editor({
                    extensions: [
                        new Blockquote(),
                        new BulletList(),
                        new CodeBlock(),
                        new HardBreak(),
                        new Heading({ levels: [1, 2, 3] }),
                        new HorizontalRule(),
                        new ListItem(),
                        new OrderedList(),
                        new TodoItem(),
                        new TodoList(),
                        new Link(),
                        new Bold(),
                        new Code(),
                        new Italic(),
                        new Strike(),
                        new Underline(),
                        new History(),
                    ]
                }),
                //folders: this.$store.state.folders
                folders: ['Folder1','Folder2']
            }
        },
        beforeDestroy() {
            this.editor.destroy()
        },
        created() {
            this.loadFolders();
        },
        methods: {

            showContent() {
                console.log(">>" );
                //console.log(this.editor.view.dom.innerText);
                //console.log(this.editor.docView.dom.innerHTML);
                console.log(this.editor.view.docView.dom.innerHTML);
            },
            savePage() {
                console.log('Saving to page:'+this.$store.state.page_name);
                axios.post('http://localhost:8000/api/v1/auth/save_page',{
                    page: this.$store.state.page_name,
                    body: this.editor.view.docView.dom.innerHTML
                }, {
                    headers: {
                        'Authorization': 'Bearer ' + this.$store.state.user_token
                    }
                })
                    .then(res => {
                            console.log("savePage success: Wrote "+this.$store.state.page_name);
                            console.log("Going back to main view");
                            this.$router.push("/");
                        }
                    )
            },
            uploadFile(event) {
                console.log("File changed:");
                console.log(event.target.files[0].name);
                var selectedFile=event.target.files[0];
                var selectedFolder = this.$store.state.selectedFolder;
                const formData = new FormData();
                //formData.append('image',selectedFile,selectedFile.name);
                formData.append('image',selectedFile);
                formData.append('folder',selectedFolder);

                axios.post('http://localhost:8000/api/v1/auth/upload',formData,{
                    headers: {
                        'Authorization': 'Bearer ' + this.$store.state.user_token,
                        'Content-Type':  'multipart/form-data'
                    }
                })
                .then(res=>{
                    console.log(res);
                })
            },
            createFolderRequest(event) {
                var folderName=event.target.value;

                console.log("Request creation of folder:"+folderName);

                const formData = new FormData();
                formData.append("folder", folderName);
                axios.post('http://localhost:8000/api/v1/auth/create_folder',formData,{
                    headers: {
                        'Authorization': 'Bearer ' + this.$store.state.user_token,
                        'Content-Type':  'multipart/form-data'
                    }
                })
                    .then(res=>{
                        console.log(res.data);
                        loadFolders();
                    })
            },
            loadFolders() {
                console.log("Requesting folders");
                axios.post('http://localhost:8000/api/v1/auth/get_folders',{},{
                    headers: {
                        'Authorization': 'Bearer ' + this.$store.state.user_token
                    }
                })
                    .then(res=>{
                        console.log("Receiving folders");
                        console.log(res.data.folders);
                        this.$store.state.folders=res.data.folders;
                    })
            },
            newFolderSelected(event) {
                console.log("New Folder selected:");
                console.log(event.target.value);
                this.$store.state.selectedFolder=event.target.value;
            }
        }
    }
</script>