File uploading on Dataiku Webapp Server using HTML/Javascript

Diljeet

I am designing a web app using Html/Javascript in Dataiku.

Basic functionality of webapp is to let user upload a file and some input options.

i am struggling to understand the code functionality that can be used to upload file on Dataiku server using javascript and HTML.

Can you please help me with some code snippet?

fchataigner2

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

Diljeet

@fchataigner2
Thanks alot for the solution.

I have decided to use AWS S3 bucket for file storage, it would be of great help if you can share some code snippet for that as well.

fchataigner2

Hi,

simply create a S3 connection in Administration > Connection, make sure the connection has "Allow managed folders" checked, then create a Folder (from the flow, + New Dataset > Folder) on that connection.

Regards,

Frederic