How to Convert Blob to File in JavaScript

How to convert Blob to File in JavaScript

This function converts a Blob into a File and it works great for me.

Vanilla JavaScript

function blobToFile(theBlob, fileName){
    //A Blob() is almost a File() - it's just missing the two properties below which we will add
    theBlob.lastModifiedDate = new Date();
    theBlob.name = fileName;
    return theBlob;
}

TypeScript (with proper typings)

public blobToFile = (theBlob: Blob, fileName:string): File => {
    var b: any = theBlob;
    //A Blob() is almost a File() - it's just missing the two properties below which we will add
    b.lastModifiedDate = new Date();
    b.name = fileName;

    //Cast to a File() type
    return <File>theBlob;
}

Usage

var myBlob = new Blob();

//do stuff here to give the blob some data...

var myFile = blobToFile(myBlob, "my-image.png");

Convert blob url to file or Base64 to upload to cloudinary

In both the cases you are actually converting the imageUrl into blob.
For some reason it doesn't work.

Instead converting the imageUrl directly to the blob worked for me.

The code goes like:

const getBase64FromUrl = async (url) => {
    const data = await fetch(url);
    const blob = await data.blob();
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = () => {
        const base64data = reader.result;
        resolve(base64data)
      };
    });
  };

And then use the function like this.

const myImage = await getBase64FromUrl(imageUrls[i]);

Is there a way to convert a type of Blob image to a type of File in Javascript?

Convert Only

let file = new File([blob], "name.extension");

If you are trying to download a blob and convert it to any file type, you do something like this. Since you said you are downloading and pulling an image.

Fetch Convert, Download, Extension

function download(url, filename) {    // Request    fetch(url, {         mode: 'no-cors' /*{mode:'cors'}*/    // Callback    }).then((transfer) => {        // Return blob        return transfer.blob();    // Return data    }).then((bytes) => {        // Create an element        let elm = document.createElement('a');        // Add blob data to element        elm.href = URL.createObjectURL(bytes);        // Download blob data with certain extension        elm.setAttribute('download', filename);        elm.click()    }).catch((error) => {        console.log(error);    })}
download('http://BLOB', 'EXTENSION');

how to convert blob to wav file in javascript and connect python flask

You write the data in a file, the position within the file moves to the end of it. If you then re-read the file using soundfile, you must first jump back to the beginning of the file.

import io

@app.route('/result', methods=['POST'])
def result():
    if 'data' in request.files:
        file = request.files['data']
        
        # Write the data to a file.
        filename = secure_filename(file.filename)
        filepath = os.path.join(app.config["UPLOAD_FOLDER"], filename)
        file.save(filepath)
    
        # Jump back to the beginning of the file.
        file.seek(0)
        
        # Read the audio data again.
        data, samplerate = soundfile.read(file)
        with io.BytesIO() as fio:
            soundfile.write(
                fio, 
                data, 
                samplerate=samplerate, 
                subtype='PCM_16', 
                format='wav'
            )
            data = fio.getvalue()
        
        # ...

   return '', 400

---

Related Topics