# Sync

The sync API is intented for reactive UI intengration.

Once instantiated, state such as the current working directory (CWD), items in the CWD, lodaing state, uploads/creates/updates and delets and auto binded.

import { Media } from '@moirei/laravel-media-library-client'

const media = new Media();

const sync = media.sync

Main interfaces

cwd: the current working directory. If updated, the files is automatically fetched and updated
files: the files in the cwd. Automatically updated
files[i].loading: set to true when updating/moving/delting an item
loading: set to true when fetching files

# Files


// IF location is not given in options, the cwd is used
sync.upload(upload, options)

// When updated, its option in `sync.files` is updated
sync.update(file, input)

// Added to `sync.files` if location is cwd and removed otherwise
sync.move(file, location)

// Removed from cwd if file is in `sync.files`
sync.delete(file, options)

# Folders


// IF location is not given in options, the cwd is used
sync.folder.create('My Folder', options)

// When updated, its option in `sync.files` is updated
sync.folder.update(folder, input)

// Added to `sync.files` if location is cwd and removed otherwise
sync.folder.move(folder, location)

// Removed from cwd if folder is in `sync.files`
sync.folder.delete(folder, options)

# Vue Example

<template>
  <div>
    <v-text-field label="CWD" v-model="media.cwd" />

    <div v-if="media.loading">
      Loading Library...
    </div>
    <div v-else>
      <div v-for="item in media.files" :key="item.id">
        <div v-if="item.loading">
          Loading...
        </div>
        <div v-else>
          <h2>{{ item.name }}</h2>
          <small>Type: {{ item.type }}</small>
          <p>
            <button @click="share">Share</button>
            <button @click="rename(item)">Rename</button>
            <button @click="del(item)">Delete</button>
          </p>
        </div>
      </div>
    </div>

    <button @click="openUpload">Upload</button>
    <input ref="file" type="file" hidden multiple @change="upload" />
  </div>
</template>

<script>
// import { Media } from '@moirei/laravel-media-library-client'
import { Media } from './../../build/index'

const media = new Media({
  baseURL: 'http://127.0.0.1:8000/media-library',
  forceDeletes: true,
})

export default {
  data: () => ({
    media: media.sync,
  }),
  methods: {
    openUpload() {
      this.$refs.file.click()
    },
    async upload({ target: { files = [] } }){
      return this.media.upload(files[0])
    },
    async share(item){
      const options = {
        public: false,
        access_emails: [
          'augustusokoye@moirei.com'
        ],
        access_keys: [
          'moirei'
        ]
      }
      if(item.type == 'folder'){
        const { url } = await media.folder.share(item, options)
        console.log('Shareable link', url)
        alert(url)
      }else{
        const { url } = await media.share(item, options)
        console.log('Shareable link', url)
        alert(url)
      }
    },
    move(item){
      if(item.type == 'folder'){
        this.media.folder.move(item, 'Products')
        // this.media.folder.move(item, '/')
      }else{
        this.media.move(item, 'Products')
        // this.media.move(item, '/')
      }
      this.media.fresh()
    },
    rename(item){
      if(item.type == 'folder'){
        this.media.folder.update(item, {
          name: 'Updated Folder Name'
        })
      }else{
        this.media.update(item, {
          name: 'Updated File Name'
        })
      }
    },
    del(item){
      if(item.type == 'folder'){
        this.media.folder.delete(item)
      }else{
        this.media.delete(item)
      }
    },
  }
}
</script>

← Attachments