Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ayo Adesina 424 posts 1006 karma points
    Jan 30, 2020 @ 16:55
    Ayo Adesina
    0

    Calling Umbraco Web API - Custom Back office functionality.

    I have some custom functionality in the back office of Umbraco.

    The user selects a file, clicks a button. A Umbraco Web API controller is called and some logic is performed.

    The logic is related to a database import, has several steps, and takes a while to complete.

    So this logic has now been split in to more than one API call. I have tested them all individually and they all work.

    Now I want to change the JS/Angular to call each API call ONE BY ONE in a specfic order, waiting for each call to reply with a "HTTP OK" message BEFORE calling the next one. So something like this:

    const onSelectFile = (e) => {
        e.preventDefault();
    
        notificationsService.info("Processing Started", "Processing...");
    
        //CallAPI1(input.files[0]) WAIT
    //CallAPI2() WAIT 
    //CallAPI3() WAIT 
    //CallAPI4() WAIT #
    
        notificationsService.info("All Done", "Complete");
    }
    
    form.addEventListener('submit', onSelectFile, false);
    

    Can someone help me with the syntax?

    Thanks Ayo

  • Ayo Adesina 424 posts 1006 karma points
    Feb 03, 2020 @ 11:17
    Ayo Adesina
    0

    This is what I have got so far. The first API call works, however the browser shows 500 error for the second call, but it never hits my break point. Can anyone help me with the saytax am I going in the right direction?

        const validateFileType = (file) => {
        loader.style.display = "block";
        message.innerHTML = "Validate inner message here";
        let formData = new FormData();
        formData.append('file', file);
    
        const response = fetch('/umbraco/api/productupload/ValidateFileType', { // Your POST endpoint
            method: 'POST',
            body: formData // This is your file object
        });
    
        loader.style.display = "none";
    
        return response;
    };
    
    const validateHeaders =  (file) => {
        loader.style.display = "block";
        message.innerHTML = "";
        let formData = new FormData();
        formData.append('file', file);
    
        const response = fetch('/umbraco/api/productupload/ValidateHeaders', { // Your POST endpoint
            method: 'POST',
            body: formData //
        });
    
        loader.style.display = "none"
    
        return response;
    };
    
    const onSelectFile = (e) => {
        e.preventDefault();
    
        notificationsService.info("Processing Started", "Processing...");
    
        validateFileType(input.files[0]).then(validateHeaders(input.files[0]));
    
    }
    
  • Patrick van Kemenade 97 posts 325 karma points
    Feb 28, 2021 @ 21:51
    Patrick van Kemenade
    0

    Since I can see the code of the backend API, it's a bit guessing, so here it goes. I can think of 2 possible scenarious where the first call works and the second gives back 500 and not hitting a breakpoint within this function.

    If the naming was incorrect it would give back a 404, so it is making a roundtrip to the server and finds something.

    Guess 1: ValidateHeaders is a reserved keyword in UmbracoApiController or any other class you're using in the backed, simply chaning it to MyValidateHeaders would the solve it.

    Guess 2: Just above the function you can control authorization and who can access it, if the first one has [AllowAnonymous] and the second doesn't that would also explain the difference in behaviour.

    Other things you can try, if this doesn't work, clear the function and keep only the return statement in. Or change the order calling function 2 before function 1.

Please Sign in or register to post replies

Write your reply to:

Draft