Cannot retrieve JSON values in Filestack v3

I am currently working with Filestack (Filepicker) V3 to upload multiple files and retrieve filename, url, and mimetype. Based on the Filestack documentation for this latest release and a previous question that was asked here, I have implemented the following code:

var client = filestack.init('myapikey');
    client.pick({
      accept: 'image/*',
      fromSources: ['local_file_system','googledrive','gmail','facebook','dropbox','onedrive','webcam'],
      maxFiles: 5,
      imageMax: [1024, 1024]
    }).then(function(Blobs) {
      console.log(JSON.stringify(Blobs));

      var result = "";
      for(var i=0; i<Blobs.length; i++){
        result+=Blobs[i].filename + " : " + Blobs[i].url + " : " + Blobs[i].mimetype;
      }
      alert(result);

    });

For example, when uploading 2 files, the console output looks like this:

{"filesUploaded":[{"filename":"diploma1.jpg","handle":"1e3CkeZQaeokzS9TpcJM","mimetype":"image/jpeg","originalPath":"diploma1.jpg","size":258169,"source":"local_file_system","url":"https://cdn.filestackcontent.com/1e3CkeZQaeokzS9TpcJM","originalFile":{"customName":"diploma1.jpg"},"status":"Stored"},{"filename":"diploma2.jpg","handle":"kOejeHySTSG0TuSJWWlh","mimetype":"image/jpeg","originalPath":"diploma2.jpg","size":31072,"source":"local_file_system","url":"https://cdn.filestackcontent.com/kOejeHySTSG0TuSJWWlh","originalFile":{"customName":"diploma2.jpg"},"status":"Stored"}],"filesFailed":[]}

However, the alert does not display any result as expected. I would like the alert to show results in the format below:

diploma1.jpg : https://cdn.filestackcontent.com/1e3CkeZQaeokzS9TpcJM : image/jpeg
diploma2.jpg : https://cdn.filestackcontent.com/kOejeHySTSG0TuSJWWlh : image/jpeg

I could use some assistance.

Answer №1

After some research on how to work with the result console, I stumbled upon a helpful question. Following the suggestions there, I made modifications to my code and was finally able to achieve the desired outcome:

var client = filestack.init('myapikey');
    client.pick({
      accept: 'image/*',
      fromSources: ['local_file_system','googledrive','gmail','facebook','dropbox','onedrive','webcam'],
      maxFiles: 5,
      imageMax: [1024, 1024]
    }).then(function(Blobs) {

      console.log(JSON.stringify(Blobs));
      var result = JSON.parse(JSON.stringify(Blobs));

      var res = "";

      for(var i=0; i<result.filesUploaded.length; i++){
        res+=result.filesUploaded[i].filename + " : " + result.filesUploaded[i].url + " : " + result.filesUploaded[i].mimetype + "\n";
      }

      alert(res);

    });

:)

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

Could a commenting feature be seamlessly integrated directly into the video player, accessible with a simple click?

I'm exploring the idea of developing a video player that allows users to add comments directly from the player itself. Imagine this: the typical toolbar at the bottom includes standard features like seek bar, volume control, play/pause buttons, but wi ...

Harnessing the power of jQuery to create a horizontal scrolling experience based

I'm working on creating a javascript version of the website that currently uses flash. So far, I have completed the basic layout, which consists of a simple horizontal container with divs. You can view the code here http://pastebin.com/U3z2aJve I a ...

The conditional statement to check for an empty object does not trigger any actions

My goal is to display a success message once users successfully register without any errors. I have an errors reducer object in Redux that stores errors sent from the backend. The logic is set up so that if the errors object is empty, it shows the success ...

What could be the reason for the unexpected undefined value of my ajaxurl variable?

Seeking assistance with implementing code to track mp3 plays in a Wordpress plugin using ajax-counter.js jQuery(document).ready(function($) { console.log(ChurchAdminAjax.ajaxurl); $("audio").bind("play", function(){ console.log(ChurchAdmin ...

Angular Date Filtering to Show dd-mm-yyyy Format

I am having trouble filtering the date correctly in my controller. My desired date format is Thu Mar 31 2016 05:05:00 GMT-0400 (EDT). However, when I use the code mentioned above, the results show up as 03-31-2016. This is the code snippet from my contr ...

Constructing a table using an array in React

I need assistance with creating a table based on salary data for different sectors. I have an array with example data that includes currencies and sectors. const data=[ ['Euro','Tech'], ['USD','Tech'], ['GBX&apo ...

Choose to either check or uncheck boxes using ReactJS

After successfully creating a function to select either single or multiple boxes, I encountered an issue with the "Select all" feature. Any suggestions on how to resolve this? (I'm utilizing the material-ui library for my checkboxes, which are essenti ...

Run a jq command to export data from a JSON file

Below is an example of input json where the keys change dynamically, with the only consistent aspect being the text '_GROUP_NAME' and '_VERSION' [ { "PREPROCESS_GROUP_NAME": "preprocess-group-name", & ...

Ensuring Consistent Visual Harmony Across Linked Elements

As part of my project developing an iPad app with PhoneGap and jQuery Mobile, I am looking to incorporate a preview pane within a carousel. This preview pane should display smaller versions of the other panes scaled inside it. The panes are dynamic and upd ...

Encountering a TypeError: relativeURL.replace is not a valid function in Next.js

Why am I encountering this error in my Next.js application? TypeError: relativeURL.replace is not a function. (In 'relativeURL.replace(/^/+/, '')', 'relativeURL.replace' is undefined) Request.js file const API_KEY = process ...

What is the most effective method for destructuring within React components?

Observing how people implement destructuring in functional components in React, I have noticed a common pattern. const InputGroup = ({ name, placeholder, value }) => ( However, my preferred method differs: const InputGroup = props => { ...

The attempt to bring in the model using `require` has resulted in an error. The `require` method used here, in combination with `path.join`, does

As a beginner in web development, I have been working on a project using MySQL, Node.js with Express. However, I am encountering a TypeError issue when using Sequelize. Can anyone kindly explain this to me and assist me in finding a solution? "seque ...

The concept of selective importing within JavaScript

Seeking guidance on configuring conditional imports for a native library that is built for both node and electron. The challenge arises when one project requires the node implementation for testing, while another project needs the electron version. Projec ...

Electron employee: Concealed BrowserWindow leads to delay in the interface

My worker runs in a hidden browser window and sends multiple requests simultaneously. However, these requests from the worker end up causing lag and freezes in the main browser window. Any suggestions for resolving this issue? ...

Accessing a specific attribute of an object contained within an array

Currently, I am utilizing Vue.js in my project and have implemented a method that involves comparing values from two different arrays. array1: [{ name: 'test1', somevar: true }, { name: 'test2', somevar: false }] array2: ['test1 ...

Using jQuery to highlight the navigation menu when a specific div scrolls into view

I have implemented a side navigation consisting of circular divs. Clicking on one scrolls you to the corresponding .block div, and everything functions correctly. However, I am now curious if it is feasible to highlight the relevant .nav-item div based on ...

Exploring typeahead functionality with JSON and arrays structure

I'm facing an issue where I need to generate a json file from an sql query and utilize it with twitter typeahead. However, the current json format is not fitting the requirements for typeahead. The expected json format should look like this; [' ...

Unable to retrieve dynamically generated object property from an array in AngularJS 2+

Here is an example of an items array: this.itemList = [ { id: 1, name: 'a', address: 'as dasf a' }, { id: 2, name: 'b', address: 'as dasf a' }, { id: 3, name: 'c', address: 'as dasf a' } ]; ...

Accessing/Storing Pictures in MongoDB using Mongoose

I've been struggling with managing images in MongoDB for a while now. Everywhere I look suggests using GridFS because of the 16mb size limit per document. However, the documents I want to store are all <16mb each. Currently, I am storing it like th ...

Bringing in Chai with Typescript

Currently attempting to incorporate chai into my typescript project. The javascript example for Chai is as follows: var should = require('chai').should(); I have downloaded the type definition using the command: tsd install chai After refere ...