File upload on drop with angular-wakanda

Question

I'm trying to add a file upload on drop even with Angular-Wakanda but do not really know where to start...

Image Upload (https://wakanda.github.io/angular-wakanda/#/doc/developer-guide/image-upload) with a file input element is working but i would like to process the file serverside after it has been uploaded: meaning to upload the file to a server directory an call a server method after the file has successfully been uploaded.

Any example or direction where to start would be appreciated.

Answer 1

For that you have to use your own method server side. You can use a RPC method, a dataclass method or a HTTP handler.

The solution I show you here use the last one, a HTTP Handler.

You have to send the file choosen in the fileUpload and then do the process on the server-side inside the server-side method.

Here is my client-side code

function uploadFiles() {
    return new Promise(function(resolve,refuse){
        var fileInputs = $('#editorsDiv input[type="file"]'),
            fd = new FormData(),
            atLeastOneFile = false;

        fileInputs.each(function(index,value){
            if(this.files.length !== 0){
                fd.append(this.id,this.files[0],this.files[0].name);
                atLeastOneFile = true;
            }
        });
        if(atLeastOneFile){
            $.ajax({
                url: '/uploadFile',
                type: 'POST',
                processData: false, // important
                contentType: false, // important
                dataType : 'json',
                data: fd,
                success:function(evt){
                    app.data.templateImages = evt;
                    resolve(true);
                }
            });
        }else{
            resolve(true); 
        }
    });
}

This method return a promise, bu you don't really need it.

And here is my code on the server-side

/*
 * This method can handle the upload of files send via http request
 * The files are stored in the DateFolder/uploadFiles
 * It return an JSON containing the id and the name of the fileuploaded. The name can change if there is an existing file with the same name.
 *
 */

function uploadFile(request,response){
    var i,
        j=1,
        nameTemp,
        files=[],
        returnJSON = [],
        newName;

    for(i=0;i<request.parts.length;i++){
        files.push(new File(getFolder('path')+'/DataFolder/uploadFiles/'+request.parts[i].fileName.replace(/\s/g,'_')));
        returnJSON[i]={};
        returnJSON[i].name = request.parts[i].name
        returnJSON[i].value = request.parts[i].fileName;
    }

    for(i=0;i<files.length;i++){
        j=1;
        if(!files[i].exists){
            myBinaryStream = BinaryStream(files[i],'Write');
            myBinaryStream.putBlob(request.parts[i].asBlob);
            myBinaryStream.close();
        }else{
            while(files[i].exists){
                nameTemp = files[i].name.replace(/\s/g,'_');
                files[i] = new File(getFolder('path')+'/DataFolder/uploadFiles/'+files[i].nameNoExt.replace(/\s/g,'_')+j+'.'+files[i].extension);
                newName = files[i].name;
                if(files[i].exists){
                    files[i] = new File(getFolder('path')+'/DataFolder/uploadFiles/'+nameTemp);
                }
                j++;
            }
            myBinaryStream = BinaryStream(files[i],'Write');
            myBinaryStream.putBlob(request.parts[i].asBlob);
            myBinaryStream.close();
            returnJSON[i].value = newName;
        }
    }
    returnJSON = JSON.stringify(returnJSON);
    response.contentType = 'application/json';
    return returnJSON;
}

You can see here that I process my files. Here what I do is that I create the file on the location <PROJECT_PATH>/DataFolder/Upload/, then I have to write the content inside the new created file with the BinaryStream. If the file already exist with this name, I add a counter that increment until the file name concat with a number isn't exist.

So here you could do whatever you want with the file. You can also give an ID and then save the file for an entity.

Another solution is, like Issam said, to use the validate event on the image attribute, then you should be able to process the file inside of the event.

It depends also on the process you want to do with the file?