Skip to content

Commit

Permalink
add tags chooser to upload video form
Browse files Browse the repository at this point in the history
  • Loading branch information
@ProgramminCat
ProgramminCat committed Jan 3, 2025
1 parent 87f699d commit 6606226
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 85 deletions.
94 changes: 9 additions & 85 deletions app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -959,6 +959,11 @@ def upload_file():
if "ALLOW_UPLOADS" in vidzyconfig.config:
if vidzyconfig.config["ALLOW_UPLOADS"] is False:
return "This instance does not allow uploading videos"

video_description = ""
if request.form.get("description") != None and request.form.get("tags") != None:
video_description = request.form.get("description")
video_description += " " + request.form.get("tags")

if request.method == 'POST':
# check if the post request has the file part
Expand All @@ -976,7 +981,7 @@ def upload_file():
return 'File is too large. Please upload a file smaller than 99MB.'

if file and allowed_file(file.filename):
filename = datetime.today().strftime('%Y%m%d') + secure_filename(file.filename)
filename = datetime.today().strftime('%Y%m%d') + secure_filename(file.filename) + "__" + str(random.randrange(0,9999))
if s3_enabled == 'True':
new_filename = uuid.uuid4().hex + '.' + file.filename.rsplit('.', 1)[1].lower()

Expand All @@ -993,7 +998,7 @@ def upload_file():

cur = mysql.connection.cursor()

cur.execute( """INSERT INTO shorts (title, url, user_id, date_uploaded) VALUES (%s,%s,%s,%s)""", (request.form.get("title"), s3_fileurl, str(session["user"]["id"]), datetime.now().strftime('%Y-%m-%d')) )
cur.execute( """INSERT INTO shorts (title, url, user_id, date_uploaded, description) VALUES (%s,%s,%s,%s,%s)""", (request.form.get("title"), s3_fileurl, str(session["user"]["id"]), datetime.now().strftime('%Y-%m-%d'), video_description) )
mysql.connection.commit()
else:
temp_filepath = os.path.join(app.config['UPLOAD_FOLDER'], 'temp_video.' + file.filename.rsplit('.', 1)[1].lower())
Expand Down Expand Up @@ -1024,92 +1029,11 @@ def upload_file():

cur = mysql.connection.cursor()

cur.execute( """INSERT INTO shorts (title, url, user_id, date_uploaded) VALUES (%s,%s,%s,%s)""", (request.form.get("title"), filename, str(session["user"]["id"]), datetime.now().strftime('%Y-%m-%d')) )
cur.execute( """INSERT INTO shorts (title, url, user_id, date_uploaded, description) VALUES (%s,%s,%s,%s,%s)""", (request.form.get("title"), filename, str(session["user"]["id"]), datetime.now().strftime('%Y-%m-%d'), video_description) )
mysql.connection.commit()

return redirect(url_for('index_page'))
return '''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload a New Video</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 400px;
text-align: center;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
label {
font-size: 17px;
display: block;
margin-bottom: 8px;
text-align: left;
}
input[type="text"],
input[type="file"] {
width: calc(100% - 10px);
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 17px;
}
input[type="submit"] {
width: 100%;
height: 40px;
font-size: 17px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>Upload a New Video</h1>
<form method=post enctype=multipart/form-data>
<input type=text name=title placeholder="Video title">
<br><br>
<input type=file name=file>
<br><br>
<input type=submit value=Upload>
</form>
</div>
</body>
</html>
'''
return render_template("upload_video.html")

@app.route("/onboarding")
def onboarding_page():
Expand Down
133 changes: 133 additions & 0 deletions templates/upload_video.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload a New Video</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 400px;
text-align: center;
}

h1 {
font-size: 24px;
margin-bottom: 20px;
}

label {
font-size: 17px;
display: block;
margin-bottom: 8px;
text-align: left;
}

input[type="text"],
input[type="file"],
textarea {
width: calc(100% - 10px);
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 17px;
}

input[type="submit"] {
width: 100%;
height: 40px;
font-size: 17px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}

input[type="submit"]:hover {
background-color: #45a049;
}

.tags-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}

.tag {
background-color: #eee;
padding: 5px 10px;
border-radius: 15px;
cursor: pointer;
}

.tag:hover {
background-color: #ddd;
}

.tag-input {
width: 100%;
padding: 10px;
font-size: 17px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 20px;
}
</style>
</head>
<body>

<div class="container">
<h1>Upload a New Video</h1>
<form method=post enctype=multipart/form-data>
<input type=text name=title placeholder="Video title">
<br><br>
<input type=file name=file>
<br><br>
<textarea name=description placeholder="Description"></textarea>
<br><br>

<label for="tags">Add Tags (e.g., #travel, #holiday, #technology):</label>
<input type="text" id="tags" class="tag-input" placeholder="Type or select tags" name="tags">

<div class="tags-container" id="tagList">
<span class="tag" onclick="addTag('#travel')">#travel</span>
<span class="tag" onclick="addTag('#holiday')">#holiday</span>
<span class="tag" onclick="addTag('#technology')">#technology</span>
</div>

<br><br>
<input type=submit value=Upload>
</form>
</div>

<script>
function addTag(tag) {
const tagInput = document.getElementById('tags');
if (tagInput.value) {
tagInput.value += ' ' + tag;
} else {
tagInput.value = tag;
}
}
</script>

</body>
</html>

0 comments on commit 6606226

Please sign in to comment.