> ## Documentation Index
> Fetch the complete documentation index at: https://www.studyfetch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Client Uploads

> File uploads and material processing

## 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.

<Note>
  For comprehensive documentation on uploading and managing materials, including API endpoints, folder organization, and search capabilities, see the [Materials API Reference](/api-docs/materials/overview).
</Note>

## Creating an Uploads Component

<CodeGroup>
  ```javascript JavaScript theme={null}
  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);
  ```

  ```python Python theme={null}
  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}")
  ```

  ```java Java theme={null}
  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());
      }
  }
  ```

  ```csharp C# theme={null}
  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}");
      }
  }
  ```
</CodeGroup>

## Configuration Parameters

<ParamField body="name" type="string" required>
  Name of the uploads component
</ParamField>

<ParamField body="type" type="string" required>
  Must be `"uploads"`
</ParamField>

<ParamField body="config" type="object" required>
  Uploads configuration object

  <Expandable title="Configuration Properties">
    <ParamField body="folderId" type="string" required>
      The folder ID where uploaded materials will be stored
    </ParamField>

    <ParamField body="materials" type="array">
      Array of material IDs associated with this component
    </ParamField>

    <ParamField body="folders" type="array">
      Array of folder IDs associated with this component
    </ParamField>

    <ParamField body="description" type="string">
      Optional description of the uploads component
    </ParamField>
  </Expandable>
</ParamField>

## Response

```json theme={null}
{
  "_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

<CodeGroup>
  ```javascript JavaScript theme={null}
  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
  });
  ```

  ```python Python theme={null}
  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
  )
  ```

  ```java Java theme={null}
  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);
  ```

  ```csharp C# theme={null}
  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}");
      }
  }
  ```
</CodeGroup>

### Uploads-Specific Embedding Features

<ParamField body="features.enableHistory" type="boolean" default="true">
  Show upload history and allow re-accessing previously uploaded materials
</ParamField>

### Embed in Your HTML

```html theme={null}
<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>
```