How to upload an image in angular as an API client? - angularjs

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..!

Related

react-filepond how to implement getting dropped/selected files and processing them and uploading?

I'm implementing an application using react-filepond where once the user selects/drops the files, i need to get uris (for the files) for upload from an endpoint(server), and then using those uris to upload to our storage.(whilst also showing upload progress to the user)
is using onupdatefiles prop to send getURIs request and then using onprocessfile/onprocessfilestart to upload those files using the retrieved URIs, the best way to do this?
also what is the use of the progess parameter we get in the onprocessfileprogress(file,progress)? can it to be used to feedback the progress back to filepond component?
I think you can implement a custom server.process function and handle all upload logic in there, wether uploading to your local server of first uploading to a remote server it should give you enough control over the entire process.
https://pqina.nl/filepond/docs/patterns/api/server/#process-1

Strongloop loopback-component-storage + angularjs file upload

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!

File download angular and Laravel

I am trying to download a pdf file generated by laravel in AngularJs. So far i have been able to get the file from laravel but when i click the action, Angular does not download the file but just returns a response that includes the file as in the diagram below.
Response from laravel returns pdf file
How do i get the file to download?
Laravel
public function getPrintInvoice()
{
$pdf = PDF::loadView('crystal.invoice');
return $pdf->download('hello.pdf');
}
Angular
$http.get('print-invoice');
Because $http.get() uses an asynchronous call to the server the response is captured by the XMLHttpResponse object rather than presented directly to the user. The easiest method of presenting the PDF to the user is to skip the angular call, e.g. use $location.url('/print-invoice'); or $window.open('/print-invoice');
If you want to stick with the $http methods (e.g. if you want to be able to perform some action based on the success or failure of the file get) you'll need to capture the return value from the download and use the HTML5 Blob methods. I'd recommend using something like Angular File Saver. But it does require a bit more work on the server side to ensure the data is in the correct format.

Access uploaded image in NodeJS in AngularJS via ng-file-upload

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}}

Angularjs and Pdfkit - example of saving pdf to downloads

Can any share an example of using Angularjs and Pdfkit to save a file to the client downloads? I've got it rendering in the same window as the app, but need it as a pdf file. I'm assuming this is all done client side rather than the server side with the Pdfkit node module.
This solution can help you https://www.npmjs.com/package/ng-pdfkit, it's a An Angular wrapper for PDFKit.

Resources