Remove file

[iahammed]

Dear Sir, Thanks for sharing such a nice project, Sorry to bother you that much. I am stuck to refer the file name to pass through the axios call. my api is working perfect it require filename to handle. but i fail to pass it. I enclosed screenshot and my vue file for you concern.

Your help will be appreciated

Warm regards Iftakher Ahammed

<template>
  <div id="app">

    <dropzone 
      ref="PlaceAds"
      id="myVueDropzone"
      url="/upload"
      method='POST'
      acceptedFileTypes='.jpg,.png'
      v-on:vdropzone-success="showSuccess"
      v-on:vdropzone-removed-file="removeThisFile"
      v-on:vdropzone-mounted="vdropzoneMount"
      :preview-template="template"

      >
      <input type="hidden" name="token" value = "xxx">
    </dropzone>

  </div>
</template>

<script>
  import Dropzone from 'vue2-dropzone'
  export default {
    name: 'MainApp',
    components: {
      Dropzone
    },
    data() {
      return {
        removeLink : true,
        fSize : 1,
      }
    },

    methods: {

      showSuccess (file) {

        this.$toaster.success( File + ' : File uploaded')

      },

      vdropzoneMount(){

          let self = this
          var vue = this
            axios.get('/upload')
              .then(function (response) {

                response.data.forEach(function(image, index) {

                  vue.$refs.PlaceAds.manuallyAddFile({ 
                          name: image.filename , size: 2222 
                        }, image.filename, 
                        null,
                        null, 
                        {
                          dontSubstractMaxFiles: false,
                          addToFiles: true
                        }
                      )

                    })

              })
              .catch(function (error) {
                  console.log(error);
              })
      },

      removeThisFile (file) {

        let FileName = file.filename // (I think here is the problem )

        let self = this

        self.$toaster.success( FileName + ' : requested to delete')

        axios.post('/upload/delete', {
          id: FileName
        })
        .then(function (response) {
          console.log(response);

          self.$toaster.success( response.data + ' : ' +response.status + ' : File Removed')

        })
        .catch(function (error) {
          console.log(error);
        });

      },

      template () {
          return `
                  <div class="dz-preview dz-file-preview">
                      <div class="dz-image" style="width: 100px; height: 100px">
                          <img data-dz-thumbnail /></div>
                      <div class="dz-details">
                      </div>
                      <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                      <div class="dz-error-message"><span data-dz-errormessage></span></div>
                      <div class="dz-success-mark"><i class="fa fa-check"></i></div>
                      <div class="dz-error-mark"><i class="fa fa-close"></i></div>
                  </div>
              `;
      }
    }
  }
</script>

[rowanwins]

It should be

  removeThisFile (file) {
        let FileName = file.name
        ....
}

If in doubt console.log(file) or use the chrome developer tools to see what the file object looks like

[iahammed]

Thanks boss you save my life one more issue how can I resolve GET http://gadgado-spa.dev/undefined 404 (Not Found) where is the request from?

[vrajroham]

@iahammed Have you installed any extension in your browser? Many users claimed the same issue. We really didn't found anything related to this in component.

[rowanwins]

It's a bit hard to tell sorry @iahammed , when does the error appear in the console? It may be related to manually adding the files I think and an issue around cross-origin requests trying to generate a thumbnail...

[iahammed]

Thanks for your nice repo, you are right error in manually adding the files if any file exist in server, any way my project is working.

Wishing every success....

[bsor-dev]

@iahammed Hi, how about to get the hashed name of file ?

removeThisFile (file) { let FileName = file.hashName .... }

I have duplicated files under my folder how to identify if I only want to delete one of those files.

[alhavizd]

@rosnaib11 hi, i tried to use removeFile successfully to delete, but when i moved to a different route. removeFile returns to action

[Hatteron]

@rosnaib11 hi, i tried to use removeFile successfully to delete, but when i moved to a different route. removeFile returns to action

I have the same problem.

[rowanwins]

Hi @Hatteron

Could you please open a new issue with a snippet of how you are using the component, it makes it much easier for maintainers to track

Thanks