Webpage developing Weekly I learned 6

7–7–2021 ~ 7–7–2021

File upload

You gotta import bootstrap first before you make file uploading.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Here’s bootstrap starting code.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

This is the form that browse you to your finder and pick a file you want to get.

<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>

And this is the javascript import.

$(document).ready(function () {
    bsCustomFileInput.init()
})

This is also the javascript import.

File receive

file = request.files["file_give"]

save_to = 'static/mypicture.jpg'
file.save(save_to)

On the Python(server), you can use these code to receive the file that sent from client

File send

function posting() {

    let file = $('#file')[0].files[0]
    let form_data = new FormData()

    form_data.append("file_give", file)

    $.ajax({
        type: "POST",
        url: "/diary",
        data: form_data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

You use this to send the file to the server unlike words files put files in form data and send it to server.

F-string (python)

Let’s see why we use F-string.

name = "Daniel"
age = 12

introduce = "Hi, I'm"+name+", and I'm" +str(age)+"years old"
print(introduce)

This is what we normally write on code, it’s isn’t kinda disorganized.

name = "Daniel"
age = 12

introduce = f"Hi, I'm {name}, and I'm {age} years old"

print(introduce)

But in this code it’s looks very organized. you put p before and outside of the string, and write variable inside this {}.

Python datetime

from datetime import datetime
now = datetime.now()
print(now)

This is datetime library in Python you can use it them when you need to get the time, but In my case I’m gonna use it to make files name different because time always changes.

file_receive = request.files["file_give"]

File receive as file_receive

extension = file_receive.filename.split('.')[-1]

Once you receive the file split it from . to get the format of the file.

today = datetime.now()

mytime = today.strftime('%Y-%m-%d-%H-%M-%S')

And make a time

filename = f'file-{mytime}'

And put the time into the filename so the file's name wouldn't be same

save_to = f'static/{filename}.{extension}'

And this code is where you gonna save the file.

file_receive.save(save_to)

And save the file

doc = {
    'title':title_receive,
    'content':content_receive,
    'file': f'{filename}.{extension}'
}

db.diary.insert_one(doc)

And make into dictionary and put it into db.