Not sure where to say this. I am trying to upload a file in a form. But it doesn’t work, the dropzone is empty. Rest of the form works perfectly. When I look in the console I get the following message:
Uncaught TypeError: Cannot read property 'trim' of undefined
at D.addedfile (form.vendor.js:5)
at D.value (form.vendor.js:5)
at D.value (form.vendor.js:5)
at HTMLInputElement.<anonymous> (form.vendor.js:5)
Part of the frontmatter of the form:
- name: bestand
type: file
multiple: false
autofocus: false
destination: 'user/data/files'
accept:
- application/vnd.openxmlformats-officedocument.spreadsheetml.sheet/*
- application/vnd.ms-excel/*
- application/msword/*
- application/vnd.openxmlformats-officedocument.wordprocessingml.document/*
- application/pdf/*
- text/plain/*
underline: true
process:
- email:
from: "{{ config.plugins.email.from }}"
to:
- "{{ config.plugins.email.from }}"
- "{{ form.value.email }}"
subject: "[Aanmelding webinar] {{ form.value.name|e }}"
body: "{% include 'forms/data.html.twig' %}"
content_type: 'text/html'
attachments:
- bestand
- save:
fileprefix: webinar-aanmelding-
dateformat: Ymd-His-u
extension: csv
body: "{% include 'forms/data.txt.twig' %}"
- message: Merci! Wij nemen zo spoedig mogelijk contact op
- display: thank-you
- type: checkboxes
use: keys
Hope somebody can help…
@TonHaarmans, Your frontmatter looks off. Would you mind publishing a small but entire form definition that throws the error?
It’s quite a form. Here is the frontmatter:
---
title: 'Webinar form'
form:
name: webinarform
action: /
fields:
- name: webinar
id: data-cursus
label: Webinar
classes: form-control form-control-lg
autocomplete: on
type: text
readonly: true
default: ''
- name: opleidingscode
id: opleidingscode
label: Opleidingscode
autocomplete: on
type: text
readonly: true
default: ''
- name: sessiecode
id: sessiecode
label: Sessiecode
autocomplete: on
type: text
readonly: true
default: ''
- name: prijs
id: prijs
label: Prijs pp, ex BTW
autocomplete: on
type: text
readonly: true
default: ''
- name: datum
id: datum
label: Datum
autocomplete: on
type: text
readonly: true
default: ''
- name: tijd
id: tijd
label: Aanvangstijd
autocomplete: on
type: text
readonly: true
default: ''
- name: test
type: spacer
underline: true
- name: bedrijfsnaam
id: bedrijfsnaam
label: Bedrijfsnaam
placeholder: Bedrijfsnaam
autocomplete: on
type: text
required: true
- name: email
id: email
label: Email
placeholder: Uw emailadres
type: email
validate:
rule: email
required: true
- name: Telefoon
id: telefoon
label: Telefoon
placeholder: Uw telefoonnummer
type: text
- name: Adres
id: adres
label: Adres
placeholder: Uw adres
type: text
- name: gemeente
id: gemeente
label: Gemeente / Plaats
placeholder: Uw gemeente / plaats
type: text
- name: url
id: url
label: Website
placeholder: Website adres
type: text
- name: ruimte
type: spacer
underline: true
- name: subsidie-boxes
type: radio
label: Aanmelding KMO-portefeuille subsidie
default:
- option1
options:
option1: niet van toepassing
option2: aangevraagd
option3: voornemens aan te vragen
- name: space0
type: spacer
- name: contact_subsidie
type: checkbox
label: "Neem contact met mij op voor meer informatie over subsidie-mogelijkheden"
- name: space1
type: spacer
underline: true
- name: message
label: Bericht
classes: form-control form-control-lg
size: long
placeholder: Uw bericht
type: textarea
validate:
required: true
- name: space2
type: spacer
underline: true
- name: deelnemer_naam1
id: deelnemer_naam1
label: Deelnemer 1
placeholder: Naam deelnemer
type: text
- name: deelnemer_voornaam1
id: deelnemer_voornaam1
label: Voornaam
placeholder: Voornaam deelnemer
type: text
- name: deelnemer_email1
id: deelnemer_email1
label: Email
placeholder: Email deelnemer
type: email
- name: space3
type: spacer
underline: true
- name: deelnemer_naam2
id: deelnemer_naam2
label: Deelnemer 2
placeholder: Naam deelnemer
type: text
- name: deelnemer_voornaam2
id: deelnemer_voornaam2
label: Voornaam
placeholder: Voornaam deelnemer
type: text
- name: deelnemer_email2
id: deelnemer_email2
label: Email
placeholder: Email deelnemer
type: email
- name: space4
type: spacer
underline: true
- name: deelnemer_naam3
id: deelnemer_naam3
label: Deelnemer 3
placeholder: Naam deelnemer
type: text
- name: deelnemer_voornaam3
id: deelnemer_voornaam3
label: Voornaam
placeholder: Voornaam deelnemer
type: text
- name: deelnemer_email3
id: deelnemer_email3
label: Email
placeholder: Email deelnemer
type: email
- name: space5
type: spacer
underline: true
- name: deelnemer_naam4
id: deelnemer_naam4
label: Deelnemer 4
placeholder: Naam deelnemer
type: text
- name: deelnemer_voornaam4
id: deelnemer_voornaam4
label: Voornaam
placeholder: Voornaam deelnemer
type: text
- name: deelnemer_email4
id: deelnemer_email4
label: Email
placeholder: Email deelnemer
type: email
- name: space6
type: spacer
underline: true
- name: meer_deelnemers
type: spacer
text: Bij meer dan vier deelnemers gelieve een bestand (Excel, Word, PDF, TXT) op te sturen met namen, voornamen en emailadressen van de deelnemers.
- name: bestand
type: file
multiple: false
autofocus: false
destination: 'user/data/files'
accept:
- application/vnd.openxmlformats-officedocument.spreadsheetml.sheet/*
- application/vnd.ms-excel/*
- application/msword/*
- application/vnd.openxmlformats-officedocument.wordprocessingml.document/*
- application/pdf/*
- text/plain/*
underline: true
buttons:
- type: submit
value: Aanmelden
process:
- email:
from: "{{ config.plugins.email.from }}"
to:
- "{{ config.plugins.email.from }}"
- "{{ form.value.email }}"
subject: "[Aanmelding webinar] {{ form.value.name|e }}"
body: "{% include 'forms/data.html.twig' %}"
content_type: 'text/html'
attachments:
- bestand
- save:
fileprefix: webinar-aanmelding-
dateformat: Ymd-His-u
extension: csv
body: "{% include 'forms/data.txt.twig' %}"
- message: Merci! Wij nemen zo spoedig mogelijk contact op
- display: thank-you
- type: checkboxes
use: keys
---
Here is the URL: OneNote | Werken in een duidelijke structuur | Bit By Bit Software Coaching
Click on the button “inschrijven” and the form will appear…
Add a file in the dropzone at the bottom (.txt is allowed)
@TonHaarmans, I cannot reproduce the issue.
Btw …
- the filepicker on your site doesn’t work as expected. It should display selected files and files which are not allowed according the
accept field of the filepicker.
- According the docs, the accept field of the filepicker should be a list of file extensions.
accept A list of accepted file extensions
Suggestions:
- Try deleting and reinstalling the form plugin
- Try clearing cache
I did your suggestions, but can’t get it to work. In the console same error message keeps appearing…