question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Handle form containing files and text

See original GitHub issue

I have a simple form with a text input and multiple file input.

<form action="/posts" method="post" enctype="multipart/form-data">
  <input name="title"/>
  <input type="file" name="file" multiple/>
  <button>Post</button>
</form>

The problem is that I can’t get the value of "title" both from ctx.uploadedFiles() (which understandably returns only files) and from ctx.formParam()(which stopped returning data when I switched content-type to multipart). Of course, I can parse the request using FileUpload directly, but maybe there is already a simpler way to get text values?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
leveluptorcommented, Feb 25, 2018

sorry for the delay, it’s done, will push PR today when i get back to the computer

On Sat, Feb 24, 2018 at 2:03 AM, David notifications@github.com wrote:

@leveluptor https://github.com/leveluptor are you still working on this?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tipsy/javalin/issues/124#issuecomment-368163866, or mute the thread https://github.com/notifications/unsubscribe-auth/ARXlStxQsPvVgd-D4-AAanUPTzFbisgTks5tX0PZgaJpZM4R_F6F .

1reaction
leveluptorcommented, Feb 12, 2018

I’ll describe how I see these two scenarios from a developer’s point of view.

  1. Upload files: All uploaded files are processed together. E.g. “save all images to the disk”.

  2. Upload both files and text fields: All uploaded files are processed together, text fields are processed separately from files. E.g. “save all images to the disk, extract post title and post text from text fields, write title and text to the database”.

Which means that we need following public “methods”:

  • “give me all files”
  • “give me all form fields and then let me access separately all files and all text fields”

Restrictions:

  • No changes in existing public API - can’t touch Context#uploadedFiles or UploadUtil#getUploadedFiles
  • No changes in existing logic - can’t make Context#formParamMap return parsed multipart form params instead of empty list

If it’s OK to keep things as simple as they are now, I can add Context#multipartFormFields (not the best name) which will act similar to UploadUtil#getUploadedFiles.

However, if client code calls “give me all files” and then “give me all text fields”, the form will be parsed twice. If we want to avoid this (and also group the closely related methods together), everything becomes a bit more complicated:

  • Introduce one more entity, e.g. MultipartForm with two methods: getUploadedFiles : List<UploadedFile> and getTextFields : Map<String, Array<String>>
  • Introduce new method: Context#multipartForm : MultipartForm, which parses the whole form and fills MultipartForm with all files and text fields
  • For scenario 1, client code calls (as before)
 //delegates to ctx.multipartForm().getUploadedFiles(name)
  val files = ctx.uploadedFiles(name)
  • For scenario 2, client code calls
  val multipartForm = ctx.multipartForm()
  val files = multipartForm.getUploadedFiles(name)
  val fields = multipartForm.getTextFields()

Honestly I’m not a fan of both these solutions. The first one looks clunky for me and the second one creates multiple ways to do the same thing.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to solve <form> that includes file upload and other text ...
You'll need the enctype attribute if you want the file upload to work. FYI, a form can contain every field type, including file...
Read more >
Sending form data - Learn web development | MDN
Sending files with HTML forms is a special case. Files are binary data — or considered as such — whereas all other data...
Read more >
Handle form containing files and text · Issue #124 - GitHub
I have a simple form with a text input and multiple file input. ... The problem is that I can't get the value...
Read more >
How to Use a Simple Form Submit with Files in React
In your App.js file, create a basic form that with a name field and a file input. ... Now, add state in the...
Read more >
Forms in HTML documents - W3C
An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.) ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found