How to upload file using server side script

Frappe Framework Customization
1

I am building a Face Recognition app, where the user image when user clocks-in should be saved in files,
Screenshot from 2024-10-02 16-00-20

this is how i am trying to upload the files to file doctype,
is this correct, if so what should be the values to be passed to file_name, folder, file_url

but the checkin and checkout images are being saved at public/files ie.,
“public/files/Employee CheckIn/EMP-00992_20241002_124755.jpg”

2

Hi @Vinay1,

Try using frm.call() and call your method or function you’re trying to call to save your file. And also add a decorator on your function @frappe.whitelist() explained in the link above.
Eg:-

Method:

frm.call({
	doc: frm.doc,
	method: "save_file"
});

Function:

frm.call({
	doc: frm.doc,
	method: "{{ complete path to function }}"
});

And also the file entry it created in the document but the file resides in public or private folder only.
Hope this helps.

3

hey @Dev1, i just want to know what value should be passed to file_url
i tried file_url = f"/private/files/{filename}" but getting error “File does not exist”
i am passing the image as base64Image to backend, now i want to upload the image in file doctype

4

it turns out value of file_url field is generated automatically when the file is uploaded successfully
we need to pass the file name, is_private, content and below is the code
btw below code is of HR PWA app

//frontend
const captureImage = () => {
    const video = videoRef.value;
    const canvas = canvasRef.value;
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    return canvas.toDataURL('image/jpeg').split(',')[1];
  };
const base64Image = captureImage();
const addAttendance = await createResource({
        url: 'hrms.hr.doctype.api.verify_attendance',
        method: 'POST',
        params: {
          attendance_type: currentAction.value,
          image_data: base64Image,
        },
        auto: false,
        onError(error) {
          console.log("attendance failed, error: ",error);
          console.log("toastMessage: ",toastMessage);
          toastMessage.value = "Face not recognized. Please try again.";
        },
        // on successful response
        onSuccess(data) {
          console.log("attendance success, data: ",data);
          if(data.success){
            console.log("data.success in if")
            toastMessage.value = data.message;
          }else{
            console.log("data.success in else")
            toastMessage.value = data.error;
          }
          
        },
      });
await addAttendance.fetch();

//backend
image_bytes = base64.b64decode(image_data)
file_doc = frappe.get_doc({
            "doctype": "File",
            "file_name": filename,
            "folder": folder,
            "is_private": 1,
            "content": image_bytes,
        })
file_doc.insert(ignore_permissions=True)

the image should be in bytes

5

You can also use without base64 conversion through rest api

https://frappeframework.com/docs/user/en/api/rest#file-uploads

Just add one more flag there

-F is_private=1

1 Like