B4J Question Sending an image from a html page

TomDuncan

Active Member
Licensed User
Longtime User
Hi All,
I have up and going the file upload using websockets, no worries.
I have a textarea that is using Quilljs (html editor)
It has the ability to upload an image to the server then not use a base64 image but a link to the file on the server.
The working code from B4J is..
B4X:
        <form id="form1" action="filehelper" method="post" enctype="multipart/form-data">
        <label for="file">Choose file (max size 1M):</label>
        <input type="file" name="file1">
        <input type="submit" name="submit" value="Submit">
     </form>

The code that is needed to work is here..

HTML:
   function selectLocalImage() {

      const input = document.createElement('input');

      input.setAttribute('type', 'file');

      input.click();



      // Listen upload local image and save to server

      input.onchange = () => {

        const file = input.files[0];



        // file type is only image.

        if (/^image\//.test(file.type)) {

          saveToServer(file);

        } else {

          console.warn('You could only upload images.');

        }

      };

    }



    /**

     * Step2. save to server

     *

     * @param {File} file

     */

    function saveToServer(file) {

      const fd = new FormData();

      fd.append('image', file);



      const xhr = new XMLHttpRequest();

      xhr.open('POST', '', true);

      xhr.onload = () => {

        if (xhr.status === 200) {

          // this is callback data: url

          const url = document.getElementById('result').value;

          insertToEditor(url);

        }

      };

      xhr.send(fd);

    }



    /**

     * Step3. insert image url to rich editor.

     *

     * @param {string} url

     */

    function insertToEditor(url) {

      // push image url to rich editor.

      const range = editor.getSelection();

      editor.insertEmbed(range.index, 'image', url);

    }



    // quill editor add image handler

    editor.getModule('toolbar').addHandler('image', () => {

      selectLocalImage();

    });
I am having trouble setting up the POST routine.
I do want to add to this and do an automatic resize on the image to restrict the file upload size.

Thanks in advance
Tom
 
Top