How to access image from assets folder to javascript object

Question

Hi everyone I've situation while uploading image in Angular project if user doesn't select image then i want to read image from the assets folder and send it to backend. after hours of trial and error. i'm not able to read the image from the asset folder to a JavaScript file object. if anyone knows please guide to me. Thanks in advance.

Things i've tried

I've tried to fetch it using HttpClient in Angular by passing relative path.
I've tried to create file object by passing relative path to File(url); constructor with no luck.

please help me.

My problem is to create a file object by accessing the image from asset folder in the angular(4/5) project.

@Martijn can you suggest how to access file from assets folder to Component or Service in angular? — Gavishiddappa Gadagi
– Gavishiddappa Gadagi, Commented Mar 12, 2018 at 10:40

Gavishiddappa Gadagi · Accepted Answer · 2018-03-12 17:58:35Z

3

Finally I got the answer it works irrespective of any JavaScript framework.

var blob = null;
var xhr = new XMLHttpRequest(); 
xhr.open("GET", './assets/<FILENAME>'); 
xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
xhr.onload = function() 
{
    blob = xhr.response;//xhr.response is now a blob object
    var file = new File([blob], 'logo.png', {type: 'image/png', lastModified: Date.now()});
    console.log(file);   
}
xhr.send()
}

For More Details:- http://qnimate.com/javascript-create-file-object-from-url/

answered Mar 12, 2018 at 17:58

Gavishiddappa Gadagi

1,2201 gold badge17 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ibenjelloun · Accepted Answer · 2018-03-12 11:09:57Z

0

To access your assets from javascript you need to mark your resource as trusted using DomSanitizer :

constructor(sanitizer: DomSanitizer) {
   const sanitizedUrl = sanitizer.bypassSecurityTrustResourceUrl('/assets/<YOUR_IMAGE>');
}

From Angular Security Why :

To systematically block XSS bugs, Angular treats all values as untrusted by default. When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation, Angular sanitizes and escapes untrusted values.

How to by pass when trusted.

edited Mar 12, 2018 at 11:09

answered Mar 12, 2018 at 10:41

ibenjelloun

7,7732 gold badges34 silver badges55 bronze badges

2 Comments

Gavishiddappa Gadagi Over a year ago

Can you provide some explanation about how it works?

Gavishiddappa Gadagi Over a year ago

Ok i got it, but how can i create file object with this sanitized url any idea?

Collectives™ on Stack Overflow

How to access image from assets folder to javascript object

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related