How can i Bind or copy one input value into another input using of angularjs?

Question

Hi all i am using MEAN stack in my Web portal with AngularJS as my front-end,
In my portal i want to upload user profile image, so i have used uplodcareplatform to upload the images in my portal.
My Plunker
after chooses the Image we get that image url in upload input, then we need to Bind or copy these url value into below input to store in a backend. so we tried to get the solution like ng-bind="userimg=img" value="{{img}}" which is not working. please check and update us thanks.

My Code :-

<div>
    <label >Upload Img</label>
  <input ng-model="img" role="uploadcare-uploader" name="content" data-public-key="240426036fd9daf2d723" data-images-only />

</div>

<div>
    <label for="quantity">Fetch above input value in this input</label>
    <input type="text" ng-model="userimg" ng-bind="userimg=img" value="{{img}}">

</div>

Kusum Kushwaha · Accepted Answer · 2018-05-10 15:51:56Z

1

I have one temporary solution for your question as you are using angularJS 1 version

   <div>
      <label >Upload Img</label>
      <input id="fileId" role="uploadcare-uploader" name="content" data-public- 
       key="240426036fd9daf2d723" data-images-only />  
   </div>
   <div>
     <label for="quantity">Fetch above input value in this input</label>
     <input type="text" ng-model="userimg">         
     <input type="submit" value="Set">
   </div>

and in controller

$scope.userimg = null;
$(':submit').on('click', function() {
  var input = $('#fileId');

  $scope.userimg = input[0].value;
  $scope.$apply();
})

On click of set button, you will get the value. As you are using this library https://ucarecdn.com/libs/widget/3.3.0/uploadcare.full.min.js I can give this temporary solution

if you are using angularJs 1 any version then use angular-uploadcare library

https://github.com/uploadcare/angular-uploadcare

and if you are using angular 2 or above version then use ngx-uploadcare-widget https://github.com/uploadcare/ngx-uploadcare-widget

edited May 10, 2018 at 15:51

answered May 10, 2018 at 15:45

Kusum Kushwaha

2021 silver badge11 bronze badges

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

4 Comments

R. Mani Selvam Over a year ago

Thanks for your valuable answer i know you have tried many times to get the solution, if possible update my plunker as well to know the exact solution thanks...

Kusum Kushwaha Over a year ago

Hi Mani, But i can't update your plunker, as i don't have permission to update it.

Kusum Kushwaha Over a year ago

if this answer is useful to you, can you please mark it as answered. Thanks Kusum

R. Mani Selvam Over a year ago

thanks for your valuable answer it's working perfectly in local host but while pushed into server showing error like

Error: [$injector:modulerr] Failed to instantiate module ng-uploadcare due to: Error: [$injector:nomod] Module 'ng-uploadcare' is not available!

if you have solution for this let us know thanks

Sujan Gainju · Accepted Answer · 2018-05-10 13:23:50Z

0

You just have to display the img variable in the text field for <label for="quantity">.

In ts file declare a variable img

 img;

In html file

<div>
     <label >Upload Img</label>
      <input [(ngModel)]="img" role="uploadcare-uploader" name="content" data-public-key="240426036fd9daf2d723" data-images-only />

    </div>

    <div>
        <label for="quantity">Fetch above input value in this input</label>
        <input type="text" [(ngModel)]="img" value="{{img}}">

    </div>

answered May 10, 2018 at 13:23

Sujan Gainju

4,7872 gold badges16 silver badges37 bronze badges

2 Comments

R. Mani Selvam Over a year ago

thanks for your valuable answer if possible please update my plunker as well tto know the exact answer...i have tried your answer but it's not working for me that's why, please update the plunker...thank you so much...

m.e.conroy Over a year ago

This is Angular 2+ style, I believe the question needs an answer in AngularJS

Collectives™ on Stack Overflow

How can i Bind or copy one input value into another input using of angularjs?

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related