Skip to main content

​
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);

​
Configuration Parameters

​
name
string
required
Name of the uploads component
​
type
string
required
Must be "uploads"
​
config
object
required
Uploads configuration object

​
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
});

​
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>
⌘I