html - Converting image object to File object, javascript - Stack Overflow

I want to convert "image object" to "File object" using HTML5 in client side to upload the File to the azure blob storage.

Since I'm using AngularJs, my plan is to

• convert image to file
• upload file to blob storage using angular-azure-blob-upload

I have found lots of examples that convert File object to image using FileReader, but I can't find the opposite example.

I heard it is impossible to write files to local file system with client javascript, but I don't need to store the File, I just need the file object reference to upload the file.

Is there any way to solve this problem?

I want to convert "image object" to "File object" using HTML5 in client side to upload the File to the azure blob storage.

Since I'm using AngularJs, my plan is to

• convert image to file
• upload file to blob storage using angular-azure-blob-upload

I have found lots of examples that convert File object to image using FileReader, but I can't find the opposite example.

I heard it is impossible to write files to local file system with client javascript, but I don't need to store the File, I just need the file object reference to upload the file.

Is there any way to solve this problem?

• javascript
• html
• image

Share Improve this question Follow asked Jan 20, 2015 at 10:05 HongKun YooHongKun Yoo 40322 gold badges55 silver badges1010 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 14

You can use fetch and FormData to convert and upload.

//load src and convert to a File instance object
//work for any type of src, not only image src.
//return a promise that resolves with a File instance
function srcToFile(src, fileName, mimeType){
    return (fetch(src)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){return new File([buf], fileName, {type:mimeType});})
    );
}

//usage example: (works in Chrome and Firefox)
//convert src to File and upload to server php
srcToFile('/images/logo.png', 'new.png', 'image/png')
.then(function(file){
    var fd = new FormData();
    fd.append('file1', file);
    return fetch('/upload.php', {method:'POST', body:fd});
})
.then(function(res){
    return res.text();
})
.then(console.log)
.catch(console.error)
;

For your case, just replace '/images/logo.png' with imageObject.src

There is a way to save files to the local file system, through the File System API, but only Chrome and Opera supports it. If you want to render an image file from File/Blob to an IMG tag, you can do

img.src = URL.createObjectURL(myFileOrBlob);

This will convert the File/Blob to an URL, which is available only inside of your browser and looks like that

blob:http%3A//localhost/2ee59cd6-9220-429c-add9-05983645639e

After you are done using the image, it's good to free the memory by doing

URL.revokeObjectURL(blobURL);

Hope I understood you correctly and that helps you.