HomeAPI DocumentationExample API Requestapi/FileUpload

1.3. api/FileUpload

The following example code shows how to make a request to the FileUpload API method.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>

<body>

    <div style="font-size: 18pt;">
        <span id="spanlogofile">Click to upload new logo</span>
        <div id="orglogo" style="margin-top: 10px;"></div>
        <input type="file" id="logofile" />
    </div>

    <!-- JavaScript Libraries -->
    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/jquery/jquery-migrate.min.js"></script>
    <script src="js/fileupload.js"></script>

</body>
</html>

 

Javascript

$(document).ready(function () {

    var baseurl = "https://web-integration-v3.rubicrm.com/";
    var apikey = <YOUR-API-KEY>;
    var uid = <YOUR-UID>;
    
    var myitems = [];
    myitems.push(uid);
    myitems.push('UserCompany');
    var myvalues = [];
    myvalues.push({ uid: uid });
    myitems.push(JSON.stringify(myvalues));
    myitems.push(apikey);
    $.ajax({
        type: "POST",
        url: baseurl + "api/User",
        data: { '': JSON.stringify(myitems) },
        success: function (data) {
            if (data.length > 0) {
                data = JSON.parse(data);
                var responseCode = JSON.parse(data.ResponseCode);
                var responseMessage = JSON.parse(data.ResponseMessage);
            }
            if (Number(responseCode) === 200) {
                var responsemessagelength = responseMessage.length;
                var orglogo = $('#orglogo');
                for (i = 0; i < responsemessagelength; i++) {
                    var CompanyLogo = responseMessage[i].CompanyLogo;
                    if (CompanyLogo !== '') {
                        orglogo.html('<img id="userlogo" data-file="logofile" data-old="' + CompanyLogo + '" src="' + CompanyLogo + '" + class="img-fluid" />');
                    }
                    else if (CompanyLogo === '') {
                        orglogo.html('<img id="userlogo" data-file="logofile" data-old="" src="/img/upload-file.png" + class="img-fluid" />');
                    }
                }

                var userlogo = $('#userlogo');
                fileupload(userlogo, userlogo.data('file'), userlogo.data('old'));
            }
            else {
                console.log(responseMessage);
            }
        },
        error: function (error) {
            var test = error;
        },
        failure: function (error) {
            var test = error;
        }
    });

    function fileupload(mycontrol, uploadtype, oldfile) {
        var datafile = mycontrol.data('file');
        mycontrol.click(function () {
            $('#' + datafile).click();
        });
        $('#' + datafile).unbind('click');
        $('#' + datafile).change(function () {
            var filecontrol = $(this);
            if (filecontrol.val() === '') {
                alert('Please select file');
                return;
            }
            else {
                var formData = new FormData();
                var file = filecontrol[0];
                var filesize = file.files[0].size;
                if (filesize > 1000000) {
                    alert("Files must be < 1mb in size");
                }
                else {
                    formData.append("file", file.files[0]);
                    formData.append("uid", uid);
                    formData.append("uploadtype", uploadtype);
                    formData.append("oldfile", oldfile);
                    formData.append("apikey", apikey);
                    $.ajax({
                        url: baseurl + "api/FileUpload",
                        type: "POST",
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function (data) {
                            if (data.length > 0) {
                                data = JSON.parse(data);
                                var responseCode = data.ResponseCode;
                                var responseMessage = data.ResponseMessage;
                            }
                            if (Number(responseCode) === 200 && responseMessage === "True") {
                                window.location.reload();
                            }
                            else {
                                console.log(responseMessage);
                            }
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
                }
            }
        });
    }
});

This page was: Helpful | Not Helpful