Send the image by attaching it and encoding it in base64 before sending it as JSON

Question

Send the image by attaching it and encoding it in base64 before sending it as JSON

Looking for a way to encode and send images via JSON using base64, but struggling with getting the result from the FileReader object. Any assistance would be highly appreciated.

<form>
    <label>Picture
         <input type="file" accept=".jpg, .jpeg, .png" name="picture" required>
    </label>
</form>

async function push() {
// additional actions here
    let form = new FormData(document.querySelector('form'));
    let json = construct_json(form);
//calls  of other functions
}

function getBase64(file) {
   let reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () { // suspected issue here
     reader.result;
   };
}

function construct_json(form) {
    let json = {
        picture: getBase64(form.get('picture')),
    };

    return JSON.stringify(json);
}

UPDATE: Encountering the same problem when trying to use JSON in the push() function, even adding await does not solve it. Suggestions on how to display JSON in the push() function would be greatly welcomed.

javascript json forms image base64

Answer 1

Answer №1

A common error occurs when the reader.onload method is called in your code. You can refer to this resource for an example.

Don't forget to include addEventListener and a callback function when the upload process is completed. Here is the code snippet that needs to be added:

window.addEventListener("change", push);

function getBase64(file, callback) {
  let reader = new FileReader();
  reader.onload = function(e) {
    // console.log(e.target);
    // It seems like there might be an error here

    callback(e.target.result);
  };
  reader.onloadend = function(e) {
    return e.target.result;
  };
  return reader.readAsDataURL(file);
}

async function construct_json(form) {
  await getBase64(form.get("picture"), data => {
    let json = {
      picture: data
    };

    return JSON.stringify(json);
  });
}

Answer 2

A common error occurs when the reader.onload method is called in your code. You can refer to this resource for an example.

Don't forget to include addEventListener and a callback function when the upload process is completed. Here is the code snippet that needs to be added:

window.addEventListener("change", push);

function getBase64(file, callback) {
  let reader = new FileReader();
  reader.onload = function(e) {
    // console.log(e.target);
    // It seems like there might be an error here

    callback(e.target.result);
  };
  reader.onloadend = function(e) {
    return e.target.result;
  };
  return reader.readAsDataURL(file);
}

async function construct_json(form) {
  await getBase64(form.get("picture"), data => {
    let json = {
      picture: data
    };

    return JSON.stringify(json);
  });
}

Answer 3

Answer №2

After considering the comment, it is recommended to check out the example on sandbox

To avoid getting stuck in callback hell, it's best to create a promise. In this case, a promise for the base46 Function has been implemented. Check out Promisification

const getBase64Promise = function (file) {
  return new Promise((resolve, reject) => {
    getBase64(file, (success,err) => {
        if(err) reject(err)
        else resolve(success);
    });
  });
};

Consider implementing your code in a similar manner:

async function construct_json(form, callback) {
  let data = await getBase64Promise(form.get("picture"));
    let json = {
      picture: data
    };
    return json;
}

Answer 4

After considering the comment, it is recommended to check out the example on sandbox

To avoid getting stuck in callback hell, it's best to create a promise. In this case, a promise for the base46 Function has been implemented. Check out Promisification

const getBase64Promise = function (file) {
  return new Promise((resolve, reject) => {
    getBase64(file, (success,err) => {
        if(err) reject(err)
        else resolve(success);
    });
  });
};

Consider implementing your code in a similar manner:

async function construct_json(form, callback) {
  let data = await getBase64Promise(form.get("picture"));
    let json = {
      picture: data
    };
    return json;
}

Send the image by attaching it and encoding it in base64 before sending it as JSON

Answer №1

Answer №2

Similar questions

When a fetch request is called inside a map function in React, the return

Leverage variable as an expression when utilizing ng-include

Adjust the DIV shape to fit perfectly within the browser window without overlapping with any other elements

How does the Express server collaborate with Webpack middlewares to facilitate live reloading?

Tips for hiding multiple markers when zooming out

Encountered a Metro Bundler issue while trying to install a custom npm package

The functionality of submitting an Ajax form is only successful on Firefox browser

The canvas is giving Three.js trouble when it comes to rendering

Real-time updates for UI data in Next.js Firestore are not being reflected

Lazy loading for natives not functioning, despite flags being turned on

Adding HOST with the sails-mongo adapter: Best practices for seamless integration

What is the best way to represent the amount of water consumed from milliliters in a visual

Troubleshooting: React-native iOS images not displaying due to pods problem

What is the best way to utilize the features of component A within component B when they exist as separate entities

Activate or deactivate a text box within a table based on the checkbox's status

What steps can be taken to prevent interference between my nested functions?

Secure your data transfer by encoding passwords with JavaScript before sending them to PHP for decryption, a reliable

Toggle class on element based on presence of class on another element

Using JavaScript to set the value of an input field based on the selected option value

ReactAppI am facing an issue where the browser fails to refresh the page upon saving changes in my JavaScript file using the VS code editor