File sizes over 100MB

[Iamhuzaifasabahuddin]

Hi,

Hope you're doing well!

I had a couple of quick questions about the S3 file upload library we've been looking at.

1. File size support — does the library handle uploads over 100MB? I want to make sure it can handle larger files without any issues on the server side.

2. ClearableFileInput for S3 — based on my understanding, S3 requires the file field to use a ClearableFileInput widget. Given our current model, view, and template setup, what changes would we need to make to get this working correctly?

Model:

class Post(models.Model):

    task = models.ForeignKey(
        Task,
        on_delete=models.CASCADE,
        related_name="posts",
        null=True,
        blank=True
    )

    author = models.ForeignKey(
        User,
        on_delete=models.CASCADE,
        related_name="posts"
    )

    title = models.CharField(max_length=255)
    content = models.TextField()

    created_at = models.DateTimeField(auto_now_add=True, db_index=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ["-created_at"]

    def __str__(self):
        return self.title


class PostFile(models.Model):
    """
    Model to store files associated with a post.
    Allows multiple files per post.
    """
    post = models.ForeignKey(
        Post,
        on_delete=models.CASCADE,
        related_name='files'  # Access via post.files.all()
    )
    file = models.FileField(
        upload_to='post_uploads/%Y/%m/',
        null=True,
        blank=True
    )
    uploaded_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return f"{self.post.title} - {self.file.name}"
    
    @property
    def filename(self):
        import os
        return os.path.basename(self.file.name)

    class Meta:
        ordering = ['-uploaded_at']

View:

@login_required
def create_post(request, task_id):
    """
    Create a new post within a team.
    Posts are optional linked to tasks.
    """
    task = get_object_or_404(Task, id=task_id)
    workspace = task.team.client.workspace
    client = task.team.client
    team = task.team

    if not request.user.is_superuser or not is_workspace_admin(request.user, workspace):

        if not is_workspace_member(request.user, workspace):
            raise PermissionDenied("Not allowed")

        if request.user not in team.members.all():
            raise PermissionDenied("Not a team member")

        # Must be assigned to task
        if task and request.user not in task.assigned_to.all():
            raise PermissionDenied("Not assigned to this task")
    tasks = Task.objects.filter(team=team)

    form = PostForm(request.POST or None, request.FILES or None)
    if form.is_valid():

        post = form.save(commit=False)
        post.author = request.user
        post.task = task

        post.save()

        uploaded_files = request.FILES.getlist('files')
        file_ids = []

        for uploaded_file in uploaded_files:
            post_file = PostFile.objects.create(
                post=post,
                file=uploaded_file
            )
            file_ids.append(post_file.id)

        post_url = request.build_absolute_uri(
            reverse('post_detail', kwargs={'post_id': post.id})
        )

        cc_emails = [
            u.email
            for u in task.assigned_to.all()
            if u.email and u != request.user and u.email != team.client.email
        ]

        context = {
            "post_url": post_url,
            "uploaded_files": [f.name for f in uploaded_files],
            "team_name": team.name
        }

        # ===== ASYNC TASKS =====

        send_post_email_task.delay(
            user_id=request.user.id,
            client_id=team.client.id,
            post_id=post.id,
            to_email=team.team_lead.email,
            cc_emails=cc_emails,
            subject=f"[{team.name}] New Post - {post.title}",
            context_data=context,
            file_ids=file_ids
        )

        file_names = ', '.join([f.name for f in uploaded_files]) if uploaded_files else 'None'

        message = f"""
        *New Team Post Created*

        *Team:* {team.name}
        *Client:* {team.client.name}
        *Author:* {request.user.username}

        *Title:* {post.title}

        *Content:*
        >{post.content}

        *Files:* {file_names}

        *URL:* {post_url}
        """

        # send_slack_post_notification_task.delay(
        #     user_id=request.user.id,
        #     message=message,
        #     file_names=file_names
        # )
        #
        # if file_ids:
        #     upload_files_to_slack_task.delay(
        #         user_id=request.user.id,
        #         file_ids=file_ids,
        #         model_type='post'
        #     )

        messages.success(request, "Post created successfully.")
        return redirect("task_posts", task_id=task.id)

    return render(request, "create_post.html", {
        "form": form,
        "team": team,
        "task": task,
        "workspace": workspace,
        "client": client,
        "tasks": tasks,
    })

Template:

{% extends 'base.html' %}
{% load static %}
{% load bootstrap5 %}

{% block title %}Create Post - {{ task.name }}{% endblock %}

{% block content %}
<div class="page-header">
    <div class="container">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-end gap-4">
            <div>
                <div class="eyebrow">Workspace: {{ workspace.name }} | Client: {{ client.name }} | Task: {{ task.name }}</div>
                <h1 class="section-title mb-0">Create New Post</h1>
            </div>
            <div class="d-flex flex-wrap gap-2">
                <a href="{% url 'task_posts' task.id %}" class="btn-black">
                    <i class="bi bi-arrow-left"></i> Back to Posts
                </a>
                <a href="{% url 'team_tasks' task.team.id %}" class="btn-outline-custom">
                    Back to Tasks
                </a>
            </div>
        </div>
    </div>
</div>

<div class="container pb-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="hexz-card p-4 p-md-5">
                <div class="mb-4">
                    <h2 class="font-syne h4 fw-bold">Post Content</h2>
                    <p class="muted">Share updates, files, or information with your team.</p>
                </div>

                <form method="post" enctype="multipart/form-data" novalidate>
                    {% csrf_token %}

                    <div class="field-group">
                        <label class="field-label" for="{{ form.title.id_for_label }}">Title *</label>
                        {{ form.title }}
                        {% if form.title.errors %}
                            <div class="text-danger small mt-1">{{ form.title.errors|striptags }}</div>
                        {% endif %}
                    </div>

                    <div class="field-group">
                        <label class="field-label" for="{{ form.content.id_for_label }}">Content *</label>
                        {{ form.content }}
                        {% if form.content.errors %}
                            <div class="text-danger small mt-1">{{ form.content.errors|striptags }}</div>
                        {% endif %}
                    </div>

                    <div class="field-group">
                        <label class="field-label" for="files">Attach Files</label>
                        <input type="file" id="files" name="files" multiple class="form-control" accept="*/*">
                        <div class="muted small mt-2">
                            <i class="bi bi-info-circle"></i> You can select multiple files at once.
                        </div>
                    </div>

                    <div class="d-flex flex-wrap gap-3 mt-5">
                        <button type="submit" class="btn-gold py-3 px-5">
                            <i class="bi bi-send"></i> Publish Post
                        </button>
                        <a href="{% url 'task_posts' task.id %}" class="btn-outline-custom py-3 px-5">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--<style>-->
<!--    input[type="text"], textarea {-->
<!--        width: 100%;-->
<!--        padding: 12px 14px;-->
<!--        border: 1.5px solid var(&#45;&#45;border);-->
<!--        border-radius: 4px;-->
<!--        background: var(&#45;&#45;white);-->
<!--        font-family: 'DM Sans', sans-serif;-->
<!--        font-size: 0.9rem;-->
<!--        color: var(&#45;&#45;black);-->
<!--        outline: none;-->
<!--        transition: all 0.2s;-->
<!--    }-->
<!--    input[type="text"]:focus, textarea:focus {-->
<!--        border-color: var(&#45;&#45;black);-->
<!--        box-shadow: 0 0 0 3px rgba(10,10,10,0.05);-->
<!--    }-->
<!--</style>-->
{% endblock %}

[codingjoe]

Hi @Iamhuzaifasabahuddin,

Thank you for reaching out. Yes, I know that some community members use the package for 10GB+ video files.

Do you have any specific questions about the implementation? You just have to follow the installation instructions in the readme, followed by setting up the S3OptimizedUploadStorage which is specialized for large files.

Let me know if you have any specific questions.

Cheers!
Joe

[Iamhuzaifasabahuddin]

I got it figured out one last bit would be how to pass multiple files? As if it's not letting me select more than one

[Iamhuzaifasabahuddin]

Hiya joe,

It seems to appear the js isn't rendering for some reason any idea why this might be? I got it to work but with storage = s3file.storages_optimized.S3OptimizedUploadStorage it gives an error etc

[codingjoe]

Well if you could actually copy past the stack trace, I might be of more help. The photo doesn't give me enough information. Of corse you can always ask AI too.

[Iamhuzaifasabahuddin]

Hiya Joe,

Thanks for your help. The thing is that the JS isn't taking effect which is weird do I have to add any specific tag to the template or anything? Also when I use the optimized storage it basically gives me that specific error the one I shared the image for. If you could assist me on this it'll be much appreciated.

Looking forward to it.

Cheers

[codingjoe]

You will have to include the form media in your template. Do you have a {{ form.media.js }} and {{ form.media.css }} somewhere?