From 7ed1568917e698e9a7ff6759c99f85bfc910c67d Mon Sep 17 00:00:00 2001
From: philmcmahon <philip.mcmahon@theguardian.com>
Date: Thu, 30 Jan 2025 14:26:21 +0000
Subject: [PATCH] If media urls missing http/https protocol then add https
 protocol.

---
 packages/client/src/components/UploadForm.tsx | 12 +++++++-----
 packages/client/src/helpers.ts                |  6 ++++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/UploadForm.tsx b/packages/client/src/components/UploadForm.tsx
index 2ede275c..269b4771 100644
--- a/packages/client/src/components/UploadForm.tsx
+++ b/packages/client/src/components/UploadForm.tsx
@@ -1,4 +1,4 @@
-import { authFetch } from '@/helpers';
+import { addHttpsProtocol, authFetch } from '@/helpers';
 import React, { useContext, useState } from 'react';
 import {
 	SignedUrlResponseBody,
@@ -134,7 +134,8 @@ const checkUrlValid = (url_input: string): MediaUrlInput => {
 		if (url_input === '') {
 			return { value: url_input, status: 'empty' };
 		}
-		const url = new URL(url_input);
+		const cleanedUrlInput = addHttpsProtocol(url_input);
+		const url = new URL(cleanedUrlInput);
 		// we don't want people providing search results pages as yt-dlp will try and fetch every video
 		if (
 			url.pathname.includes('results') &&
@@ -223,8 +224,9 @@ export const UploadForm = () => {
 			);
 			setMediaUrls(urlsWithStatus);
 			for (const url of urls) {
+				const urlWithProtocol = addHttpsProtocol(url);
 				const success = await submitMediaUrl(
-					url,
+					urlWithProtocol,
 					token,
 					mediaFileLanguageCode,
 					translationRequested,
@@ -300,8 +302,8 @@ export const UploadForm = () => {
 	return (
 		<>
 			<p className={' pb-3 font-light'}>
-				This tool can transcribe both audio and video. You will receive an
-				email when the transcription is ready.
+				This tool can transcribe both audio and video. You will receive an email
+				when the transcription is ready.
 			</p>
 			<form id="media-upload-form" onSubmit={handleSubmit}>
 				<div className={'mb-1'}>
diff --git a/packages/client/src/helpers.ts b/packages/client/src/helpers.ts
index 6e092098..a535f2b5 100644
--- a/packages/client/src/helpers.ts
+++ b/packages/client/src/helpers.ts
@@ -8,3 +8,9 @@ export const authFetch = async (
 
 	return await fetch(request);
 };
+
+export const addHttpsProtocol = (url: string) => {
+	if (url.startsWith('http://') || url.startsWith('https://')) {
+		return url;
+	} else return `https://${url}`;
+};