[Vuejs]-Uploading a video using Laravel9, inertia, Vue3

0๐Ÿ‘

$request cannot receive from react as uploadedFile i.e hasFile

This is sent as base64 image/video so get it using has function only

get and save it like this.

add uploadImage function in model class

public function uploadImage($request,$fileNameColumn,$deleteOldFile = false)
{
    

    if ($request->has($fileNameColumn)  && (preg_match('/^data:image\/(\w+);base64,/', $request->{$fileNameColumn}, $type) || preg_match('/^data:video\/(\w+);base64,/', $request->{$fileNameColumn}, $type))) {
        $dir = '/uploads/videos_'.$this->id.'/'.$fileNameColumn;
        $fileName = Str::kebab ($this->id.uniqid('vid_').time());
        
        $details  = UploadsService::uploadBase64($request->{$fileNameColumn},$dir,$fileName,true,true);
        $this->{$fileNameColumn} = $details['url'];
        $this->save();
    }
}

public static function uploadBase64($image_64,$directory,$filename,$replace_file_name_if_matched = false,$delete_if_name_is_matched = false)
{
    $decodedImage = self::base64ToImage($image_64);
    $file = self::decodedImageToUploadedFile($decodedImage);
    $extension = explode('/', explode(':', substr($image_64, 0, strpos($image_64, ';')))[1])[1];
    $filename = $filename.'.'.$extension;
   
    $data =  self::uploadAccordingToStorageDisk($file,$directory,$filename,$replace_file_name_if_matched,$delete_if_name_is_matched);
    unset($file);
    return $data;
}

public static function base64ToImage($image_64)
{
    $replace = substr($image_64, 0, strpos($image_64, ',')+1);
    $image = str_replace($replace, '', $image_64);
    $image = str_replace(' ', '+', $image);
    $decodedImage = base64_decode($image);
    return $decodedImage;
}

    public static function decodedImageToUploadedFile($decodedImage)
{
    //save in temp dir
    $tmpFilePath = sys_get_temp_dir() . '/' . Str::uuid()->toString();
    file_put_contents($tmpFilePath, $decodedImage);
    // this just to help us get file info.
    $tmpFile = new File($tmpFilePath);
    $file = new UploadedFile(
        $tmpFile->getPathname(),
        $tmpFile->getFilename(),
        $tmpFile->getMimeType(),
        0,
        true // Mark it as test, since the file isn't from real HTTP POST.
    );
    unset($tmpFile);
    return $file;
}


    public static function uploadAccordingToStorageDisk($file,$directory,$filename,$replace_file_name_if_matched = false,$delete_if_name_is_matched = false)
{
    
    $filename = str_replace(['!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '<', '>', '\\', '/', '//', ' '], '', $filename);

    checkIfDirectoryIsAvailable($directory);
    if($delete_if_name_is_matched){

        checkIfFileIsUploadedThenDelete(asset($directory.'/'.$filename));
    }
    if($replace_file_name_if_matched){
        $isUploadedWithSameName = checkIfUploadedFileHasSameName(asset($directory .'/'. $filename));

        $filename = $isUploadedWithSameName ? time() . '_' . $filename : $filename;
    }
    $filename = time() .'_'.$filename;

    $uploaded = $file->move(
        public_path($directory) //directory from public path becomes location of the file in uploads
        ,$filename);
    if($uploaded){
        return ['url' => $directory .'/'. $filename, 'name' => $filename];
    }
    throw new \Exception('File could not be uploaded');

}

call imageUpload file after creating record.

$course->uploadImage($request,'video',true);

Leave a comment