File Upload from portal page

Frappe Framework Website
1

I want to upload file from website portal. how to do that using frappe.handler.uploadfile() or any other alternative need help?

2

maybe this can help you:

3

This code assumes you are uploading files to Project DocType from web-view. Also includes multi-file upload with drag and drop on “choose files” button. Thanks @gvrvnk

HTML file in www : Include the script in the script tag or include it with jinja.

{% block header %}
  <h1>{{ doc.project_name }}</h1>
  <input type="hidden" id="projname" value="{{ doc.project_name }}">
{% endblock %}

<form id="frmFileUp">
  <input type="file" id="select_files" multiple>
</form>
<button id="btn_upload">Upload</button>

<script type="text/javascript">

  frappe.ready(function() {
    var $form = $("form[id='frmFileUp']");

    $form.on("change", "[type='file']", function() {
      var $input = $(this);
      var input = $input.get(0);
      
      if(input.files.length) {
        input.filedata = { "files_data" : [] }; //Initialize as json array.

        window.file_reading = true;

        $.each(input.files, function(key, value) {
          setupReader(value, input);
        });

        window.file_reading = false;
      }
    });

    $("#btn_upload").click(function() {
      var projname = $('#projname').val();
      var filedata = $('#select_files').prop('filedata');
    
      frappe.call({
        method: "app_name.api.attach_file_to_project",
        args: {"filedata": filedata, "project_name": projname },
        freeze: true,
        freeze_message: __("Upload files..."),
        callback: function(r){
          if(!r.exc) {
            frappe.msgprint(__("Files uploaded"));
          } else {
            frappe.msgprint(__("Files not uploaded. <br /> " + r.exc));
          }
        }
      });
    });
  });

  function setupReader(file, input) {
      var name = file.name;
      var reader = new FileReader();  
      reader.onload = function(e) {
      input.filedata.files_data.push({
        "__file_attachment": 1,
        "filename": file.name,
        "dataurl": reader.result
      })
    }
    reader.readAsDataURL(file);
  }
</script>

app_name/api.py:

import frappe, json
from frappe.utils.file_manager import save_file


@frappe.whitelist()
def attach_file_to_project(filedata, project_name):
  if filedata:
    fd_json = json.loads(filedata)
    fd_list = list(fd_json["files_data"])
    for fd in fd_list:
      filedoc = save_file(fd["filename"], fd["dataurl"],
          "Project", project_name, decode=True, is_private=1)

Idea of setupReader javascript - Looping through files for FileReader, output always contains last value from loop - Stack Overflow

1 Like
4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.