I have successfully uploaded a video, but I am having trouble streaming it from the Laravel storage/app folder.
Here is my Vue Js code:
<video width="120" height="240" controls>
<source :src="videoFullPath" type="video/mp4">
Your browser does not support the video tag.
</video>
The videoFullPath state value is
http://127.0.0.1:8000/storage/app/candidate_video/7/6514082.mp4If you encounter the same issue, please follow the steps below:
Step 1: Implement the following method in your Controller for file upload and display
function manageUploads($file, $savepath, $gid = ""){
// code implementation for managing uploads
}
function displayFile($file_id){
// code implementation for displaying files
}
// other supporting functions related to file management
Step 2: Create the specified function in app.js
methods: {
getMedia: function (id) {
return window.location.origin + "/api/displayFile/" + id;
},
}
Step 3: Utilize the HTML video tag
<video width="1220" height="240" controls>
<source :src="$root.getMedia(videoUploadFile.id)" type="video/mp4">
Your browser does not support the video tag.
</video>
Step 4: Use the 'user_video' value to fetch the file and play the video
$candidate->user_video_file = $this->getFile($candidate->user_video);
Step 5: Assign the video file to the 'videoUploadFile' state in Vue.js
axios.get("/getCandidate").then((response) => {
if(response.data.candidate){
this.videoUploadFile = candidate.user_video_file;
}
});
Note: Ensure that the 'user_video' column is of integer type
Step 6: Upload a file and save it into the database as an integer value using the 'manageUpload' function declared in step 1
<input
ref="file"
type="file"
@change="handleFile('image')"
name="user_image"
accept="image/*"
id="cover-upload"
/>
// handleFile and addImage functions for processing file uploads
// PHP function for adding candidate profile image
I am encountering an issue with updating content on the same page. Despite making changes to the data, it continues to display old information after a server update. The name currently displayed is Arnold Schwarzenegger. Even after successfully updating ...
I have a situation where I am using the following type: export type AutocompleteChangeReason = | 'createOption' | 'selectOption' | 'removeOption' | 'clear' | 'blur'; But when I try to compress the cod ...
I am currently working on integrating jquery with Reactjs to add a class on click event. The functionality works fine when the page is refreshed, but it stops working if I navigate to the page after clicking on any menu item without refreshing. How can I ...
I am currently utilizing the most up-to-date version of jQuery. Upon clicking this button: <input id="ShowImages" class="" type="button" value="images"> The following function is triggered: $("#ShowImages").click(function() { $("#MusicianImag ...
Is there a specific plugin required in Atom to display information when hovering over variables, objects, or functions similar to intellisense? VSCode does this automatically, but I am looking for the same functionality in Atom. https://i.stack.imgur.com/ ...
I am facing an issue with populating a text input with the output of a function in my HTML code. Despite trying different approaches, I am unable to figure out why it is not working correctly. Below is the snippet of my HTML code: <input type="text ...
After creating a data-grid and attempting to add records, I encountered an issue where pressing the TAB key automatically saved the data when focusing on the save button without manually pressing enter. How can this behavior be prevented so that manual con ...
I have multiple backbone models with nested sub-models. Here's how I've approached the solution: Models.Base = Backbone.Model.extend ({ relatedModels: {}, /** * Parses data based on the list of related models. * * @since ...
Looking at the code, my intention is to only execute one of these API requests based on whether origCompId is passed or not. If origCompId is passed as a query parameter, then duplicateInstance should run; otherwise, addNewInstance should be executed. The ...
Every time I refresh the page, an error pops up saying: Cannot read property 'ArtisanID' of undefined. Any suggestions on how to troubleshoot this issue? I'm relatively new to this framework and my intuition tells me that the component ins ...
After logging in, I set the username and loggedIn values. However, when refreshing the page, these values reset to their original states. Why is this happening? I never encountered this issue when using Vuex in Vue 2. Do I really need to store this data i ...
Encountering an issue in my error handler with the following message: Uncaught TypeError: Converting circular structure to JSON. I suspect that there might be an additional exception thrown within the JSON.stringify call leading to this error. It's p ...
I've found myself knee-deep in a legacy AngularJS project lately. The codebase is quite intricate and expansive, making it difficult to showcase here. However, I've come across an issue where functions triggered during digest changes are firing h ...
I am in the process of creating a tile-based grid and I need to expand the X-Y coordinates to include additional values for determining characteristics of each tile, such as resources (for example, food, water, stone, lumber) within a game context. Conside ...
I utilized ThreeJS, specifically React Three Fiber, to construct a 3D Canvas. After adding a glb model, point light, and ambient light, the outcome was disappointing. https://i.sstatic.net/6vHaOKBM.png Why does the texture appear so jagged? Could it be ...
Currently, I am experimenting with the Venues feature in hopes of displaying certain information before delving into more specific queries. In this process, I am utilizing nodejs along with the following module: https://www.npmjs.com/package/foursquarevenu ...
My colleagues and I are currently working on a CRUD application using .net mvc4. The project involves rendering dynamic content through jQuery based on customer choices. One challenge we face is the need to create multiple hidden inputs to pass additional ...
I recently made some edits to the p tags, but only one of them appeared to have changed. Upon trying to display the changes again, I couldn't see any difference. Here's the code snippet that I'm working with: $(document).ready(function() ...
https://i.sstatic.net/lGzTL.png After migrating my tables into the database, I encountered the following error message: SQLSTATE[42S01]: Base table or view already exists: 1050 Table 'users' already exists (SQL: create table users (id int u ...
As a newcomer to AngularJS, I am working on capturing a DateTime attribute in the UI and passing it to an Odata endpoint. However, the time being sent is not in the current local time. How can I convert this time to local time before sending it to the Odat ...