unable to upload videos in local dev environment

[brian-smith-tcril]

This issue is fully reproducible on master (https://github.com/openedx/frontend-app-course-authoring/commit/815ddbe94ea8348d3322930cc51cfd6e542f6756 as of writing)

In my .env.development file I set

ENABLE_NEW_VIDEO_UPLOAD_PAGE = true
ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = true

At first I was getting 404 errors when trying to upload videos, so I went digging through edx-platform code and found

https://github.com/openedx/edx-platform/blob/6edc0c2dd9084a6892fd3a504ae71f2900d5ad4b/cms/djangoapps/contentstore/toggles.py#L433-L437 https://github.com/openedx/edx-platform/blob/6edc0c2dd9084a6892fd3a504ae71f2900d5ad4b/cms/djangoapps/contentstore/toggles.py#L217-L231 https://github.com/openedx/edx-platform/blob/6edc0c2dd9084a6892fd3a504ae71f2900d5ad4b/xmodule/course_block.py#L1506-L1514 https://github.com/openedx/edx-platform/blob/6edc0c2dd9084a6892fd3a504ae71f2900d5ad4b/cms/djangoapps/contentstore/video_storage_handlers.py#L570-L589 https://github.com/openedx/edx-platform/blob/6edc0c2dd9084a6892fd3a504ae71f2900d5ad4b/cms/djangoapps/contentstore/video_storage_handlers.py#L181-L231 https://github.com/openedx/edx-platform/blob/6edc0c2dd9084a6892fd3a504ae71f2900d5ad4b/cms/djangoapps/contentstore/video_storage_handlers.py#L216-L220 and https://github.com/openedx/edx-platform/blob/6edc0c2dd9084a6892fd3a504ae71f2900d5ad4b/cms/djangoapps/contentstore/toggles.py#L500-L516

After which I set the following waffle flags

contentstore.mock_video_uploads
contentstore.enable_studio_content_api
contentstore.new_studio_mfe.use_new_video_uploads_page  
contentstore.new_studio_mfe.use_new_files_uploads_page

As well as the following Video Pipeline settings

Course video uploads enabled by defaults
Video uploads enabled by defaults

I then started getting 403 errors when trying to upload videos

{
    "httpErrorType": "api-response-error",
    "httpErrorStatus": 403,
    "httpErrorResponseData": "<Response is HTML>",
    "httpErrorRequestUrl": "http://localhost:18010/videos/course-v1:edX+DemoX+Demo_Course",
    "httpErrorRequestMethod": "post"
}

I then looked through https://openedx.atlassian.net/wiki/spaces/AC/pages/645726427/Video+Pipeline+Testing+Sandbox (thanks for pointing me to this @KristinAoki!)

I tried adding {"course_video_upload_token": "shared_course_token"} to the "Video Upload Credentials" textbox in Studio -> Advanced Settings as recommended there.

I could not find Oauth2 > Clients in django admin.

After that, I am still getting 403 errors.

Digging into the response a bit shows CSRF issues

<div id="summary">
  <h1>Forbidden <span>(403)</span></h1>
  <p>CSRF verification failed. Request aborted.</p>

</div>

<div id="info">
  <h2>Help</h2>

    <p>Reason given for failure:</p>
    <pre>
    Origin checking failed - http://localhost:2001 does not match any trusted origins.
    </pre>

  <p>In general, this can occur when there is a genuine Cross Site Request Forgery, or when
  <a
  href="https://docs.djangoproject.com/en/4.2/ref/csrf/">Django’s
  CSRF mechanism</a> has not been used correctly.  For POST forms, you need to
  ensure:</p>

  <ul>
    <li>Your browser is accepting cookies.</li>

    <li>The view function passes a <code>request</code> to the template’s <a
    href="https://docs.djangoproject.com/en/dev/topics/templates/#django.template.backends.base.Template.render"><code>render</code></a>
    method.</li>

    <li>In the template, there is a <code>{% csrf_token
    %}</code> template tag inside each POST form that
    targets an internal URL.</li>

    <li>If you are not using <code>CsrfViewMiddleware</code>, then you must use
    <code>csrf_protect</code> on any views that use the <code>csrf_token</code>
    template tag, as well as those that accept the POST data.</li>

    <li>The form has a valid CSRF token. After logging in in another browser
    tab or hitting the back button after a login, you may need to reload the
    page with the form, because the token is rotated after a login.</li>
  </ul>

  <p>You’re seeing the help section of this page because you have <code>DEBUG =
  True</code> in your Django settings file. Change that to <code>False</code>,
  and only the initial error message will be displayed.  </p>

  <p>You can customize this page using the CSRF_FAILURE_VIEW setting.</p>
</div>

@arbrandes has also been trying to get this working, but he has been using tutor instead

[brian-smith-tcril]

I thought this may be fixed by https://github.com/openedx/edx-platform/commit/5e732f9d1e278dea5b164d3c0fbfb6a48980a43f, but after pulling the latest devstack images I'm now getting

Access to fetch at 'http://example.com/put_video' from origin 'http://localhost:2001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[KristinAoki]

When contentstore.mock_video_uploads is enabled, it does not actually function as mocking the upload. It just mocks a success response to adding the video to the backend with an upload url for a fake server. To actually test if the pipeline was set up correctly, you need to disable contentstore.mock_video_uploads

[brian-smith-tcril]

after turning off contentstore.mock_video_uploads I'm still getting but I'm no longer seeing any errors in the console or network tabs of the browser developer tools