Cant get base64 string

[Pixelairport]

After six hours testing, i dont get it work so i try to ask here. I use vue version of filepond with encoding. After event addfile is fired i want to get the base64 string, but i just don get it. This is my code:

pond.addEventListener('FilePond:addfile', function(e) {
  console.log(e);
});

The base64 string is found in my html. But how do i get the code to use it later when i send the form? Hope someone can help me.

[rikschennink]

Hi,

If you want to send it with the form automatically you don't have to do anything, it's added to a hidden input and it'll be sent along with the parent form when posted ( classic form submit ).

If you're planning to send the form by building a FormData object and using XMLHttpRequest you don't need the base64 encoded files and you can simply add the file objects ( contained in the FilePond items ) to your FormData object.

[Pixelairport]

Thx @rikschennink that helps a lot. On my submit function i now have

console.log(this.$refs.pond.getFiles());

and I think this could work, if i would not get this error:

Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.remoteFunction (<anonymous>:2:14)

I use Laravel with webpack. Should i load filepond another way or is there a short solution for this?

[rikschennink]

@Pixelairport This should work, I'm not sure why it throws this error, I have some time to look at this on Tuesday.

[Pixelairport]

thx for your help. i will also have a look at this tomorrow. if i find something i will write again. maybe its a problem with strict mode ... not sure. just found a few things at google, but still no solution.

[Pixelairport]

I setup a clean laravel (with cartalyst platform) and create a vue component for the filepond. The problem still exists. I have no idea what i can do now. Maybe someone has a tip? This is my code:

<template>
    <div id="app">

        <file-pond
                name="test"
                ref="pond"
                label-idle="Drop files here..."
                allow-multiple="true"
                accepted-file-types="image/jpeg, image/png"
                v-on:init="handleFilePondInit"/>

        <a @click="getIt()">CLICKER</a>
    </div>
</template>

<script>
    // Import Vue FilePond
    import vueFilePond from 'vue-filepond';

    // Import FilePond styles
    import 'filepond/dist/filepond.min.css';

    // Create component
    const FilePond = vueFilePond();

    export default {
        methods: {
            handleFilePondInit: function() {
                console.log('FilePond has initialized');

                // FilePond instance methods are available on `this.$refs.pond`
            },
            getIt: function () {
                console.log(this.$refs.pond.getFiles());
            }
        },
        components: {
            FilePond
        }
    };
</script>

The error i get in my debugger console is:

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    at Function.remoteFunction (<anonymous>:2:14)

Here is a screenshot: SCREENSHOT

[rikschennink]

It's very odd, tried to reproduce this but when I run the exact code with Vue-CLI it works perfectly well.

None of the properties ( .caller, .callee or .arguments ) are accessed in FilePond's code.

I've found this issue which might be related: https://github.com/VincentGarreau/particles.js/issues/123

Can you create a public test case? Happy to take a look.

[larizzatg]

In my case, I want to construct my own form with the base64 strings as per a requirement. So I create a wrapper around vue filepond, you can see it and modify it for your own purpose.

How to use it

<file-upload  label="Photos"  v-model="files"></file-upload>

FileUpload.vue

<template>
  <div class="form-group">
    <label v-if="label">{{ label }}</label>
    <file-pond
      :name="uniqueId"
      :ref="uniqueId"
      maxFileSize="1MB"
      imagePreviewMaxFileSize="1MB"
      imagePreviewHeight="40"
      :accepted-file-types="acceptedFileTypes"
      :allowMultiple="allowMultiple"
      :allowImageTransform="false"
      @addfile="updateFiles"
    />
  </div>
</template>

<script>
import { generateId } from '~/utilities/global';

export default {
  name: 'FileUpload',
  props: {
    value: Array,
    label: String,
    allowMultiple: {
      type: Boolean,
      default: true,
    },
    acceptedFileTypes: {
      type: Array,
      default: () => [
        'image/png',
        'image/jpeg',
        'application/pdf',
      ],
    },
  },
  data() {
    return {
      uniqueId: '',
    };
  },
  created() {
    this.uniqueId = `file-upload-${generateId()}`;
  },
  methods: {
    getFiles() {
      const parent = this.$refs[this.uniqueId];
      if (parent) {
        const inputs = document.getElementsByName(this.uniqueId);
        const arrayInputs = inputs ? Array.from(inputs) : [];
        return arrayInputs.map(input => JSON.parse(input.value));
      }
      return [];
    },
    updateFiles(error) {
      if (!error) {
        this.$emit('input', this.getFiles());
      }
    },
  },
};
</script>

[Pixelairport]

Thx. But when i output the input.value the value is empty...

... validity:ValidityState {valueMissing: false, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …} value:"" ...

And when i have a look with console.log at the proto Array i also get in every function which is show the error:

Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.remoteFunction (:2:14)

[Pixelairport]

Thx for your help. I switched to https://github.com/rowanwins/vue-dropzone. I think its a setting problem with my environment. But it cant spend more time with the problem. thx for helping.

[rikschennink]

@Pixelairport Alright, glad to hear you found another fitting solution for your project!

If you can spare the time, could you point me in the right direction so I can replicate your project set up on my dev machine? Maybe there's an article you followed to set up Vue with Webpack?