0

I was struggling with a file upload I want to save via a PUT request. I updated the question with the solution.

I have a form that allows for multiple images to be uploaded in different fields, but also other fields with strings:

enter image description here

I loop over all fields in order to collect the information in a JSON, then push them towards my API:

keys is a dict with the names of the keys for the JSON (API checks for those keys), for example: name|STR, price|FLOAT, ppic|IMG.

$('#checkButton').on('click', function( event ) {
    let form = document.querySelector('#productForm');
    let nbr = document.querySelector('#productdata').getAttribute("pid")
    let return_dict = {"number": nbr};

    const pendings = ["name", "pic"].map(async function ( key ) {
        return_dict["name"] = form.elements[0].value;
        return_dict["pic"] = await img_2_b64(form.elements[1]);
    });
    Promise.all(pendings).then((values) => {
        write_2_DB_with_ajax_call ( return_dict )
    });
});

If the key identifies the field as IMG I want to convert it to base64 and save it - this is my solution:

function img_2_b64( element ) {
    return new Promise((resolve, reject) => {
        let file = element.files[0];
        let reader = new FileReader();
        reader.onloadend = function(e) {
            resolve(e.target.result);
        };
        reader.onerror = function() {
            reject();
        };
    reader.readAsDataURL(file);
    });
xtlc
  • 1,070
  • 1
  • 15
  • 41
  • I think you should really consider to switch to uploading multipart upload (using formdata) or some other binary protocol, base64 + json is a bad idea – Endless May 26 '21 at 19:48
  • why is base64 and json a bad idea? can you elaborate, please. – xtlc May 26 '21 at 20:03
  • check: https://stackoverflow.com/a/1443240/4225972 – xtlc May 26 '21 at 20:08
  • 1, waste time encoding/decoding. 2, larger in size. 3, bad format to stream up/down, 4. don't handle large files (500mb+) well. 5. use more RAM, 6. more bandwidth cost – Endless May 26 '21 at 20:50
  • my junks are in the kb size, but thanks for your input. – xtlc May 26 '21 at 22:15

1 Answers1

1

Maybe you can use promises to have more control over the information flow:

$('#checkButton').on('click', function( event ) {
    let form = document.querySelector('#productForm');

    let return_dict = {"number": 0, "data": d};
    const pendings = keys.map(async function ( key ) {
        for ( let fe = 0; fe < form.elements.length; fe++ ) {
            if ( form.elements[fe].getAttribute("data-key") === key ) {
                if ( key.split("|")[1] === "IMG" ) {
                    d[key] = await img_2_b64(form.elements[fe]);
                } else {
                    d[key] = form.elements[fe].value;
                }
            };
        };
    });
   Promise.all(pendings)
    .then((values) => {
      write_2_DB_with_ajax_call ( values )
    });
  });

and

function img_2_b64( element ) {
  return new Promise((resolve, reject) => {
    let fileprops = "";
    let file = element.files[0];
    let reader = new FileReader();
    reader.onloadend = function() {
        resolve(reader.readAsDataURL(file));
    };
    reader.onerror = function() {
      reject();
    };
  })
}
ogranada
  • 121
  • 1
  • 2