Encountering a problem with file upload in AngularJs

I am encountering an issue with my simple file upload code. The error message is being displayed as follows:

https://i.sstatic.net/NAPYH.png

Below is the code snippet causing the problem:

<input type="file" name="student_image" onchange="angular.element(this).scope().uploadFile(this.files)" ng-model="formData.studentImage" id="student_image">

$scope.uploadFile = function (files) {
        var form_data = new FormData();
        form_data.append("file", files[0]);
        $http.post('process.php', form_data, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).success(function (data) {
            if (data == "failed") {
                // if not successful, bind errors to error variables
                $scope.errorFinal = "Failed";
            } else {
                $scope.formData.image_name = data;
            }
        }).error('failed');
    };

Answer №1

Give this a shot

angular.element(this).scope().submitForm(this);

.

<input type="file" name="profile_pic" onchange="angular.element(this).scope().submitForm(this)" ng-model="formData.profilePic" id="profile_pic">

JavaScript

$scope.submitForm = function(input){
    console.log(input.files[0]);
};

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

Preventing React setState from replacing the entire object

When attempting to update a customer's age using setState, the object is altered before calling setState, but the existing object is not updated. customerOnChange(event, field) { //Customer's age currently set at 80 var customer = { ...t ...

Learn the method of showcasing a JavaScript variable value within an HTML href tag

Currently, I am in the process of rewriting my URL and category name to be passed into the URL. For this purpose, I am creating a URL friendly string using the following JavaScript function: function getUrlFriendlyString(str) { // convert spaces to &ap ...

Sending a piece of state information to a different component

Hey, I'm a new React developer and I'm struggling with a particular issue. I've included only the relevant code snippets from my app. Basically, I want to retrieve the data from the clicked Datagrid row, send it to a Dialog form, and then p ...

What could be causing the canvas circle to appear distorted and not truly circular?

My simple code is intended to draw a circle, but it's not appearing as expected. The coordinates seem to be shifted oddly. The canvas size is specified with style="width: 600px; height: 600px;". I've tested it on both Chrome and Safari, yet the r ...

Ensure that scripts with the type of "module" are completed before proceeding to execute the following script

In my HTML document, I have two script tags with type="module" at the bottom of the body tag. Following those, there is another script tag with embedded code that relies on the results of the first two scripts. Is there a method to ensure that this code ...

Breadcrumb navigation that is determined by data hierarchies and relationships between parent and child items

I am looking to implement a dynamic breadcrumb system on my website using data-driven methodology. The necessary data is stored in a MariaDB database and has the following structure: parent_id | parent_name | child_id | child_name ——————— ...

What is the best way to manage an empty JavaScript object?

I'm feeling stuck. Check out this code snippet: const clientInfoPromise = buildPromiseMethod clientInfoPromise.then((clients) => { console.log('clients ' + JSON.stringify(clients)) console.log(clients.typeOf) console.log(_.k ...

Executing Angular testing with the command $scope.$apply

What is the reason behind having to use $scope.$apply() in a test case for asynchronous processes to complete? Assume there is a service angular.service("a",function($q){ return { getValue: function(){ return $q.resolve(someObj) ...

The bot on Discord.js is sending an incorrect message when attempting to use the _leave command on the music bot

I have been following the tutorials from Plexi Development's YouTube channel to create a music bot. I have implemented the code, but whenever I try to use the _leave command, my bot refuses to leave the voice channel even though I am in the same chann ...

Execute an npm script using a gulp task

Is there a way to execute an npm script command within a gulp task? package.json "scripts": { "tsc": "tsc -w" } gulpfile.js gulp.task('compile:app', function(){ return gulp.src('src/**/*.ts') .pipe(/*execute npm run tsc*/ ...

Steps to make ng-packagr detect a Typescript type definition

Ever since the upgrade to Typescript 4.4.2 (which was necessary for supporting Angular 13), it appears that the require syntax is no longer compatible. Now, it seems like I have to use this alternative syntax instead: import * as d3ContextMenu from ' ...

Exploring jQuery Mobile: Uncovering the Power of clientX, clientY, and taphold Event

In my current project, I am implementing the taphold event and require the coordinates of the tapped point by the user. However, I have encountered an issue where event.clientX and event.clientY are returning as undefined (you can see the example here: her ...

Is there a way to remove <font> tags using Javascript designMode?

Currently, I am in the process of developing a WYSIWYG editor as a hobby project. My approach involves utilizing an iframe with design mode enabled and leveraging the execcommand feature in JavaScript to implement the editor functionalities. For instance, ...

Is it possible to move between textboxes using arrow keys in HTML?

Is there a way to navigate through textboxes using arrow keys in HTML without relying on jQuery? Possibly utilizing JavaScript, HTML, CSS, or another method? Thank you for your help! <body> <form> <input type="text"&g ...

cutting tags with priority levels

I'm facing an issue where the vertical label "PINK" is centered perfectly in a section, but when I scroll down to the next section, it gets covered by a section with a higher z-index. div.back1 { background-color: #FF00FF; position: relativ ...

Obtain the index of a selected option in a Select Tag using Node.js/Express

When you make a POST request with a form in Node.js/Express For example: <select name="selectname"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3"> ...

Guide on including a JavaScript file in HTML during execution on Node.js

I have developed a basic nodeJs server with the following code in my server.js file: var http = require('http'); var fs = require('fs'); var path = require('path'); var server = http.createServer(function(req, resp){ // P ...

Printing content using JavaScript on a point of sale (POS) printer with

I need to print a specific div on my POS printer named Optimuz. I have attempted using the following code: <div id="printAreaInvoice" style="visibility: hidden;font-size:8px;width:200px;"></div> < ...

"Spin an image using Javascript when it is shown on the

I've got a script that shows an image when we are attacked by a monster. The image is initially set to display="none", but switches to display="" when a monster appears. What I'm looking to do is make the image rotate 360° when it changes from ...

Using ajax to submit variables may not function properly

I have a set of data that has been processed using JavaScript and I am looking to save it to a database. I have been attempting to code something with AJAX, but so far, I have had no success... What I require: Two variables (id, name) need to be sent to a ...