close

How to convert Base64 String to javascript file object like as from file input form?

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to convert Base64 String to javascript file object like as from file input form? in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to convert Base64 String to javascript file object like as from file input form ?

  1. How to convert Base64 String to javascript file object like as from file input form ?

    to convert Base64 String to javascript file object like as from file input form This is the latest async/await pattern solution.
    export async function dataUrlToFile(dataUrl: string, fileName: string): Promise<File> { const res: Response = await fetch(dataUrl); const blob: Blob = await res.blob(); return new File([blob], fileName, { type: 'image/png' }); }

  2. How to convert Base64 String to javascript file object like as from file input form ?

    to convert Base64 String to javascript file object like as from file input form This is the latest async/await pattern solution.
    export async function dataUrlToFile(dataUrl: string, fileName: string): Promise<File> { const res: Response = await fetch(dataUrl); const blob: Blob = await res.blob(); return new File([blob], fileName, { type: 'image/png' }); }

Method 1

const url = 'data:image/png;base6....';
fetch(url)
  .then(res => res.blob())
  .then(blob => {
    const file = new File([blob], "File name",{ type: "image/png" })
  })

Base64 String -> Blob -> File.

Method 2

This is the latest async/await pattern solution.

export async function dataUrlToFile(dataUrl: string, fileName: string): Promise<File> {

    const res: Response = await fetch(dataUrl);
    const blob: Blob = await res.blob();
    return new File([blob], fileName, { type: 'image/png' });
}

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment