Get FileInput object from base64 using javascript or React

Question

am not sure but i need to get fileinput object from base64

i do have image url handy from that am getting base64 and from that i need to build fileinput object

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQECTQJNAAD/7QXIUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAABakcAgUAFk5HUyBQaWN0dXJlIElkOjI0MzI4MDgcAgoAATAcAg8AABwCFAAAHAIZAdcgZHJhbWF0aWMgc2t5LCAgd2lsZGxpZmUsICBjcmFuZXMsICBwb3dlciBpbiBuYXR1cmUsICBhbmltYWxzLCAgcml2ZXJzLCAgbWlncmF0aW9uLCAgYmlyZHMsICBubyBwZW9wbGUsIG5vcnRoIGFtZXJpY2EsICBoaWdoIHBsYWlucyBhcXVpZmVyLCAgYW5pbWFsIGJlaGF2aW9yLCAgZ3JlYXQgcGxhaW5zLCAgZ3J1cyBjYW5hZGVuc2lzLCBNTTg0MjksICAsICBuaWdodCwgIHdhdGVyLCAgc3VyZmFjZSwgIG1pZHdlc3Rlcm4gc3RhdGVzLCAgY29sb3IgaW1hZ2UsICBwaG90b2dyYXBoeSwgIGNyYW5lcyAoYmlyZHMpLCAgZmx5aW5nLCAgdW5pdGVkIHN0YXRlcywgIGxpZ2h0bmluZywgIHVzYSwgIHdvb2Qgcml2ZXIsICByb29zdGluZywgb3V0ZG9vcnMsICBwbGF0dGUgcml2ZXIsICBhbmltYWxzIGluIHRoZSB3aWxkLCAgYXF1aWZlcnMsICBuZWJyYXNrYSwgIHNhbmRoaWxsIGNyYW5lcywgIGxhcmdlIGdyb3VwIG9mIGFuaW1hbHMcAigAwkltYWdlIHByb3RlY3RlZCBieSBjb3B5cmlnaHQuIENvbnRhY3QgIE5hdGlvbmFsIEdlb2dyYXBoaWMgQ3JlYXRpdmUgYXQ6IFRlbGVwaG9uZToyMDIuODU3Ljc1MzcsIFRvbGwgRnJlZTogMS44MDAuNDM0LjIyNDQsIGVtYWlsOiBuYXRnZW9jcmVhdGl2ZUBuYXRnZW8uY29tIG9yIHd3dy5OYXRHZW9DcmVhdGl2ZS5jb20gZm9yIHJlbGVhc2UuHAI3AAowMy8xNC8yMDE2HAJQAChSQU5EWSBPTFNPTi9OYXRpb25hbCBHZW9ncmFwaGljIENyZWF0aXZlHAJVABxOYXRpb25hbCBHZW9ncmFwaGljIENyZWF0aXZlHAJaAAAcAl8ACU5lYnJhc2thLhwCZQAJTmVicmFza2EuHAJnAAAc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

by fileinput object i mean like below

Can you guys help me with an example or fiddle.

Simply from image Url -> base64 -> fileInput object

score 1 · Answer 1 · answered Jul 15 '20 at 20:22

1

function base64ToBuffer(base4) {
  const str = atob(base64);
  const bin = [...str].map(char => char.charCodeAt(0));
  const arr = new Uint8Array(bin);
  const { buffer } = arr;
  return buffer;
}

const base64 = '/9j/4AAQSkZJRgABAQEAYABgAAD/4QBoRXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAAExAAIAAAARAAAATgAAAAAAAABgAAAAAQAAAGAAAAABcGFpbnQubmV0IDQuMi4xMgAA/9sAQwByT1ZkVkdyZF1kgXlyiKv/uqudnav/+v/P/////////////////////////////////////////////////////9sAQwF5gYGrlqv/urr//////////////////////////////////////////////////////////////////////////8AAEQgAIQAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8AfKT5i459qAoPXcR2pS3zb8Zzwo/rSrhm6jP0/wAaAGlQOm4DvRESXbIx/kU44Vuoyfb/AApA3zbsYxww/kaAGdAF/iQ8e4qUbWcMMdMg+tKyK3XqOhqMZRiM89RxnP5UAPO1XJOOmSfSouoK/wATnn2FOOXYDPPU8Yx+dSKir06nqaAHVHN/qzRRQAQ/6sVJRRQB/9k=';
const buffer = base64ToBuffer(base64);
const file = new File([buffer], 'tiger.jpg', { type: 'image/jpeg' });

console.log(file);

answered Jul 15 '20 at 20:22

GirkovArpa

4,427
4
14
43

@here can anyone help me with a fiddle : Simply from image Url -> base64 -> fileInput object – midhun k Jul 16 '20 at 06:56
for some image its working and for some its not.. mainly dropbox urls – midhun k Jul 16 '20 at 10:53
Share the problematic image URLs and base64. An image URL is simply base64 with something like `data:image/png;base64,` prepended to it. – GirkovArpa Jul 16 '20 at 16:40
https://www.dropbox.com/s/tcg73i4bxbu423g/gradient-test.jpg?dl=1 – midhun k Jul 16 '20 at 16:41
issue am facing now https://stackoverflow.com/questions/62938489/when-tried-to-convert-to-base64-from-url-getting-cors-issue-in-js – midhun k Jul 16 '20 at 16:57
That's a separate issue. You asked how to convert `base64` to a `File` object, not how to encode an image as `base64`. – GirkovArpa Jul 16 '20 at 17:12
sorry .. just told what am facing :( – midhun k Jul 16 '20 at 17:14
why dropbox url am not getting ? – midhun k Jul 16 '20 at 17:16

Get FileInput object from base64 using javascript or React

1 Answers1