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.
Every file uploaded through the embed becomes a material in the component's folderId, where other components can use it. Learners can choose several files at once and decide whether images are extracted from them (on by default).
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.
Creating an Uploads Component
JavaScript
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',
description: 'Course materials for BIO 101',
type: 'uploads',
config: {
folderId: 'folder_123', // Required: Target folder for uploads
},
});
console.log('Uploads component created:', uploadsComponent._id, uploadsComponent.componentId);
Python
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",
description="Course materials for BIO 101",
type="uploads",
config={
"folder_id": "folder_123", # Required: Target folder for uploads
},
)
print(f"Uploads component created: {uploads_component.api_id} {uploads_component.component_id}")
Java
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")
.description("Course materials for BIO 101")
.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());
}
}
C#
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",
Description = "Course materials for BIO 101",
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
description
string
Optional description of the uploads component. This is a top-level field, not part of config.
type
string · required
Must be "uploads"
config
object · required
Uploads configuration object. Unknown keys (including description) are rejected with 400.
Configuration Properties
These properties go inside config.
folderId
string · required
The folder ID where uploaded materials will be stored
materials
array
Accepted and stored with the component, but not used by uploads
folders
array
Accepted and stored with the component, but not used by uploads
Response
{
"_id": "6650f1c2a9b3e4d5f6a7b8c9",
"componentId": "uploads_V1StGXR8_Z",
"name": "Study Material Uploader",
"description": "Course materials for BIO 101",
"type": "uploads",
"status": "active",
"origin": "api",
"organization": "64f0a1b2c3d4e5f6a7b8c9d0",
"materials": [],
"folders": [],
"config": {
"folderId": "folder_123"
},
"usageCount": 0,
"createdAt": "2026-10-06T10:00:00.000Z",
"updatedAt": "2026-10-06T10:00:00.000Z"
}
Embedding This Component
Once you've created an Uploads component, you can embed it on your website using the embedding API. The component must be active.
Generate Embed URL
JavaScript
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',
});
console.log(embedResponse.embedUrl);
Python
embed_response = client.v1.components.generate_embed(
uploads_component.api_id,
user_id="user-456",
student_name="Jane Smith", # Student name for display
group_ids=["class-101", "class-102"],
session_id="session-789",
width="100%",
height="400px",
)
print(embed_response.embed_url)
Java
import com.studyfetch.javasdk.models.v1.components.ComponentGenerateEmbedParams;
import com.studyfetch.javasdk.models.v1.components.ComponentGenerateEmbedResponse;
import java.util.List;
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")
.build();
ComponentGenerateEmbedResponse embedResponse = client.v1().components()
.generateEmbed(params);
System.out.println(embedResponse.embedUrl());
C#
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(string uploadsComponentId)
{
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 = uploadsComponentId,
UserID = "user-456",
StudentName = "Jane Smith", // Student name for display
GroupIDs = new List<string> { "class-101", "class-102" },
SessionID = "session-789",
Width = "100%",
Height = "400px"
});
Console.WriteLine($"Embed URL: {embedResponse.EmbedURL}");
Console.WriteLine($"Token: {embedResponse.Token}");
}
}
The response contains embedUrl, token, expiresAt, componentId (the component's _id), componentType, and options (width and height, defaulting to 100% and 600px).
The uploads embed doesn't use any features settings.
Embed in Your HTML
Use the embedUrl from the response as the iframe source. The host can differ per organization, so don't build the URL yourself.
<iframe
src="EMBED_URL_FROM_RESPONSE"
width="100%"
height="400px"
frameborder="0"
style="border: 1px solid #e5e5e5; border-radius: 8px;">
</iframe>
The React Native SDK does not include an Uploads component; use the iframe embed, or upload from your server with the Materials API.