File uploading on Dataiku Webapp Server using HTML/Javascript

Options
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
    Answer ✓
    Options

    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 dataikufrom 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', 400extra_param = request.form.get('extra', '')f = request.files.get('file')mf = dataiku.Folder('box') # name of the folder in the flowtarget_path = '/%s' % f.filenametry:mf.upload_stream(target_path, f)ret = {}ret["uploaded"] = mf.get_path_details(target_path)ret["extra"] = extra_paramreturn json.dumps(ret, indent=2), 200except Exception as e:return str(e), 500

    Regards,

    Frederic

Answers

  • Diljeet
    Diljeet Registered Posts: 2 ✭✭✭✭
    Options

    @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
    fchataigner2 Dataiker Posts: 355 Dataiker
    Options

    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

Setup Info
    Tags
      Help me…