acquire the document via ng-change

I need help converting this code to be compatible with angular.js so that I can retrieve the data URL and send it using $http.post

<input type="file" id="imgfiles" name="imgfiles" accept="image/jpeg" onchange="readURL(this);">


function readURL(input) {
    if (input.files[0].size <= 1048576) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#cam_photo').attr('src', e.target.result).width(250).height(230);
                var a = $('#cam_photo').attr('src');
                data_url = a;
            };
            reader.readAsDataURL(input.files[0]);
        }
    } else {
        alert('File is too large. Upload file less than 1MB');
    }
}

Answer №1

Retrieve the scope using angular.element(this).scope()

Give this a try:

onchange="angular.element(this).scope().readURL(this)"

Then, implement your file upload code in your controller with $scope.readURL(input)

$scope.readURL = function(input) {
    if (input.files[0].size <= 1048576) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#cam_photo').attr('src', e.target.result).width(250).height(230);
                var a = $('#cam_photo').attr('src');
                data_url = a;
            };
            reader.readAsDataURL(input.files[0]);
        }
    } else {
        alert('File is too large. Please upload a file less than 1MB');
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

utilizing AJAX to send a POST request and display the response in HTML using Django

I am looking to input a number into a text box and retrieve all the even numbers using ajax with Django. Here is my view: load_template @csrf_exempt def load_template(request): if request.method == 'POST': num1 = request.POST[&a ...

Ways to retrieve the child number using JavaScript or PHP

Is there a way to retrieve the child number upon clicking? View screenshot For example, when I click on the X button, I want to remove that specific element. However, this action should only apply to item n2. In order to achieve this, I need to determine ...

Unable to retrieve table header information when clicking on a table cell

My code is working perfectly, except for the fact that when I click on a cell, I cannot retrieve the table header text. Retrieving the row text works fine based on the code. If I use Object.keys(data) inside the alert function to retrieve the data, it give ...

Adding a picture to the webpage and saving it temporarily on the site

After exploring all options on the site, testing it rigorously and closely following the instructions provided, I am still unable to determine where exactly I went wrong. Website Link: The main goal is to upload an image and temporarily store it within t ...

Enlarging and cutting video footage

I have developed an app that features a code enabling users to capture photos using their computer-connected camera. How it Works: A webcam is utilized to display a video element with the camera as its source: function onSuccess (stream) { this.video.s ...

Building Next.js with a designated maximum number of processes/threads

I've uploaded a fresh Next.js app to the cloud server using npx create-next-app. However, when I try to run the build script, the server throws an error 'pthread-create: Resource temporarily unavailable'. { "name": "next&quo ...

Is there a way to adjust the height pixel value in my code so it can be dynamic?

I have created a simple script that allows selected objects to fade in as the user scrolls down. However, my issue is that this script is quite rigid. If I were to apply it to 20 different objects, for example, I would need to manually adjust the height ea ...

Continuous polling with Ajax in Rails does not trigger the display of an alert box

Trying to implement ajax polling using the RailsCast tutorial on ajax polling (#229) but encountering an issue where the alert box doesn't pop up after running the server. Here's the code in app/views/quotes/index.js.erb: alert('Hey') ...

What is the best way to ensure that a React app is always displayed in full screen

I am facing an issue while developing an app with React and Material UI. I am trying to display the app in full-page mode, but unable to achieve it successfully. Currently, it appears like this: Here is my code snippet from App.js: import 'typeface- ...

Utilize Ag Grid to selectively apply borders between grouped values

I have included my Plunker link: [https://plnkr.co/edit/lnF09XtK3eDo1a5v] Is there a way to add borders between different group values? For example, in this case, 'country' is the group and when all rows for United States are completed, can we a ...

Use JavaScript to create a new window and load the HTML content from an external URL

Just starting out with HTML and Javascript I'm trying to use JavaScript to open a window and load content from an external source. I attempted using document.write(), but it only works when I hardcode the HTML as input. Any suggestions on how to get ...

Exploring ways to implement Laravel 4 localization techniques within an Angular application

Is it possible to incorporate Laravel's trans() or Lang::get() methods in an AngularJS application using the (lang folder) approach? The Laravel view showcases an Angular view with several controllers. <div ng-view></div> All my app tem ...

Telerik Nested perspective

Here is the code snippet that I am currently working on, which involves a nested grid from Telerik: I've encountered an issue with using JavaScript to locate and interact with controls named "PreviousDate" and "DateofBirth". <%@ Page Language="c# ...

The Jquery .clone() function presents issues in Internet Explorer and Chrome browsers, failing to perform as expected

I need to duplicate an HTML control and then add it to another control. Here is the code I have written: ko.bindingHandlers.multiFileUpload = { init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { va ...

Ways to eliminate unnecessary items from a JavaScript object array and generate a fresh array

My JavaScript object array contains the following attributes: [ { active: true conditionText: "Really try not to die. We cannot afford to lose people" conditionType: "CONDITION" id: 12 identifier: "A1" ...

`Finding the nodejs API route for displaying images from a database`

How can I successfully display an image from the database without getting a string of question marks instead? Click here to see the issue >>> When attempting to directly call the API using the provided link, the following result is returned: {&qu ...

What is the best way to utilize the "useRouter" function to extract parameters from the URL within the getServerSideProps() method in Next.js?

How can I access the URL parameters within the getServerSideProps() method? Below is the snippet of my code. The objective of my code is to extract parameters from the URL, fetch data from the API, and render it on the front end. import { useRouter } from ...

What are the top JavaScript widget libraries for a measurement reporting web application?

Embarking on a new venture to develop a web application tailored for engineers in need of reporting measurements. The key elements that form the backbone of this project include: grids charts maps After thorough research, I have delved into various java ...

Javascript - formatting numbers with decimals

This question is not related to math or operators, but rather a formatting or masking issue. I am working on creating an order form that uses Javascript to tally and display the quantity and cost of each column in separate fields. I am trying to format th ...

Issue with CORS when starting SAM local API

I have encountered a CORS issue while using AWS CDK (Typescript) and running SAM local start-api to launch an API connected to lambda resolvers. The problem arises when attempting to access the API from a web browser. Below is the code snippet causing the ...