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..
	
	
	
	
	
	
	
		
			
			
			
			
			
		
	
	
	
		
	
	
		
	
The code that is needed to work is here..
	
	
	
	
	
	
	
		
			
			
			
			
			
		
	
	
	
		
	
	
		
	
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
			
			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 do want to add to this and do an automatic resize on the image to restrict the file upload size.
Thanks in advance
Tom