Troubleshooting a Laravel method invoked in JavaScript using PhpStorm

I'm seeking some advice on how to debug a Laravel function mapped in a JavaScript function that is being called in an HTML page.

 $('#upload-avatar').fileapi({
     url: '{{ route("user.avatar") }}',
     accept: 'image/*',
     data: { _token: "{{ csrf_token() }}" },
     imageSize: { minWidth: 100, minHeight: 100 },
     elements: {
        active: { show: '.js-upload', hide: '.js-browse' },
        preview: {
           el: '.js-preview',
           width: 96,
           height: 96
        },
        progress: '.js-progress'
     },

As you can see, the user.avatar Laravel function is triggered when attempting to upload an image. My issue is that IntelliJ IDEA doesn't respond when I click the Upload button.

I have "Start listening for PHP debug connections" turned ON. Do I need any additional configurations to debug JavaScript code embedded in an HTML page?

javascriptlaravel-4phpstorm

Answer №1

To optimize your experience, I recommend utilizing Chrome as your browser of choice. Once in Chrome, access the web developer tools and navigate to the Network tab. As you attempt to upload a file, pay attention to any new requests that appear in this network tab. If you have set 'debug' : true in the app/config/app.php configuration file, Laravel will provide detailed error information for troubleshooting purposes.

For a visual representation, consider the following scenario:

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

Iterate through the complex array of nested objects and modify the values according to specified conditions

I am currently iterating through an array of objects and then delving into a deeply nested array of objects to search for a specific ID. Once the ID is found, I need to update the status to a particular value and return the entire updated array. Issue: Th ...

javascriptangulartypescript

Limiting input to specific characters is effective on Chrome, but unfortunately does not function on Firefox

This code snippet is designed to restrict user input to lowercase letters from a-z, numbers from 0-9, and the dash character "-". While it functions correctly in Chrome, it does not allow any input in Firefox. What could be causing this issue? $('#sl ...

javascriptjqueryfirefox

What is the best way to personalize the collector for each individual?

Currently, I have a bot that is capable of collecting messages and replying if it detects a specific word. However, I am facing an issue where the bot keeps creating new collectors every time someone types the word tekong. As a result, the bot ends up resp ...

javascriptnode.jsdiscord.js

Determine whether the keyCode value matches any items within a specific array

Currently, as I am in the process of creating a small typewriter application, I have encountered an issue with determining if the button pressed matches the value of specific span elements. To provide further context, there are two divs each containing sp ...

javascriptcharkeycode

Storing Code into mongoDB with the Help of CasperJS

What is the best way to save data scraped using casperjs into MongoDB? My casperjs script scrapes information from millions of websites and saves each site's content in its own folder. However, I have come to realize that it would be more efficient to ...

javascriptmongodbcasperjs

What is the method for defining functions that accept two different object types in Typescript?

After encountering the same issue multiple times, I've decided it's time to address it: How can functions that accept two different object types be defined in Typescript? I've referred to https://www.typescriptlang.org/docs/handbook/unions ...

javascripttypescript

Unable to retrieve data from mysql using javascript and ajax

I am having trouble retrieving data from a MySQL database using AJAX. I have tried adapting my old AJAX code that worked fine in another project, but it doesn't seem to be working here. Here is the JavaScript function I am using: var text1 = documen ...

javascriptphpajax

Output is not being displayed by Ajax

I created a basic PHP code that populates rows and columns with an asterisk (*). To test the PHP code, I entered the URL localhost/squareService.php?rows=3&cols=3 However, when I asked a user to input the number of rows and columns using HTML and Java ...

javascriptphpajax

Error: Unable to encode data into JSON format encountered while using Firebase serverless functions

I am currently working on deploying an API for my application. However, when using the following code snippet, I encountered an unhandled error stating "Error: Data cannot be encoded in JSON." const functions = require("firebase-functions"); const axios = ...

javascriptfirebaseaxiosgoogle-cloud-functions

How to retrieve a nested array element in JavaScript

Here is the Pastebin link of the index.html file for reference: http://pastebin.com/g8WpX6Wn (The file contains broken image links and no CSS styling). If you would like to access the entire project, you can download the zip file. I am currently working ...

javascriptjqueryhtmlarraysfor-loop

What is the best way to send ServerSideProps to a different page in Next.js using TypeScript?

import type { NextPage } from 'next' import Head from 'next/head' import Feed from './components/Feed'; import News from './components/News'; import Link from 'next/link'; import axios from 'axios&apo ...

javascriptreactjstypescriptnext.jsserver-side-rendering

Filtering function that works without specific knowledge of keys

I'm working on a JavaScript method to filter a list dynamically without knowing the specific key (s). I've made some progress, but I'm stuck and not sure how to proceed. The foreach loop I have isn't correct, but I used it for clarity. ...

javascriptreactjstypescript

Utilize the ng-controller directive with unique aliases across various sections of HTML code

I'm facing an issue with my ng-controllers when multiple controllers are used on the same page. For instance, I have one controller in the page header, another in a different section of the same page, and one in the content of the page. However, all o ...

javascripthtmlangularjsangularjs-service

What could be causing JQuery Clip to malfunction?

I'm currently exploring the clip function in JQuery to see how it works. Despite my efforts, I'm facing difficulties in getting the function to operate correctly. My intention is to make the image shrink to nothing within a second. Below is a sni ...

javascriptjquery

"The challenge of handling multiple HTTP requests in Node.js without receiving proper responses

Hello there, I've been struggling with a Node.js HTTP request issue involving a loop. The loop size is 1728, but the response seems to be missing as it gets stuck at 1727. I've been trying to solve this problem for the past three days with no luc ...

javascriptnode.jshttprequest

Implementing the OnClick method for the button component

After successfully creating a reusable button component, I now want to assign different onClick links to each Button component. How can I achieve this? import styled from 'styled-components' const Button = styled.button` background: #0070f3; ...

javascriptreactjsnext.js

The process of displaying only the month name as the title in Full Calendar

Is there a way to display the Full Calendar title with only the month name instead of "month name year name"? Here is my code attempt: $('#calendar').fullCalendar({ header: { left: 'prev', center: 'title' ...

javascriptjquery

Modifying the $scope within a controller

I need to update the $scope within the controller based on the object that is being clicked. The current code looks like this: var blogApp = angular.module('blogApp', ['ngSanitize', 'ngRoute']); blogApp.controller('blog ...

javascriptangularjs

Submitting a form via axios using AxiosInstance for the POST request

I'm trying to figure out how to send a binary file using axios post request- let data= await axios.post(url, formDataObj,config) The formDataObj is an object of FormData and the config is an object that contains headers for the API So far, everythin ...

javascriptreactjsaxios

"Troubleshooting the issue with the jQuery function not being able to trigger a

When I press the enter key in an input field, I want to be able to select options from a searchable dropdown menu. However, this functionality is not working and the alert message I set up is also not functioning as expected. <div class="form-group m-f ...

javascriptjquerycsshtmlbootstrap-4