Recently, I encountered an issue with a component in my project hosted on Namechap. The component involves uploading a video file and it was working perfectly fine on both my local machine and the production server. However, after making some changes to the project, I noticed that the upload functionality stopped working on the production server.
The project uses Vue v. 1.0.28, and the upload component contains a method called fileInputChange() which sends form data to the /upload endpoint. Strangely, on the production server, the backend is unable to read the form data being sent.
<template>
<div class="card-content col-md-10 col-md-offset-1">
<div v-if="!uploading">
<div class="col-md-12 Image-input__input-wrapper">
Upload video
<input type="file" name="video" id="video" @change="fileInputChange" class="Image-input__input" accept="video/*">
</div>
</div>
...
</script>
The problem arises when the request object in my controller's store function turns out to be empty on the production server causing issues related to finding the Video model. Despite inspecting the network tab and confirming that the payload is being sent correctly, the controller fails to find the necessary data.
No query results for model [App\Video].
This is the relevant section of the controller:
class VideoUploadController extends Controller
{
public function index()
{
return view('video.upload');
}
...
}
After discussing the issue with Namecheap support and creating a ticket, the problem resolved on its own without any apparent changes being made by either party. While this unexpected fix is reassuring, I remain concerned about preventing similar issues in the future.