lian-yue / vue-upload-component

Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter
Apache License 2.0
2.7k stars 696 forks source link

post action is not being triggered using vue 2 js and laravel app #137

Open felipeneuhauss opened 6 years ago

felipeneuhauss commented 6 years ago

I'm trying upload images, but the post action is not triggering. No error it's being displaying.

<div>
   <div class="form-group">
            <div class="upload">
                <ul>
                    <li v-for="(file, index) in pictures" :key="file.id">
                        <span>{{file.name}}</span> -
                        <span v-if="file.error">{{file.error}}</span>
                        <span v-else-if="file.success">success</span>
                        <span v-else-if="file.active">active</span>
                        <span v-else-if="file.active">active</span>
                        <span v-else></span>
                    </li>
                </ul>
                <div class="example-btn">
                    <file-upload
                            class="btn btn-primary"
                            post-action="/pictures/upload"
                            put-action="/pictures/upload"
                            extensions="gif,jpg,jpeg,png,webp"
                            accept="image/png,image/gif,image/jpeg,image/webp"
                            :multiple="true"
                            v-model="pictures"
                            @input-filter="inputFilter"
                            @input-file="inputFile"
                            ref="upload">
                        <i class="fa fa-plus"></i>
                        Selecione as imagens do destino
                    </file-upload>
                    <button type="button" class="btn btn-success" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true">
                        <i class="fa fa-arrow-up" aria-hidden="true"></i>
                        Iniciar upload
                    </button>
                    <button type="button" class="btn btn-danger"  v-else @click.prevent="$refs.upload.active = false">
                        <i class="fa fa-stop" aria-hidden="true"></i>
                        Parar upload
                    </button>
                </div>
            </div>
        </div>
</div>
</template>

<script>
  import {mask} from 'vue-the-mask';
  import 'vue2-autocomplete-js/dist/style/vue2-autocomplete.css';
  import Datepicker from 'vuejs-datepicker';
  import {VMoney} from 'v-money';

  import DateLanguages from 'vuejs-datepicker/src/utils/DateLanguages';
  import Autocomplete from 'vue2-autocomplete-js';

  import FileUpload from 'vue-upload-component';

  export default {
    directives: {
      mask, money: VMoney
    },
    components: {
      Datepicker, Autocomplete,
      FileUpload
    },
    props: ['destinations'],

    /*
     * The component's data.
     */
    data() {
      return {
        lodgingTypes: [],
        pictures: [],
        money: {
          decimal: ',',
          thousands: '.',
          prefix: 'R$ ',
          suffix: ' ',
          precision: 2,
          masked: false /* doesn't work with directive */
        },
        uploadDestinyIndex: 0,
        destiny: {name:'', description:'', lodgings: []}
      };
    },

    /**
     * Prepare the component (Vue 1.x).
     */
    ready() {
      this.prepareComponent();
    },

    /**
     * Prepare the component (Vue 2.x).
     */
    mounted() {
      this.prepareComponent();
    },

    methods: {

      inputFilter(newFile, oldFile, prevent) {
        if (newFile && !oldFile) {
          // Before adding a file
          if (/(\/|^)(Thumbs\.db|desktop\.ini|\..+)$/.test(newFile.name)) {
            return prevent()
          }
          // Filter php html js file
          if (/\.(php5?|html?|jsx?)$/i.test(newFile.name)) {
            return prevent()
          }
        }
      },
      inputFile(newFile, oldFile) {
        if (newFile && !oldFile) {
          // add
          console.log('add', newFile)
        }
        if (newFile && oldFile) {
          // update
          console.log('update', newFile)
        }
        if (!newFile && oldFile) {
          // remove
          console.log('remove', oldFile)
        }
      },
</script>
screen shot 2018-01-09 at 17 53 46

![Uploading Screen Shot 2018-01-09 at 17.53.55.png…]()

lian-yue commented 6 years ago

There is no compatibility with vue1

felipeneuhauss commented 6 years ago

But I'm using VueJS 2, even if my code seems to be on the version one. Here is my composer.json:


"devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10",
    "vue2-simplert": "^0.8.0"
  },