Submit a document from a Vue.js application via an AJAX POST request

Seeking advice on how to upload a file in a VueJS application and send it to a PHP page using jQuery's ajax function. Any assistance would be greatly appreciated. My goal is to achieve this within a VueJS method (the script provided functions correctly outside of the method with the post and files array set, but not when placed inside a method). The issue seems to be that the $_FILES and $_POST arrays are not properly set. I am hoping to accomplish this without relying on external libraries like axios, only utilizing jQuery if possible. Can anyone confirm if this is feasible in VueJS?

$(document).ready(function(){
   $('#addTemplateForm').on('submit', function(e){
       e.preventDefault();
       app.sub=true;
       if(app.name!='' && app.thumbnailName!='' && app.renderTime!=''
&& app.textFieldCount!='' && app.selectedCategories.length!=0 && app.selectedKeywords.length!=0)
       $.ajax({
           url:'addTemplateBackend.php',
           type:'POST',
           dataType: 'json',
           data: new FormData(this),
           contentType: false,
           processData: false,
            error: function(data){
              alert('error');
            },
           success: function(data){
               alert('success');
               console.log(data);
           }
       })
   });
});

Answer №1

Kindly elaborate on the issue you are currently facing. Take a look at your console for any errors and consider utilizing the Vue tool plugin extension in browsers to assist with problem-solving.

Note: Apologies for the confusion. This was intended to be a comment rather than an answer.

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

Steps for adding a delete icon to a text input field and enabling the functionality to delete text

In the code snippet below, I am creating a text input field: <input type="text" class="signup-input text-value" name="" placeholder="e.g. <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d48554c405d41486d">[email pro ...

Attempting to wrap my head around the implementation of callback functions in THREEJS

Below is a snippet of code taken from a THREE.JS example that functions properly. I have used this code to create my own art gallery by reverse engineering it from the three.js code. However, I am puzzled by how materialPainting1 can be utilized in the cal ...

What is the best way to add to a variable in jQuery?

I have the following piece of code: var golden_site = '<div id="golden_site"></div>'; $('.form_content').append(golden_site); var lookup = '<input type="text" name="lookup" value="test">'; Can anyone explai ...

The code encountered an issue: The class THREE.PlaneBufferGeometry cannot be used as a

Help needed! I am facing an error in my code and the console is showing this message: THREE.PlaneBufferGeometry is not a constructor Here is the code snippet: function particleSetup() { let loader = new THREE.TextureLoader() ; loader. load("smo ...

The app.get() method in Node JS and Express requires three parameters, and I am seeking clarification on how these parameters work

Hey there, I'm new to this and have a question regarding my code using passport-google-oauth20. app.get('/auth/google/secrets', passport.authenticate('google',{failureRedirect: '/login'}), function(req,res){ res.redirec ...

What is the process for including paths as parameters in jvectormap?

Can you assist me with a simple question regarding jvectormaps? How can I pass paths as parameters using this plugin? $('#worldMap').vectorMap({ map: 'world_mill_en', backgroundColor: "transparent", ...

Tips for updating a specific portion of a component in react.js

import React,{useEffect} from 'react'; import CloudTables from '@cloudtables/react'; import { useState } from 'react'; function DataGridTable ({ input1Value, input2Value }) { return ( <div className="con ...

Jquery is failing to handle multiple inputs

I am currently working on a system that can handle multiple Yes/No questions. However, every time I try to submit the form, I encounter an error in the console that I cannot identify, and no data is returned from the query. Previously, I used an Array to s ...

Guide to implementing an ES6 template within an HTML anchor tag href

Hello there, this is my first time seeking assistance here. I have an ajax request returning a JSON response. Now, I am aiming to use the response data to dynamically generate recipe titles and also create clickable links with that data. $( window ).load( ...

Update information without the need for an xhr request in the back-end using jQuery

To keep notification updated with any changes in the database without causing a slowdown to the website, I implemented the following solution: HTML Code: <div id="myid">{{ $db_data }}</div> Back-end Request (utilizing Laravel): $db_data = A ...

Tips for utilizing Material UI's Tooltip feature alongside a TableRow

I'm currently facing an issue where I'm trying to include a MUI TableRow inside a Tooltip component in order to display a long uuid when hovering over the row. However, I noticed that all the columns of the row are being compressed into the first ...

Vue API and Frame

Just starting out. Looking to display a skeleton while waiting for data from the API. Any ideas on how to achieve this? Appreciate any help My workaround involved implementing a timeout function ...

Transform your traditional sidebar into a sleek icon sidebar with Semantic UI

I am working on customizing the semantic-ui sidebar. My goal is to have it minimize to a labeled icon when the toggle button is clicked. However, I am having trouble with the animation and getting the content to be pulled when I minimize it to the labeled ...

What steps can be taken to avoid or halt focusing on the following input text element?

I came across a situation where I have to focus on the h1 element of an overlay instead of moving to the next tabbable element. The overlay appears after a service call triggered by blur event from the first input text field. Every time the blur event is ...

Is it not possible to utilize async/await with MongoDB Model, despite it yielding a Promise?

Currently, I am facing an issue with a function in my code that is supposed to retrieve a user's inventory and then fetch the price property of each element using data from a Price Collection. Below is a snippet of the function (not the entire thing, ...

Having trouble with SCSS in Angular 4 CLI after adding new CSS styles?

After successfully creating a fresh Angular project using the Angular CLI for Angular 4, I decided to generate it with SCSS: ng new myproject --style=sass Everything went smoothly until I attempted to add some CSS code. For instance, when I added the fo ...

I'm struggling to adjust the height of a div based on whether a list item within it contains a nested unordered

I have been working on a horizontal menu that is functioning well for me. However, according to the design requirements, I need to adjust the height of <div id="nav-subMenu"></div> if the main/parent menu li does not have any submenus or ul. Th ...

Issue with returning value from promise object in Next.js

Hello! I am fairly new to JS and React, so I would appreciate your patience as I try to navigate through this. It has been quite a journey so far. In my component, I am fetching JSON data from a URL and attempting to extract a specific value from it to d ...

Utilizing Vue 3 Composition API across various components for increased efficiency

I have a collection of files: App.vue, Header.vue, search.js, and Search.vue App.vue is responsible for incorporating different views. Header.vue contains an input box: <input type="text" v-model="searchPin" @keyup="searchRes ...

Using Angular to make GET requests with JSON data in PHP

Seeking assistance with connecting Angular frontend to PHP backend. Upon calling the service, I am receiving an empty array in the console. Controller: angular.module('pageModule') .controller('pageController', ['$scope', &a ...