I am using ng-file-upload framework to save images. I am facing an issue. I am successfully able to upload the image into an image folder and image is being saved like CPqc3h_zWwr_5n9xOzTBybz4.png. I am trying to access this image in frontend by http://localhost:5040/images/CPqc3h_zWwr_5n9xOzTBybz4.png but it is giving me 404.
I also tried to do fs.readFile(); and send the binary data into frontend but I don't know how to convert it back into Image. I would like to also to know the best practice MEAN Stack developers take around the world to solve this issue.
Don't use the absolute path in the image reference, use a relative path instead
Change this
http://localhost:5040/images/CPqc3h_zWwr_5n9xOzTBybz4.png
And In your controller or service or factory reference the image like
$scope.var.imageURL = './images/CPqc3h_zWwr_5n9xOzTBybz4.png'`
And render it to the client like
<img ng-src={{var.imageURL}}
Related
I created a Container model and connected it to an S3 bucket which all works well. I am trying to upload a file using Angular, using the service file generated with lb-ng.
If I do Container.upload({container: 'testbucket'}, {file: file}) call will fire but nothing uploads. Am sure I have just got the params wrong but cannot find any example of the angular library being used, and the official example at https://github.com/strongloop/loopback-example-storage uses a different angular uploader to handle the upload, which I'd like to avoid if possible.
Thanks!
I'm using Angular as a client to a Rails backend. I'd like to have a form that can accept multipart upload data, and pass it to the server. But the only data I get on the files is:
{"webkitRelativePath"=>"",
"lastModified"=>1424644319000,
"lastModifiedDate"=>"2015-02-22T22:31:59.000Z",
"name"=>"imgres.jpg",
"type"=>"image/jpeg",
"size"=>7521}
Shouldn't this contain something else? I need the actual binary data. How do I get this?
there is a module on file upload called angular-file-upload check it out
hope this help you..!
Background:
I'm trying to preload some images in an AngularJS app before presenting them to the user to prevent them from "peeling" in. I my preload facility to return a promise resolved when the image has been downloaded.
Current approach:
At the moment I'm using a simple $http call to download the image. Imagine element is an <img> tag with my image in it:
$http.get("my/image/url.jpg")
.then( function() {
$animate.enter(element);
});
This seems to work okay, but I would appreciate any pointers if there's a better way to do it.
Problem
I'm hitting issues with CORS I think. One application of this preloader is to load profile pictures from twitter. When I do this, my $http.get throws an error in the console:
XMLHttpRequest cannot load https://path/to/img.jpg.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://my.server.com' is therefore not allowed access.
Is there a way to preload this sort of image?
I've created a very simple plunkr demonstrating the problem - you'll need the console open to see the error.
Use one of the standard ways to preload images - img tag that's not shown on screen would still force image loads.
Combined with Angular, sounds like a preloader directive would work perfectly.
No need to reinvent the wheel, just make the most use of Angular.
i'm doing protractor tests and using angular-mocks to "fake" requests.
In my app where is one place where image should be displayed:
<img ng-src="api/documents/image/{{file.Id}}">
Is it possible to intrcept the request for getting image data and replace it by some fake image data, in the way things done with json?
$httpBackend.whenGET('api/documents/123').respond(200,[]);
Currently i'm getting broken image icons on the screen, which i prefer to be replaced by some fake images.
I hope that it is possible...
Kind regards
ngSrc just accepts an expression/static path - it doesn't perform an $http call which you can mock unless your expression is a function call to fetch images which is probably not what you want. I would recommend:
1) Add a config variable to your image paths that can be switched for dev/prod such as:
ng-src="{{ baseUrl }}/api/documents/image/{{file.Id}}"
2) Point this baseUrl to a dev server which delivers whatever mock images you desire. You can create a simple Express server that delivers the same image for every request for example.
I need to save a PDF file which the user uploads to database as a byte array (in Angular JS). I have tried using the file upload module provided by Angular. It doesnt seem to work for me.I have also tried posting the PDF file through a $http post call of jquery. This method works if I accept the data at the server side as a dynamic object of Newtonsoft. However I need a byte array and I am unable to convert this object to a byte array.
This questions is not really about angular but instead it is, based on your description, about how to upload a file using WebApi.
I would recommend your start trying to upload your file using this exmaple:
http://blogs.msdn.com/b/henrikn/archive/2012/03/01/file-upload-and-asp-net-web-api.aspx
When it is ready then adapting it to your angular app.
I had a similar issue a while back. Have a look at this Stack Overflow link.
Uploading/Downloading Byte Arrays with AngularJS and ASP.NET Web API
If you still have some questions, let me know.
I am sending and receiving a lot of byte array data between my clients and servers using Web API. The approach I use is compatible with iPhones, iPad, Android devices, Macs, and Windows PCs/laptops. I haven't checked it on Windows phones yet, but do not expect any problems.
Regards....