Home
Support Forums

Trying to upload file(picture) by using netlify forms but I can't access it once it gets uploaded

So I’m trying to upload a file(picture) by using netlify forms and it maybe does get uploaded?
But but I cannot see the uploaded file.
I can only see this:

As you can see the link to the actual picture is missing.
This doesn’t only happen with pictures it happens with every kind of file.

I’m trying to do this in react.

  • Netlify site name: https://sleepy-payne-59c675.netlify.app/
    Code for js file:
    <form name="contact" action="/contact" method="post"> <input tpye="hidden" name="form-name" value="contact"></input> <input required type="file" name="file"/> <button type="submit">Poašalji</button>

code for HTML file:

<form name="contact"   data-netlify="true" hidden>
 <input required type="file" name="file"/>

hey there, maybe this thread is of interest?

if you search for “file uploads” you might find some examples you can follow along with!

Hello, I’m struggling with the same problem. The file is not accessible/visible in the Forms interface, other data from the submission comes through. I tried to implement this example repo.

My form:

<form
  name="unique"
  method="post"
  id="unique"
  data-netlify="true"
  data-netlify-honeypot="bot-field"
  action="/thank-you/"
>
<input type="hidden" name="form-name" value="unique" />
  <input
    type="text"
    name="name"
    value={formData.name}
    onChange={handleChange}
  />
<input type="file" name="file1" onChange={handleFileInput} />

</form>

Change & submit handlers:

const handleChange = e => {
    const updateKey = e.target.name
    const updateValue =
      e.target.type === "file" ? e.target.files[0] : e.target.value
    setFormData({ ...formData, [updateKey]: updateValue })
  }

const submitForm = e => {
  let data = new FormData()
  data.append("form-name", "unique")
  Object.keys(formData).forEach(k => {
    data.append(k, formData[k])
  })

  let msgBody = new URLSearchParams(formData).toString()
  fetch("/some-url", {
    method: "POST",
    headers: { "Content-Type": "multipart/form-data" },
    body: msgBody,
  })
    .then(() => {
      console.log("Form successfully submitted")
    })
    .catch(error => alert(error))
}

Many thanks in advance for any suggestions.