Submitting Picture to Backend through Invisible Javascript Form

Question

I created a button to upload a picture file to the backend using a behind the scenes JS form. I do have the functionality of clicking the picture button opening a form to upload pictures. I tried it with a cat.jpg found here. I am using flask on the backend which checks that it is an approved type and then uploads it to a static folder. I added a simple print statement to see that the method is called, which it is not.

It seems my issue is with the addEventListener submit function. It does not seem to get called. I am assuming that because I did not make a submit button with the form, that is why it is not being called. However, the input raises a computer naive, file uploading that has its own submit, so I feel like the submit function should be correctly called in this case. Can I get any pointers, I am pretty new to JS, and Ajax!

My JS Code:

document.getElementById('button-picture').addEventListener('click', function() {

    // Create a form to upload the picture behind the scenes
    var picture_form = document.createElement('form');
    picture_form.setAttribute('id', 'image_upload_form');
    picture_form.setAttribute('enctype', 'multipart/form-data');
    picture_form.setAttribute('method', 'POST');
    var input_tag = document.createElement('input');
    input_tag.setAttribute('type', 'file');
    input_tag.setAttribute('id', 'file_upload');
    input_tag.setAttribute('name', 'files');
    input_tag.setAttribute('multiple', true);
    picture_form.append(input_tag);

    // Upload the picture to the backend when it is submitted.
    picture_form.addEventListener("submit", function(e) {
      // Do I need this?
      e.preventDefault();
      var request = new XMLHttpRequest();
      request.open('POST', '/upload-images', true);
      request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
      request.setRequestHeader('ProcessData', false)
      var csrf_token = "{{ csrf_token() }}";
      request.setRequestHeader('X-CSRFToken', csrf_token);
      var form_data = new FormData(picture_form.input.files);
      request.send(form_data);
    });
    input_tag.click()


    // Add markup Code to display it.

}, false);

My backend code looks what is provided in this SO question. Also, updated code to reflect this SO question to no avail.

---

update**, changed code:

    // Create a form to upload the picture behind the scenes
    var picture_form = document.createElement('form');
    picture_form.setAttribute('id', 'image_upload_form');
    picture_form.setAttribute('enctype', 'multipart/form-data');
    picture_form.setAttribute('method', 'POST');
    var input_tag = document.createElement('input');
    input_tag.setAttribute('type', 'file');
    input_tag.setAttribute('id', 'file_upload');
    input_tag.setAttribute('name', 'files');
    input_tag.setAttribute('multiple', true);
    picture_form.append(input_tag);
    var submit_event = new Event('submit');
    picture_form.dispatchEvent(submit_event);

    // Upload the picture to the backend when it is submitted.
    picture_form.addEventListener("submit", function(e) {
      alert("Hello");
      // Do I need this?
      // e.preventDefault();
      var request = new XMLHttpRequest();
      request.open('POST', '/upload_images', true);
      var csrf_token = "{{ csrf_token() }}";
      request.setRequestHeader('X-CSRFToken', csrf_token);
      var form_data = new FormData(picture_form);
      request.send(form_data);
    });
    input_tag.click()

Edit 2:

Answer 1

To manually submit a form you would use the HTMLFormElement.submit() method. But this will not cause the form element to fire the submit event.

In this case you'll need to create an Event object and dispatch it on your form. This goes as follows.

var picture_form = document.createElement('form');
...
var submitEvent = new Event('submit');
picture_form.dispatchEvent(submitEvent);

This will trigger the submit event and will cause the callback on your event listener to be called.

But your code will break at the following line:

var form_data = new FormData(picture_form.input.files);

The FormData constructor takes in a <form> element as argument. Not a single input, as it is a collection of key-value pairs extracted from the <form> element. Change the line to the following:

var form_data = new FormData(picture_form);

Also the Content-Type header you include should be removed. The FormData object will automatically set the correct headers when being send with XMLHTTPRequest.

Edit Since you are only using the file select prompt to let the users select their images, you'll need to listen for a different event. Specifically the change event.

picture_form.addEventListener('change', function() {
  ...
});

This event will fire whenever the value of the input has been changed. In the case of the <input type="file"> element, that occurs when the user has selected the files.

No need for the new Event('submit') and dispatchEvent methods here for the change event will be called by the user and don't have to be manually dispatched.