0

I do have image url handy , probably an drop box url

https://www.dropbox.com/s/tcg73i4bxbu423g/gradient-test.jpg?dl=0

How to get the fileobject for the same , since my backend api accept only file object , is there any way i can get file object.

I am expecting the below object format . is there any way guys

enter image description here

it will be great if any fiddle is applicable

Note: is it possible to convert without any external api .

any answers will be highly helpful & thankful

midhun k
  • 546
  • 1
  • 12
  • 28

1 Answers1

1

You can load image as a file use below function(link, @HaNdTriX). And the url you provided is not an image url so you should extract the image path first.

function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

imagepath = "https://uc5d3934b120724e8be5a303a2af.previews.dropboxusercontent.com/p/thumb/AA2-rSW7gi7La52QQXPE_mXgt-ssFnHje-5SnLKNxXuTD_qtYtjackFxZTyn3SWQDCLEw66TdZeqa4hMdd33pGxoaXMufvP5XVRPlGZr_a8WJ_OgxphXn45cTKbFHXD2e7I4PcYgSnkBOiYpfqNK_GcMJvTlZskkWvsUwiqopClEkh_4_GDNQcOE-Po8puDE9koQuMnAh6q0Ig4-eZ3xyZO_X-fC9Z9M7niTHGbLAgpVlYWyyKLGFpgVJHD8jpZ1F38c2V8H8M6c4emhMaWr1bEBo4WWxjFHThLj1f1vDrWEv7Z18ZEro-bekrZRh_AwH7oxIBmYFZYhA91c6OMXAFiCdOX0hwRwhMJVxruschBy8bHqVkm2II5wTnDj6IbGlu5uatEt6LVVbLv0U2ZGlmSq/p.jpeg?fv_content=true&size_mode=5"
toDataUrl(imagepath, function(myBase64) {
    console.log(myBase64); // myBase64 is the base64 string
});
msc
  • 489
  • 2
  • 4
  • Thanks for the answer. but i was expecting the same answer i shared as screenshot. is it possible to get the same format ? – midhun k Jul 15 '20 at 12:24
  • i was actually looking this image url:https://www.dropbox.com/s/tcg73i4bxbu423g/gradient-test.jpg?dl=0 – midhun k Jul 15 '20 at 12:25
  • am getting CORS issue :( – midhun k Jul 16 '20 at 10:52
  • https://stackoverflow.com/questions/62938489/when-tried-to-convert-to-base64-from-url-getting-cors-issue-in-js am getting this issue – midhun k Jul 16 '20 at 17:00
  • 1
    CORS is a security restriction so within browser, you can't solve this if you don't host images on your site. I guess you need to find another solution - run your code on another platform or copy the image to your site first. – msc Jul 17 '20 at 02:21