Implementing chunk uploading for large video files with Laravel and VueJS

I am currently working on a Laravel project for API and a VueJS project for the front end. My main objective is to efficiently upload large video files to the server with minimal chances of failure. I have explored two different methods for achieving this.

Method 1 - Using resumablejs:

this.r = new Resumable({
  target:process.env.API_URL+'upload',
  query:{upload_token:'my_token'},
  headers:{
    Authorization: 'Bearer '
  },
  maxChunkRetries: 1,
  simultaneousUploads: 1,
  testChunks: false,
});
// Code snippet continues...

Method 2 - Creating manual chunk:

upload() {
  const url = 'upload'
  this.$axios.post(url, this.formData).then(() => {
    this.chunks.shift()
  }).catch((error) => {
  })
},
createChunks() {
  // Code snippet continues...
}

Both approaches yield similar results on the backend. The next step involves merging the chunk files into one final file. In my Laravel code, I have implemented the following-

public function upload(Request $request)
{
    $file = $request->file('file');
    Storage::disk('local')->append('output/' . $file->getClientOriginalName(), $file->get());
}

However, I am encountering an issue with the output generated using this approach. Although the input and output file sizes match, the resulting video file is not playable in its entirety. It plays only the initial few seconds before stopping abruptly. This issue is not present when dealing with PDF files. What could be causing this problem specifically with video files?

Answer №1

The issue lies within the PHP code, as there was an unexpected extra line break occurring when appending a chunk part. To fix this, I had to modify the code snippet from

Storage::disk('local')->append('output/' . $file->getClientOriginalName(), $file->get());
to
Storage::disk('local')->append('output/' . $file->getClientOriginalName(), $file->get(),null);

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

Choosing between JavaScript and Handlebars.js depends on the specific needs

Can anyone explain the advantages of utilizing Handlebars.js or similar libraries over solely relying on JavaScript? Thus far, I haven't come across any functionality in Handlebars that cannot be achieved with just pure JavaScript. ...

Adjust the dimensions of a Three.js-generated 3D Cylinder in real-time

Is it possible to dynamically change the dimensions of a 3D cylinder created using Three.js, similar to how we can adjust the size of a cube in this live example: http://jsfiddle.net/EtSf3/4/ Below is the code I have for the cylinder: HTML: <script s ...

Angular JS appears to be causing the DOM to freeze up while utilizing the ng-repeat directive to loop through

I have a current app where clicking a button triggers an $http request to fetch and return some data. The retrieved information is then used to update the $scope variables rows and columns, which are then looped through using ng-repeat. However, I've ...

Achieve the central element while scrolling on the window

What am I doing wrong? I've been attempting to target the #second element on scroll Here is an example with console.log CODEPEN EXAMPLE $(window).scroll(function(){ var section = $("#second").offset().left, scrollXpos = $( ...

The function addClass() seems to be malfunctioning

I'm currently experimenting with creating a scrolling cursor effect on a string of text. The goal is to make it look like the text has been highlighted with a blinking cursor, similar to what you see in your browser's search bar. window.setInter ...

Attempting to program a bot to navigate in a random pattern across a two-dimensional xz plane using Threejs

My journey began with the code below, which initiates a block moving in a straight line: const bot_geometry = new THREE.BoxGeometry(1,1,1); const bot_material = new THREE.MeshBasicMaterial( {color: 0x7777ff, wireframe: false} ); const bot = new THREE.Me ...

d3.on event firing prior to mouseover event

This page showcases a dynamic d3 bar chart. On line 162, we have an interesting event listener that logs a message when the user hovers over a bar on the chart. However, the log is displayed as soon as the page loads. You can see the running code in actio ...

Develop a built-in Button for Liking posts

Currently, I am encountering an issue with the JavaScript SDK where I am unable to create a built-in Like button. After researching, I came across this helpful resource: https://developers.facebook.com/docs/opengraph/actions/builtin/likes/ The solution pr ...

Unlock the potential of HTML5 Datalist: A comprehensive guide on integrating it with

The latest version of HTML, HTML5, has introduced a new tag called datalist. This tag, when connected to <input list="datalistID">, allows for autocomplete functionality on web forms. Now the question arises - what is the most efficient approach to ...

Clicking activates Semantic UI's dropdown function with the onClick method

I am experiencing an issue with the dropdown functionality on my website. Everything works fine until I add onClick() to the Semantic UI component. It seems like there are some built-in functions for handling onClick() within Semantic UI, so when I impleme ...

Guide on incorporating parent properties into nested routes?

Is it possible to avoid duplicating the meta properties within a nested route? { path: "/dashboard/users", component: UserIndex, meta: { layout: "UserLayout", title: "User Dashboard", middleware ...

Guide to developing interactive elements in VueJS

I recently started working with vueJS and have been attempting to dynamically load components. Despite trying various suggestions found online, I still haven't been successful. Here is the scenario: I want to create a 'shell' component that ...

Adjust the placement of the fixed header waypoint or change its offset

Currently working on developing a Wordpress site with the Avada theme, my goal is to have a sticky header that starts immediately at the top of the page. This is the website in progress: The site I'm trying to emulate is synergymaids.com. If you vi ...

modifying the IP address used while making a jQuery request

I am currently working on integrating a payment system, but unfortunately, I do not have a static IP address and my country is restricted. I am using my personal hosting with the whitelisted IP, however, it seems like the initial request to their servers ...

Vue encountering RangeError due to string length inconsistency in specific environments only

My Vue component is currently live in production within a WordPress theme, but I am encountering an error: jquery.min.js:2 Uncaught RangeError: Invalid string length at repeat$1 (vue.js:11398) at generateCodeFrame (vue.js:11380) at vue.js:1146 ...

In THREE.js, creating a line between two specific mouse click points on a canvas

In this scenario, I aim to showcase the distance between two mouse click locations on the canvas. While I have achieved this functionality, my struggle lies in creating a line connecting these points. I kindly request suggestions on what steps I should ta ...

The challenge of navigating through $scope

In my Angular view/form, I have an input file element that is being utilized with ng-upload. The code snippet looks like this: <input id="img" type="file" name="image" onchange="angular.element(this).scope().setFile(this)"> <input id="imgname" ty ...

Switch between displaying the HTML login and register forms by clicking a button

Currently, I am working on a website that requires users to either log in or register if they do not have an account. Below is the code I have developed for the login page: <span href="#" class="button" id="toggle-login">Log in</span> <di ...

Guidelines for incorporating local Google Fonts with Nuxt and integrating Tailwind

I'm having trouble getting the serif font 'Source Serif Pro' to display correctly in my app. I have successfully set up 'Roboto', but no matter what I try in the Tailwind config - whether it's an array or a string, specifying ...

My website keeps crashing because the "wheel" event is being constantly triggered

import React, { useEffect, useState } from "react"; import "./Skill.css"; import { Fade } from "react-reveal"; function Skill({ name, color }) { const [style, setStyle] = useState({ borderBottom: `4px solid ${color}` }); ...