Using the Dropbox API to Send Information to a Server-side Controller Using Ajax

Using the Dropbox API JavaScript Chooser, I am looking to retrieve the response data and pass it into my Controller.

Exploring Javascript Options for the Dropbox API

options = {
    success: function (files) {
        $.ajax({
            url: '/FileTransfer/FileData',
            type: "POST",
            dataType: "json",
            //data: JSON.stringify(files[0]),
            data: files,
            success: function (result) {}
        });
    },
    cancel: function () {},
    linkType: "preview", 
    multiselect: true
};

Action in the Controller

Currently, my controller action does not perform any tasks, but it is intended to store the retrieved data into a model once I can successfully pass the data into it, which seems to be my current challenge.

    public JsonResult FileData(string model)
    {
        return Json(new { success = true });
    }

Answer №1

Big thanks to Dyson for the helpful tips that guided me to solve my issue.

See the modified code snippet below, with a crucial change made to the data section and then deserialized within the Controller:

JavaScript

options = {
    success: function (files) {
        $.ajax({
            url: '/FileTransfer/FileData',
            type: "POST",
            dataType: "json",
            data: { result : JSON.stringify(files) },
            //data: files,
            success: function (result) {
                $("#FileList").load('/FileTransfer/Cloud');
                console.log(result);
             },
            error : function (jQXHR, textStatus, errorThrown) {
                //alert("An error occurred: " + jQXHR.status + " " + textStatus + " " + errorThrown);
            }
        });
    },
    cancel: function () {},
    linkType: "preview", 
    multiselect: true
};

Controller

    public JsonResult FileData(string result)
    {
        var convertedResult = JsonConvert.DeserializeObject<List<DropboxFile>>(result);

        CacheEntity(convertedResult);

        return Json(new { success = true });
    }

Answer №2

Enhanced code based on recommendation

Javascript

options = {
    success: function (files) {
        $.ajax({
            url: '/FileTransfer/FileData',
            type: "POST",
            dataType: "json",
            data: { result : files},
            success: function (result) {
                $("#FileList").load('/FileTransfer/Cloud');
            },
            error : function (jQXHR, textStatus, errorThrown) { }
            });
        },
        cancel: function () {
    },

    linkType: "preview", 
    multiselect: true 
};

Controller

public JsonResult FileData(List<DropboxFile> result)
{
    CacheEntity(result);

    return Json(new { success = true });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navbar not displaying output in React JS

I followed a tutorial on YouTube to create a navbar using Bootstrap and React, but I'm facing issues with the output. The YouTube tutorial used HTML along with Bootstrap to make the navbar. Even though the classes are similar, all I can see is a small ...

Tips for fixing the "500 (Internal Server Error)" issue in Laravel with ajax

When utilizing AJAX to fetch route data, I encountered an issue. I aim to create a Dynamic Select that, based on the selected "Faculty," displays the corresponding "programs" linked to that faculty. This is my route: Route::get('selectprogramas/{id ...

"Error encountered: Route class unable to reach local function in TypeScript Express application" #codingissues

Experiencing an 'undefined' error for the 'loglogMePleasePlease' function in the code snippet below. Requesting assistance to resolve this issue. TypeError: Cannot read property 'logMePleasePlease' of undefined This error ...

Thunk-based state access in Redux Toolkit

Is there a way to access the projectId value stored in state within a thunk, without passing it as a parameter when the action is called? interface RepoDetailsState { openIssuesCount: number error: string | null } const initialState: Rep ...

sticky navigation causing issues with tab functionality

Currently in the process of developing a website with a rather intricate sticky navigation bar. The JavaScript code being utilized to achieve this functionality is as follows: // Code for creating a sticky navigation bar document.addEventListener("s ...

Guide on how to navigate users to a new page using react-router-dom v6 within a class-based component

I am facing an issue where I need to redirect the user to '/dashboard' after logging in, but I do not want to use history.push() from react-router-dom v5.2.0 as I have react-router-dom v6 installed. Is there another alternative to achieve this re ...

Issues with login validation in HTML when utilizing JSON and PHP

While creating a login form in HTML using JSON and PHP, I encountered an issue where the if statements in the success function were not working properly. However, the beforeSend and error functions are functioning as expected. Can someone assist me in iden ...

The data type 'Event' cannot be assigned to the data type 'string' in this context

Recently diving into Angular, I came across a stumbling block while working through the hero tutorial. The error message that popped up was: Type 'Event' is not assignable to type 'string' You can see the error replicated here. ...

React Material-UI Multiple Select with Checkboxes not displaying initial selections as checked

I am fairly new to working with React and MUI, so please bear with me. Currently, I am in the process of learning how to create Multiple Select Options with checkboxes by populating the Dropdown Options from an Array. Although I have set up the initial/de ...

Vue 3 array error: Additional attributes not designated as props were passed to the component and could not be inherited automatically

Hey there, I'm currently delving into learning VueJS 3 and facing a beginner issue. When I check the browser developer console, I come across this warning message: https://i.stack.imgur.com/5eo6r.png The warning message reads as follows: [Vue warn]: ...

Interactive HTML Table - Capture Modified Fields

I currently have an HTML table that I am working with. The structure of the table is as follows: <table style="width:100%"> <tr> <th>id</th> <th>Lastname</th> <th>Age</th> </tr> <t ...

Passing console.log as an argument in a JavaScript abstraction

Hey amazing minds of the coding world! I've embarked on a journey to learn JavaScript and I'm currently immersing myself in the Eloquent JavaScript book! At the moment, I am working on abstracting a for loop action with this code snippet... fu ...

Is there a way to efficiently remove deleted files from my Google Drive using a customized script?

After creating a function in Google Scripts to clear my trashed files, I ran it only to find that nothing happened. There were no logs generated either. function clearTrashed() { var files2 = DriveApp.getFiles(); while (files2.hasNext()) { var c ...

Take away the CSS class from an element after reCAPTCHA verification is complete in Next.js

I'm struggling with removing the CSS class btn-disabled from the input button element upon successful verification of a form entry. I have implemented a function called enableForm to remove the btn-disabled CSS class when reCAPTCHA is verified. Howe ...

Combining Arrays in AngularJS with an owl-carousel Setting

My goal is to implement an endless scrolling carousel in AngularJS using owl-carousel. The idea is to load new items every time the carousel is fully scrolled and seamlessly merge queried elements with the existing list. However, I've encountered a pr ...

What is the method for executing a server-side script without it being transmitted to the browser in any way?

Although the title may be misleading, my goal is to have my website execute a php file on the server side using arguments extracted from the html code. For example: document.getElementById("example").value; I want to run this operation on the se ...

Chrome Browser: Issue with CSS and JavaScript transitions not functioning correctly

I have three images named img1, img2, and img3. Initially, their position is set to -50% absolute top right and left. When I change the position to static with a transition of 2s, they should move to the center. Issue: During the transition, there is snap ...

Icon bar struggling to contain voluminous material card content

I've incorporated Material UI cards into my project and have an icon bar at the bottom of each card. However, the media within the card is overflowing onto the icon bar, causing a layout issue as illustrated in this screenshot: https://i.sstatic.net/ ...

What is the best way to retrieve a specific value from an array of objects based on a condition?

I need some assistance with writing a function. Can you help me out? Let's say I have an array of objects: const movieGen = [ { id: 28, name: "Action" }, { id: 12, name: "Adventure" }, { id: 16, name: "Animation" }, ...

Encountering an issue with the node.js express server when fetching data

I'm running into an issue with the fetch function and node.js. When a button is clicked on my frontend, I want to send a post request to receive an array from my backend as a response. My backend is built using node.js with express, and I'm using ...