File uploading on Dataiku Webapp Server using HTML/Javascript

Hi,

regular jquery and Flask code can do that. You'll need a managed folder in the flow of your project to put the file in.

html:

<form style="margin: 20px;">
  <div id="fileGroup" class="form-group">
    <label for="newFile">Select file</label> 
    <input id="newFile" class="form-control" type="file" />
  </div>
  <div id="paramGroup" class="form-group">
    <label for="someParam">Some param</label> 
    <input id="someParam" class="form-control" type="text" />
  </div>
  <button id="uploadButton" class="btn btn-primary">Upload to DSS</button>
</form>

js:

$('#newFile').on('dragover', function(e) {
    e.preventDefault();
    e.stopPropagation();
});
$('#newFile').on('dragenter', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $("#newFile").css("opacity", "0.5")
});
$('#fileGroup').on('dragleave', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $("#newFile").css("opacity", "")
});
$('#newFile').on('drop', function(e){
    $("#newFile").css("opacity", "")
    if(e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
        e.preventDefault();
        e.stopPropagation();
        $("#newFile")[0].files = e.originalEvent.dataTransfer.files;
    }
});
$('#uploadButton').click(function (e) {
    e.preventDefault();
    let newFile = $('#newFile')[0].files[0];
    console.log("send", newFile)
    
    let form = new FormData();
    form.append('file', newFile);
    form.append('extra', $('#someParam').val())
    
    let stopUpload = function() {
        $("#progress").remove();
    };
    
    let startUpload = function() {
        stopUpload();
            let progress = $('<div id="progress"/>').css("height", "10px").css("margin", "10px 0").css("background","lightblue");
        $('#fileGroup').append(progress);
    };

    let showResult = function(msg, isSuccess) {
        $("#result").remove();
        let result = $('<pre id="result"/>').css("margin", "10px 0").addClass('alert');
        if (isSuccess) {
            result.addClass('alert-success');
        } else {
            result.addClass('alert-danger');
        }
        result.html(msg)
        $('#fileGroup').append(result);
    };
        
    $.ajax({
        type: 'post',
        url: getWebAppBackendUrl('/upload-to-dss'),
        processData: false,
        contentType: false,
        data: form,
        success: function (data) {
            showResult(data, true);
        },
        error: function (jqXHR, status, errorThrown) {
            showResult(jqXHR.responseText, false);
        },
        xhr: function() {
            startUpload();
            var ret = new window.XMLHttpRequest();
            ret.upload.addEventListener("progress", function(evt) {
              if (evt.lengthComputable) {
                var pct = parseInt(evt.loaded / evt.total * 100);
                $('#progress').css("width", "" + pct + "%");
              }
            }, false);

            return ret;
        },
        complete: function() {
            stopUpload();
        }
    });
});

python:

import dataiku
from flask import request

@app.route('/upload-to-dss', methods = ['POST'])
def upload_to_dss():
    if 'file' not in request.files:
        return 'No file to upload', 400
    extra_param = request.form.get('extra', '')
    f = request.files.get('file')
    mf = dataiku.Folder('box') # name of the folder in the flow
    target_path = '/%s' % f.filename
    try:
        mf.upload_stream(target_path, f)
        ret = {}
        ret["uploaded"] = mf.get_path_details(target_path)
        ret["extra"] = extra_param
        return json.dumps(ret, indent=2), 200
    except Exception as e:
        return str(e), 500

Regards,

Frederic