I’ve added an option to upload file in contact page. I’m able to drag or click on the upload box to select a file to upload. However, after submit , the upload button is gone. Not able to drag file or click on the box to search for a file.
The first submission went through. I received an email & the file is in its folder. I’m not by pc atm. The reset: true in process is not set since that causes issues
Can you post the markdown code for the page where you have the contact form?
This is partial codes that pertains to the file upload.
modular_alt.md
form:
name: email/inquiry
action: /contact
fields:
name:
id: name
label: Name
classes: 'form-control form-control-lg'
placeholder: 'Enter your name'
autocomplete: 'on'
type: text
validate:
required: true
email:
id: email
classes: 'form-control form-control-lg'
label: Email
placeholder: 'Enter your email address'
type: email
validate:
rule: email
pattern: "^\w([\w\.+-]*[\w-])?@([\w-]+\.)+[a-z]{2,5}$"
required: true
uploads:
type: file
label: Resume
destination: 'user/data/email/job/uploads'
multiple: true
autofocus: false
limit: 10
accept:
- image/*
- application/x-pdf
- application/pdf
- .xlsm
- .xlsx
- . docx
- .doc
message:
label: Message
classes: 'form-control form-control-lg'
size: long
placeholder: 'Enter your message'
type: textarea
validate:
required: true
captcha:
type: turnstile
theme: light
buttons:
submit:
type: submit
value: Submit
classes: 'btn btn-primary btn-block'
reset:
type: reset
value: Reset
classes: 'btn btn-primary btn-block'
process:
turnstile: true
upload: true
email:
from: '{{ config.plugins.email.from }}'
to:
- '{{ config.plugins.email.from }}'
subject: '[Inquiry] {{ form.value.name|e }}'
body: "{% include 'forms/data.html.twig' %}"
save:
fileprefix: 'inquiry-[{{ form.value.name|e }}]-'
dateformat: Ymd-His-u
extension: txt
body: "{% include 'forms/data.txt.twig' %}"
message: 'Your email was sent successfully.'
display: thank-you-inquiry
This is under chrome developer tool:
<div class="form-input-wrapper dropzone files-upload form-input-file " data-grav-file-settings="{"name":"uploads","paramName":"data[uploads][]","limit":10,"filesize":2,"accept":["image\/*","application\/x-pdf","application\/pdf",".xlsm",".xlsx",". docx",".doc"],"resolution":null,"resizeWidth":null,"resizeHeight":null,"resizeQuality":null}" data-dropzone-options="null" data-file-field-name="uploads" data-file-url-add="/contact.json/task:file-upload" data-file-url-remove="/contact.json/task:file-remove">
<input type="file" multiple="multiple" accept="image/*,application/x-pdf,application/pdf,.xlsm,.xlsx,. docx,.doc" class=" ">
<input data-grav-field="hidden" data-grav-disabled="false" type="hidden" class="input" name="data[_json][uploads]" value="[]">
</div>
You have an extra space in docx extension, before the dot
Yes, I did noticed that,. Fix it, but still acts the same way.
Based on your screenshot, I’ll assume the field has some JS processing on load. I’ll also assume it’s an XHR form. I’m guessing JS does nothing after form is submitted and DOM rendered
Really stumped as to why it does not work 100%. Disabling the form plugin and enabling again brings back the dropzone. From there I am able to create an email with an attachment. The file is saved inside the tmp folder and I received an email. After that the dropzone disappears.
I don’t event have to create email to make the dropzone disappear. After re enabling the form, hitting the refresh browser button toggles off the dropzone.
Any reason you’re not using a normal file input?
I was following the cookbook example and read other posts using the same format. Figure this is the correct steps to take. I am not sure what is the normal file input is. Using the delivernext theme as a starting point.
