Client Uploads

Overview

The Uploads component is a client-side component that allows your end users to upload materials and files directly into your application. It provides an embeddable file upload interface that integrates seamlessly into your website. Example use case: Professors can use this component to upload course materials into a designated folder, which then serves as the knowledge base for an AI Teaching Assistant for their class.

For comprehensive documentation on uploading and managing materials, including API endpoints, folder organization, and search capabilities, see the Materials API Reference.

Creating an Uploads Component

import StudyfetchSDK from '@studyfetch/sdk';

const client = new StudyfetchSDK({
  apiKey: 'your-api-key',
  baseURL: 'https://studyfetchapi.com',
});

const uploadsComponent = await client.v1.components.create({
  name: 'Study Material Uploader',
  type: 'uploads',
  config: {
    folderId: 'folder_123' // Required: Target folder for uploads
  }
});

console.log('Uploads component created:', uploadsComponent._id);

from studyfetch_sdk import StudyfetchSDK

client = StudyfetchSDK(
    api_key="your-api-key",
    base_url="https://studyfetchapi.com",
)

uploads_component = client.v1.components.create(
    name="Study Material Uploader",
    type="uploads",
    config={
        "folderId": "folder_123"  # Required: Target folder for uploads
    }
)

print(f"Uploads component created: {uploads_component._id}")

import com.studyfetch.javasdk.client.StudyfetchSdkClient;
import com.studyfetch.javasdk.client.okhttp.StudyfetchSdkOkHttpClient;
import com.studyfetch.javasdk.models.v1.components.ComponentResponse;
import com.studyfetch.javasdk.models.v1.components.ComponentCreateParams;

public class CreateUploadsComponent {
    public static void main(String[] args) {
        StudyfetchSdkClient client = StudyfetchSdkOkHttpClient.builder()
            .fromEnv()
            .baseUrl("https://studyfetchapi.com")
            .build();

        ComponentCreateParams params = ComponentCreateParams.builder()
            .name("Study Material Uploader")
            .type(ComponentCreateParams.Type.UPLOADS)
            .config(ComponentCreateParams.Config.UploadsConfigDto.builder()
                .folderId("folder_123")  // Required: Target folder for uploads
                .build())
            .build();

        ComponentResponse component = client.v1().components().create(params);
        System.out.println("Uploads component created: " + component._id());
    }
}

using StudyfetchSDK;
using StudyfetchSDK.Models.V1.Components;
using System;
using System.Threading.Tasks;

public class CreateUploadsComponent
{
    public static async Task CreateUploads()
    {
        var client = new StudyfetchSDKClient()
        {
            APIKey = Environment.GetEnvironmentVariable("STUDYFETCH_API_KEY"),
            BaseUrl = new Uri("https://studyfetchapi.com")
        };

        var uploadsComponent = await client.V1.Components.Create(new()
        {
            Name = "Study Material Uploader",
            Type = StudyfetchSDK.Models.V1.Components.ComponentCreateParamsProperties.Type.Uploads,
            Config = new StudyfetchSDK.Models.V1.Components.ComponentCreateParamsProperties.ConfigProperties.UploadsConfigDto()
            {
                FolderID = "folder_123"  // Required: Target folder for uploads
            }
        });

        Console.WriteLine($"Uploads component created: {uploadsComponent._ID}");
    }
}

Configuration Parameters

name

string

required

Name of the uploads component

type

string

required

Must be "uploads"

config

object

required

Uploads configuration object

Show Configuration Properties

folderId

string

required

The folder ID where uploaded materials will be stored

materials

array

Array of material IDs associated with this component

folders

array

Array of folder IDs associated with this component

description

string

Optional description of the uploads component

Response

{
  "_id": "comp_505uvw",
  "name": "Study Material Uploader",
  "type": "uploads",
  "status": "active",
  "config": {
    "folderId": "folder_123"
  },
  "createdAt": "2024-01-15T10:00:00Z",
  "updatedAt": "2024-01-15T10:00:00Z",
  "organizationId": "org_456def"
}

Embedding This Component

Once you’ve created an Uploads component, you can embed it on your website using the embedding API.

Generate Embed URL

const embedResponse = await client.v1.components.generateEmbed(uploadsComponent._id, {
  // User tracking
  userId: 'user-456',
  studentName: 'Jane Smith',  // Student name for display
  groupIds: ['class-101', 'class-102'],
  sessionId: 'session-789',

  // Dimensions
  width: '100%',
  height: '400px',
  
  // Token expiry
  expiryHours: 24
});

embed_response = client.v1.components.generateEmbed(
    component_id=uploads_component._id,
    userId="user-456",
    student_name="Jane Smith",  # Student name for display
    groupIds=["class-101", "class-102"],
    sessionId="session-789",

    width="100%",
    height="400px",
    expiryHours=24
)

import com.studyfetch.javasdk.client.StudyfetchSdkClient;
import com.studyfetch.javasdk.client.okhttp.StudyfetchSdkOkHttpClient;
import com.studyfetch.javasdk.models.v1.components.ComponentGenerateEmbedParams;
import com.studyfetch.javasdk.models.v1.components.ComponentGenerateEmbedResponse;

StudyfetchSdkClient client = StudyfetchSdkOkHttpClient.builder()
    .fromEnv()
    .baseUrl("https://studyfetchapi.com")
    .build();

ComponentGenerateEmbedParams params = ComponentGenerateEmbedParams.builder()
    .id(uploadsComponent._id())
    // User tracking
    .userId("user-456")
    .studentName("Jane Smith")  // Student name for display
    .groupIds(List.of("class-101", "class-102"))
    .sessionId("session-789")
    
    // Dimensions
    .width("100%")
    .height("400px")
    
    // Token expiry
    .expiryHours(24)
    .build();

ComponentGenerateEmbedResponse embedResponse = client.v1().components()
    .generateEmbed(params);

using StudyfetchSDK;
using StudyfetchSDK.Models.V1.Components;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
public class GenerateUploadsEmbed
{
    public static async Task GenerateEmbed()
    {
        var client = new StudyfetchSDKClient()
        {
            APIKey = Environment.GetEnvironmentVariable("STUDYFETCH_API_KEY"),
            BaseUrl = new Uri("https://studyfetchapi.com")
        };

        var embedResponse = await client.V1.Components.GenerateEmbed(new()
        {
            ID = "component_123abc", // Replace with your component ID
            UserID = "user-456",
            StudentName = "Jane Smith",  // Student name for display
            GroupIDs = new List<string> { "class-101", "class-102" },
            Width = "100%",
            Height = "600px"
        });

        Console.WriteLine($"Embed URL: {embedResponse.EmbedURL}");
        Console.WriteLine($"Token: {embedResponse.Token}");
    }
}

Uploads-Specific Embedding Features

features.enableHistory

boolean

default:"true"

Show upload history and allow re-accessing previously uploaded materials

Embed in Your HTML

<iframe 
  src="https://embed.studyfetch.com/component/comp_505uvw?token=..."
  width="100%"
  height="400px"
  frameborder="0"
  style="border: 1px solid #e5e5e5; border-radius: 8px;">
</iframe>

Component API

REST API

Overview

Creating an Uploads Component

Configuration Parameters

Response

Embedding This Component

Generate Embed URL

Uploads-Specific Embedding Features

Embed in Your HTML

​Overview

​Creating an Uploads Component

​Configuration Parameters

​Response

​Embedding This Component

​Generate Embed URL

​Uploads-Specific Embedding Features

​Embed in Your HTML

Overview

Creating an Uploads Component

Configuration Parameters

Response

Embedding This Component

Generate Embed URL

Uploads-Specific Embedding Features

Embed in Your HTML