How to Crop image and then start the upload with nuxt js?

[TawsifKarim]

This is a really cool library. But after integrating it with my nuxt js app i am having hard time finding a solution to crop an image and then upload. Shown on the example Profile Picture Code

I have gone throw some of the documentation and its a lot to read. Here is my set up:

<client-only>
              <file-pond
                name="test"
                ref="pond"
                label-idle="Drop files here..."
                :allow-multiple="true"
                allowImagePreview="true"
                allowImageTransform="true"
                accepted-file-types="image/jpeg, image/png"
                :server="{ processFiles }"
                :files="myFiles"
                image-crop-aspect-ratio="1"
                allowImageCrop="true"
                v-on:init="handleFilePondInit"/>
            </client-only>

import vueFilePond, { setOptions } from 'vue-filepond';
  import 'filepond/dist/filepond.min.css';
  import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
  import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
  import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
  import FilePondPluginImageCrop from 'filepond-plugin-image-crop';
  import FilePondPluginImageTransform from 'filepond-plugin-image-transform';

const FilePond = vueFilePond(
    FilePondPluginFileValidateType,
    FilePondPluginImagePreview,
    FilePondPluginImageCrop,
    FilePondPluginImageTransform
  );
export default {
        name: "vue-file-pond",
      data() {
        return {
          myFiles: []
        };
      },
      methods: {
        handleFilePondInit: function() {
          console.log('FilePond has initialized');
        },
        processFiles(filename, file, metadata, load){
          load(file);
        }
      },
      components: {
        FilePond
      },
      mounted() {
        setOptions({
          server: {
            url: process.env.APP_URL + '/api/images',
            revert: null,
            process: {
              withCredentials: false,
              headers: {
                Authorization: 'Bearer ABCD'
              }
            },
          }
        });
      }
    }

[rikschennink]

It's unclear if you're after "editing" the image, that happens when clicking the button with the pencil on it, OR if you're after automatically cropping the image. Please elaborate.

[TawsifKarim]

Currently filepond starts to upload the image as soon as I select one. I want to crop it first then upload it with a button click just like the demo shown here. An example would be helpful.

[rikschennink]

set instantUpload to false?

[TawsifKarim]

Thank you that worked but the setOption in the mounted() method did not work. its sending the file to the url http://localhost:3080/file-pond.. Am I missing something?

[rikschennink]

Best to expose it like:

<template>
  <div id="app">

    <file-pond
        name="test"
        ref="pond"
        v-bind:server="myServer"
        v-bind:files="myFiles"/>

  </div>
</template>

<script>
export default {
    name: 'app',
    data: function() {
        return {
            myServer: {
                // server config...
            },
            myFiles: ['index.html']
        };
    },
    components: {
        FilePond
    }
};
</script>

[TawsifKarim]

Thank you :)

[0xdeepmehta]

Hey, I'm unable to see the edit button, even I added the edit plugin, can you share some references, it will be very helpful. I'm using nuxt 2

[rikschennink]

@DeepMhta07 The edit button only appears when the Image edit plugin is set and an editor has been loaded.