mitrallex

if (Storage::disk('local')->exists('/public/' . $this->getUserDir() . '/' . $file->type . '/' . $file->name . '.' . $file->extension)) {
    if (Storage::disk('local')->delete('/public/' . $this->getUserDir() . '/' . $file->type . '/' . $file->name . '.' . $file->extension)) {
        return response()->json($file->delete());
    }
}

mitrallex

<div class="card-content">
    <div class="content">
        <p v-if="file !== editingFile" @dblclick="editFile(file)" :title="'Double click for editing filename'">
            @{{ file.name + '.' + file.extension}}
        </p>
        <input class="input" v-if="file === editingFile" v-autofocus @keyup.enter="endEditing(file)" @blur="endEditing(file)" type="text" :placeholder="file.name" v-model="file.name">
        <time datetime="2016-1-1">@{{ file.created_at }}</time>
    </div>
</div>

mitrallex

<figure class="image is-4by3" v-if="file.type == 'image'" @click="showModal(file)">
    <img  src=""  :src="'{{ asset('storage/' . Auth::user()->name . '_' . Auth::id()) }}' + '/' + file.type + '/' + file.name + '.' + file.extension" :alt="file.name">
</figure>

mitrallex

<div v-if="file.type == 'audio'">
    <figure class="image is-4by3">
        <img src="{{ asset('images/music.png') }}" alt="Audio image" id="audio_image">
    </figure>
    <audio controls>
        <source src="" :src="'{{ asset('storage/' . Auth::user()->name . '_' . Auth::id()) }}' + '/' + file.type + '/' + file.name + '.' + file.extension" :type="'audio/' + file.extension">
        Your browser does not support the audio tag.
    </audio>
</div>

mitrallex

<div v-if="file.type == 'video'" class="video_block">
    <video controls>
        <source src="" :src="'{{ asset('storage/' . Auth::user()->name . '_' . Auth::id()) }}' + '/' + file.type + '/' + file.name + '.' + file.extension" :type="'video/' + file.extension">
        Your browser does not support the video tag.
    </video>
</div>

mitrallex

<div v-if="file.type == 'document'" class="document_block">
    <figure class="image is-4by3">
        <img src="{{ asset('images/document.png') }}" alt="Audio image" id="audio_image">
    </figure>
    <a class="button is-primary" href="" :href="'{{ asset('storage/' . Auth::user()->name . '_' . Auth::id()) }}' + '/' + file.type + '/' + file.name + '.' + file.extension" target="_blank">
        <i class="fa fa-download" aria-hidden="true"></i>
        &nbsp;Download
    </a>
</div>

mitrallex

computed: {
      pages() {
          let pages = [];

          let from = this.pagination.current_page - Math.floor(this.offset / 2);

          if (from < 1) {
              from = 1;
          }

mitrallex

fetchFile(type, page) {
  this.loading = true;
  axios.get('files/' + type + '?page=' + page).then(result => {
      this.loading = false;
      this.files = result.data.data.data;
      this.pagination = result.data.pagination;
  }).catch(error => {
      console.log(error);
      this.loading = false;
  });

mitrallex

getFiles(type) {
  this.setActive(type);
  this.fetchFile(type);

  if (this.activeTab === 'video') {
      this.isVideo = true;
  } else {
      this.isVideo = false;
  }
},

mitrallex

submitForm() {
  this.formData = new FormData();
  this.formData.append('name', this.fileName);
  this.formData.append('file', this.attachment);

  axios.post('files/add', this.formData, {headers: {'Content-Type': 'multipart/form-data'}})
      .then(response => {
          this.resetForm();
          this.showNotification('File successfully upload!', true);
          this.fetchFile(this.activeTab);