how do I add an image to a loopback model?

Question

I created a blog post using mongodb(mlab), loopback, and angular 4 and I am able to display my posts on my angular 4 site, however I do not know how to add an image to my loopback model seen here as json:
{ "title": "string", "author": "string", "date": "string",// type could be date "body": "string", "id": "string" }

There is no image property type so I am confused as to how to add my image url to my loopback data model in order to display it on my angular 4 blog. I could use <img *ngIf="post.id === '599ce3147e0f7a32c812a6ac'" src="http://drvidyahattangadi.com/wp-content/uploads/2014/12/panchkarma3.jpg" alt=""> for each post id but if I have many posts this would be wildly inefficient. Can anyone help?

score 4 · Accepted Answer · answered Aug 23 '17 at 10:23

When you working with Image type of objects in Loopback recommended approach is that create component storage to your loopback application.

npm install loopback-component-storage --save

You just need to provide series of answers like in following code in CLI.

$ slc loopback:datasource
[?] Enter the data-source name: storage
[?] Select the connector for storage: other
[?] Enter the connector name without the loopback-connector- prefix: loopback-component-storage
[?] Install storage (Y/n)

in the datasource.json file your storage entry will added.

"storage": {
  "name": "storage",
  "connector": "loopback-component-storage",
  "provider": "filesystem",
  "root": "./files"
}

After creating required "model" you can simply work with file struture to download and upload images.

ex:
POST /api/containers/container-name/upload

Following link will help you with step by step process to create component storage and image upload/download functionalities in loopback.

This is a great answer, but now that I have it set up how do I implement it in to angular? That part is still confusing. — kingx26, Aug 23 '17 at 15:50
Thanks @kingx26 ,I will answer to this comment in below answer section because it is little bit longer with code section. :) — ChamalPradeep, Aug 23 '17 at 16:21

score 1 · Answer 2 · answered Aug 23 '17 at 07:31

If I understand your question well, you want to serve image to your angular front-end. In all the projects which I worked, we didn't save images in the database. We save the image on server hard disk and add the URL to the database.

Then in the angular side, you just need to set the URL in the src attribute of the img tag.

If you have many images, you can use another server for serving the images for improving efficiency.

score 0 · Answer 3 · answered Aug 23 '17 at 16:37

You can create folder call "userassests" in side "storage" folder which created under "server"

Folder structure : server>storage>userassests

In our usecase we hosted this loopback application in docker envioronment.in docker-compose.yml file we mount storage/userassest folder to a server location.

After that you can simply call angular upload function as below.With the angular upload function you will get a file input and you can use Upload directive to complete action.

 $scope.uploadPic = function (file) {
            Upload.upload({
              url: '/api/containers/userassets/upload',
              file: file
            }).then(function (response) {
              $scope.orgLogo = "/api/containers/userassets/download/" + response.data.result.files.file[0].name;
              file.result = response.data;
              $timeout(function () {
                $scope.result = response.data;
              });
            }, function (response) {
              if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data;
            }, function (evt) {
              // You can get upload progress here
              file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
            });
          }

after you execute this code line your image assets will transfer to server mounted location and in the application level also saved in storage/userassets folder.

Then you can do upload and download using API operations. Hope this will ok... if you need further clarifications I'm happy to provide. Cheers...!!

thanks once again, i am using the: "provider": "amazon", "key": "my key", "keyId": "my key id", would this work the same? — kingx26, Aug 23 '17 at 16:57
with the get api of attachments model, it retrieves my aws bucket and that's great, but I am still lost from this point. Sorry if I'm asking too much i really don't know much about this. — kingx26, Aug 23 '17 at 17:08
This is how we learn things kingx26 :) ... no one knows everything... Always happy to contribute to your solution with my little knowledge...!!! in AWS you can attach S3 bucket as storage.Remember to provide necessary edit and view permission to S3 bucket. — ChamalPradeep, Aug 23 '17 at 17:40

how do I add an image to a loopback model?

3 Answers3