Create File for upload to Spring Controller in Javascript

Question

I have a really large String that needs to be passed via input tag in a html form from client to server. Until now I've passed it just as a javascript var like this:

document.getElementById("editorText").value = quill.getText();

whereas the upload looks like this:

<form action="/someEndpoint" method="post">
    <input class="btn btn-success btn-lg" style="margin-top: 15px;" type="submit" th:value="#{mSave}"/>
    <textarea style="visibility:hidden" id="editorText" name="editorText"></textarea>
</form>

The problem with this is that the upload does not work this way when the quill.getText() gets too large in size. I'd like to handle the upload via multipart file.

So what I need in this case is javascript code that takes the text from quill.getText(), creates a file (preferably .xml) and servers this file for upload in the html form mentioned above to a controller endpoint looking like this:

@RequestMapping(value = "/someEndpoint", method = RequestMethod.POST)
public String handleFileUpload(final Model model, @RequestParam("editorText") String editorText){

//handling stuff
}

I've tried something along the line of var xml = jQuery.parseXML(quill.getText()) but couldn't quiet get it to work. Whats the simplest way to pack the string into a .xml file for upload?

ps: quill.getText() is referring to this library

Edit 1: Changed the html input to a textfield.

Answer 1

In the code that you have posted, I can see that you are assigning the quill text to a input type text. If you can see the post here, there is a maximum limit for a input type field.

Whereas, A text area can hold an unlimited number of characters. So, can you try creating a hidden textarea <textarea style="visibility:hidden" id="quillText"></textarea> and assign it a value of quill.getText()?

It should give you a complete text on the server side.

EDIT:

The following code worked for me.

UI:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <link href="https://cdn.quilljs.com/1.1.6/quill.snow.css" rel="stylesheet">
  <script src="https://cdn.quilljs.com/1.1.6/quill.js"></script>

<form action="submitQuill" method="post">
  <!-- Create the editor container -->
  <input type='submit' onclick="javascript:submitForm()"/>
  <div id="editor">
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text</p>
    <p><br></p>
  </div>
  <textarea style="visibility:hidden" id="editorText" name="editorText"></textarea>

</form>
  <!-- Initialize Quill editor -->
  <script>
    var quill = new Quill('#editor', {
      theme: 'snow'
    });

    function submitForm(){
        var quillText = quill.container.firstChild.innerHTML;
        $("textarea#editorText").val(quillText);
        document.form.submit();
    }

  </script>

On server side :

@RequestMapping(value="/submitQuill")
    public ModelAndView submitQuill(@RequestParam String editorText){
        System.out.println("Editor Text = "+editorText);
        return new ModelAndView("quill");
    }

Output on Console:

Editor Text = <p>Hello World!</p><p>Some initial <strong>bold</strong> text</p><
p><br></p>