How to use FormData in Rescript?

1

Hi All,
I was trying to build a custom file input that selects files using the HTML input element and upload the files using FormData in Rescript.
I was checking this below mentioned documentation as reference-

https://github.com/TheSpyder/rescript-webapi/blob/651d52f50cb6e80a48ba35b957da8cea74633b9d/src/Webapi/Webapi__FormData.res
Please look at the code under the attached link of rescript playground to look onto the code I have written-

https://rescript-lang.org/try?version=v10.1.2&code=AIJwpghgxgLgdFA9gWwA6IHZgzAUAGzBgAJkIBrMYgXmIAoBKGgPmIG9djjCS6AzAJaEAzgBpiwogDEhYYU1oAlSLDgBXSQGUYEGGDoB9FsQDaAXQaduReoMIBRECEQhxkmDIdOXC4sujwGmDauvpG1Kx8EPiSllw8xAAWEBgAJoSeYADCyRgA5lS0dGAAbtgwCqwcXPE2AhioajD2hMjlNH4qzWU4cFIuyHA6IAUwxT0VJgBEdnJTZlZcAFLCcPiIeQDMdFP1jc2t5VOie00tYG044qcHF+UAtMwAgk4QAJ5wowCqGMIQfPoAAwMOI1BJ8AYAEV0EA6-RAyGhOjgZEojEW1hI4WIEIRSIgj3hiJhcAgqFQ2FSmR2N3Olxgx2ItMOOEeLxA70+RB+fwBdGB4kYoK4WUwwkQhDWG34UJhoIAvlYrAAeZgq3HINU1bXEZU3JmpagzWRTYgwN4UgxG2amzA5FIFahsXLpMCZe35MDygD0Wp1XGVACMmjBMMQ7fgBFByE6rcx3JoIGUpPgIHlDBEYCA1GAGPLmGx-KphFn6umpomylM88rvcGYKGMH7-UGQ2GI1GY2w41AUlAwPhK-o8wWi-ASyAyzssn2B9X5bX643mzraxq-bW1fKgA

This code gives me no entries for FormData while consoling the formData variable.

I am unable to implement this. Can anyone help me with proper example.

Thanks in advance!!:slightly_smiling_face:

2

Without trying out your code, you even can’t console.log Formdata in javascript.
You can use the keys, values and entries functions to iterate over the data.

3

Hi, what you’re describing is actually standard HTML behaviour, so I’m not sure what is the custom part here. E.g. this is a standard HTML form (without React):

<form method="post" action="/send-file">
  <label for="send-file">Send a file:</label>
  <input name="file" id="send-file" type="file">
  <input type="submit" value="Submit">
  <input type="reset" value="Cancel">
</form>

It will allow you to:

  • Choose a file
  • Submit the form and send a POST /send-file request on submit
  • Cancel i.e. clear out the file selection

Internally, it uses FormData to temporarily hold the state of the form in memory before submitting it. But that detail is only needed if you want to manipulate the form data somehow before allowing it to submit, or validate it somehow.

If you can explain specifically what extra functionality you are trying to implement, maybe we can point you in the right direction.