File uploading on Dataiku Webapp Server using HTML/Javascript

Diljeet
Diljeet Registered Posts: 2 ✭✭✭✭

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?

Best Answer

  • fchataigner2
    fchataigner2 Dataiker Posts: 355 Dataiker
    edited July 17 Answer ✓

    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

Answers

Setup Info
    Tags
      Help me…